nicht angemeldet
Umbruch verschachtelter DIV unterbinden
suit
MudGuard
Gunnar BittersmannHallo zusammen...
ich habe einen DIV als Container für weitere darin enthaltene DIV-Elemente. Der äußere DIV hat eine feste Breite und Höhe, overflow ist auf auto gestellt.
Die Anzahl der enthaltenen DIVs ist variabel und kann somit die feste Breite überschreiten. Durch den Umbruch werden die enthaltenen Elemente leider untereinander angeordnet. Das soll nicht passieren, sondern die Elemente sollen in einer Zeile bleiben und nebeneinander stehen.
der Code:
<html>
<head>
<style>
#ausgabe{
width:700px;
height:300px;
overflow:auto;
background-color:#aaaaaa;
white-space:nowrap;
}
.item{
width:200px;
height:200px;
background-color:#bbbbbb;
border:1px solid #000;
margin:5px;
float:left;
display:inline;
}
</style>
</head>
<body>
<div id="ausgabe">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</body>
</html>
was muss ich machen, damit die inneren DIVs nicht umgebrochen werden?
Gruß,
Jochen
-
Elemente mit dem initialen Wert "block" der Eigenschaft "display" erzeugen automatisch einen Absatz, andere Werte rufen ggf. anderes Verhalten hervor.
-
Elemente mit dem initialen Wert "block" der Eigenschaft "display" erzeugen automatisch einen Absatz, andere Werte rufen ggf. anderes Verhalten hervor.
Jipp, und Wasser ist nass ;-). Das äußere Element hat die Eigenschaft display:block (per default). Das wird ja auch nicht geändert. Die darin enthaltenen DIVs bekommen aber display:inline; verpasst. Zusätzlich bekommt das äußere DIV white-space:nowrap; damit enthaltene Elemente nicht umgebrochen werden.
Das ganze soll wie ein iFrame funktionieren, in dem horizontal gescrollt werden kann...
-
-
Das widerspricht sich an sich. Eine feste Breite klingt nach "bitte nicht darüber hinaus gehen". Dann ist das Verhalten doch gerade das richtige.
Was sollte stattdessen sein?-
Das widerspricht sich an sich. Eine feste Breite klingt nach "bitte nicht darüber hinaus gehen". Dann ist das Verhalten doch gerade das richtige.
Was sollte stattdessen sein?Der äußere Bereich steht auf overflow:auto;
Daher sollen einfach die Scrollbars erscheinen, wenn die Breite gesprengt wird. Die feste Breite ist wichtig, weil sie Teil des Layout ist.-
Daher sollen einfach die Scrollbars erscheinen
auto sagt dem Browser, er soll machen was er gerade für richtig hält.
Versuch mal "scroll", das bringt laut Erklärung Scrollbalken.
-
-
-
<style>
#ausgabe{
width:700px;
height:300px;Die höhenangabe solltest du überdenken
overflow:auto;
background-color:#aaaaaa;
white-space:nowrap;
}.item{
width:200px;
height:200px;
background-color:#bbbbbb;
border:1px solid #000;
margin:5px;
float:left;
display:inline;Und hier würde ich nicht floaten sondern display:inline-block verwenden.
}
Ergo: für kleine Screens den Umbruch tolerieren
Der scheiss an float ist, das das Element aus dem Fluss genommen wird und somit dem parent Element keine Info zur Grösse/Höhe hinterlässt.
Aber eine Art von Fluss willst du eben offensichtlich doch.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
-
Hi,
Der scheiss an float ist, das das Element aus dem Fluss genommen wird und somit dem parent Element keine Info zur Grösse/Höhe hinterlässt.
doch, wenn das umgebende Element selbst gefloatet ist oder eine von "visible" unterschiedliche overflow-Angabe besitzt.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
Hi,
was muss ich machen, damit die inneren DIVs nicht umgebrochen werden?
soweit mein Überblick vor dem ersten Kaffee reicht ist das einzige, was unumgebrochen selbst (also ohne dass die Positionen einzeln zugewiesen werden) nebeneinander stehen kann, eine Reihe von Elementen mit display:table-cell.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
soweit mein Überblick vor dem ersten Kaffee reicht ist das einzige, was unumgebrochen selbst (also ohne dass die Positionen einzeln zugewiesen werden) nebeneinander stehen kann, eine Reihe von Elementen mit display:table-cell.
der erste Kaffee ist getrunken: Natürlich gibt es noch white-space:nowrap. Mal sehen, was mir nach dem zweiten Kaffee noch einfällt ...
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
Hi,
Hallo zusammen...
ich habe einen DIV als Container für weitere darin enthaltene DIV-Elemente. Der äußere DIV hat eine feste Breite und Höhe, overflow ist auf auto gestellt.
Die Anzahl der enthaltenen DIVs ist variabel und kann somit die feste Breite überschreiten. Durch den Umbruch werden die enthaltenen Elemente leider untereinander angeordnet. Das soll nicht passieren, sondern die Elemente sollen in einer Zeile bleiben und nebeneinander stehen.der Code:
[code lang=html]
<html>
<head>
<style>
#ausgabe{
width:700px;
white-space:nowrap;
}white-space:nowrap wirkt sich m.W. nicht auf gefloatete Elemente aus.
.item{
width:200px;
border:1px solid #000;
margin:5px;
float:left;Das ergibt pro Element eine Gesamtbreite von 212px.
4 davon hast Du, macht 848px.
Wie sollen die in 700px Breite reinpassen?display:inline;
Das ist wirkungslos, da float gesetzt ist.
}
<div id="ausgabe">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>Soup a la div?
Warum ist das keine Liste?cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
@@MudGuard:
nuqneH
display:inline;Das ist wirkungslos, da float gesetzt ist.
Nicht in alten IEs, da wirkt es Wunder (gegen doubled float-margin u.a. Bugs).
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
Das ist wirkungslos, da float gesetzt ist.
Nicht in alten IEs, da wirkt es Wunder (gegen doubled float-margin u.a. Bugs).
Bist Du nicht derjenige, der ständig verkündet, daß alte IEs irrelevant wären?
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
@@MudGuard:
nuqneH
Bist Du nicht derjenige, der ständig verkündet, daß alte IEs irrelevant wären?
Touché.
Aber wenn’s doch nur eine Zeile CSS ist, die keinem wehtut …
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-