Inline-Elemente nicht umbrechen

[PsychoSchlumpf]

Hallo!
ich habe in div-container mit fester größe, mit "overflow:auto", sodass bei längeren inhalten scrollbalken erzeugt werden.

jetzt hab ich ne liste gemacht mit listenelementen in denen je ein bild steckt. die listenelemente hab ich mit "float:left" nacheinander angeordnet. jedoch werden diese umgebrochen sobald es an den rand des idvs geht. ich will aber dass alle in einer zeile angezeigt werden und eine querscrolleiste entsteht.
wie geht das?

[Chnoch]

Vllt. kannst du noch ein div im div erstellen, für welches gilt:


overflow-x: scroll; overflow-y: hidden

Aber das interpretiert afaik nur der IE korrekt. Für andere Browser weiss ich es mom nicht.

[hdd]

nich schön, aber <nobr> ...

[PsychoSchlumpf]

danke, aber beides nicht zufriedenstellend.
das gibts doch nicht. das muss doch gehn!?

[hdd]

wtf? <nobr><img ...></nobr> funktioniert nicht? poste bitte mal die paar zeilen ...

[PsychoSchlumpf]

nobr funktioniert, aber dann ist halt die validität hin.



<div id="content">
<ul class="galerie">
<li><a href="portfolio/portrait/1_big.jpg" rel="lightbox[portfolio]" title="Bild 1"><img src="portfolio/portrait/1.jpg" alt="Thumbnail 1"/></a></li>
<li><img src="portfolio/portrait/2.jpg" alt="Thumbnail 2"/></li>
<li><img src="portfolio/portrait/3.jpg" alt="Thumbnail 3"/></li>
<li><img src="portfolio/portrait/4.jpg" alt="Thumbnail 4"/></li>
<li><img src="portfolio/portrait/5.jpg" alt="Thumbnail 5"/></li>
<li><img src="portfolio/portrait/6.jpg" alt="Thumbnail 6"/></li>
<li><img src="portfolio/portrait/7.jpg" alt="Thumbnail 7"/></li>
<li><img src="portfolio/portrait/8.jpg" alt="Thumbnail 8"/></li>
<li><img src="portfolio/portrait/9.jpg" alt="Thumbnail 9"/></li>
<li><img src="portfolio/portrait/10.jpg" alt="Thumbnail 10"/></li>
<li><img src="portfolio/portrait/11.jpg" alt="Thumbnail 11"/></li>
<li><img src="portfolio/portrait/12.jpg" alt="Thumbnail 12"/></li>
</ul>
</div>




ul.galerie {
margin:0;
padding:0;
list-style-type:none;
}
ul.galerie li {
float:left;
margin:0;
padding:0;
}
ul.galerie img {
border:0;
}

div#content {
width:640px;
height:251px;
color:#EEE;
font-size:1.2em;
font-family:Tahoma,Arial,sans-serif;
padding:20px;
overflow:auto;
}

[hdd]

du willst alle bilder nebeneinander haben?

[PsychoSchlumpf]

ja, genau.

[hdd]

warum machst du dann neue zeilen?

[Enchanter]

Hää, du willst doch nur ne Horizontale Liste oder was.
Ne Liste ist schlichtweg nicht von Natur aus inline.
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal

[PsychoSchlumpf]

Hää, du willst doch nur ne Horizontale Liste oder was.
Ne Liste ist schlichtweg nicht von Natur aus inline.
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal
ja, ich weiß. habe ich der liste ein display:inline gegeben. er stellt die listenelemente ja auch nebeneinander da. aber eben nicht nur einer zeile, sondern bricht sie am rechten rand des umgebenden div-containers um.

[PsychoSchlumpf]

es geht hier prinzipiell um die frage, wie ich per css elemente nebeneinander anordnen kann, ohne dass diese an der fensterbegrenzung (oder containerbegrenzung) umgebrochen werden. es soll eben ein horizontaler scrollbalken entstehen.

mit einer tabelle wäre es ja einfach: eine zeile, viele zellen nebeneinander. wie aber mit css?

das beispiel von selfhtml ordnet die elemente wie gewollt ja erst mal nebeneinander an. doch es löst eben nicht das problem des umbruchs bei ende der anzeigefläche. man sieht das, wenn man bei dem selfhtml-beispiel das fenster kleiner skaliert. dann werden die elemente umbegrochen.

[Enchanter]

Du kannst den body Inhalt einfach auf 150% oder so stellen.
In dem Fall oben kann du auch white-space:nowrap im ul benutzen.

[PsychoSchlumpf]

Du kannst den body Inhalt einfach auf 150% oder so stellen.
In dem Fall oben kann du auch white-space:nowrap im ul benutzen.
in diesem fall ist es ja nicht der body, sondern ein div-container. aber auch die 150% helfen nichts. denn dann wird der body ja 150% von seiner normalen größe. er soll ja aber genau so groß werden, wie der inhalt der drin ist breit ist.

white-space funktioniert hier nicht, da es eine liste ist. white-space funktioniet nur bei text.