Keskustelu: Nettisivujen teko: Teksti katkeaa, scrollbar tilalle

Teen sivulleni systeemiä, joka listaa kaikki kansiot tiedostoineen ja alihakemistoineen. Esimerkkinä kirjoitin käsin pienen pätkän:

<div style="max-width: 250px; overflow-x: auto;">
	<img src="img/iconset/m_dir.gif"> Kansio
	<ul>
		<img src="img/iconset/m_image.gif"> Kuva<br>
		<img src="img/iconset/m_image.gif"> Kuva<br><br>

		<img src="img/iconset/m_dir.gif"> Kansio
		<ul>
			<img src="img/iconset/m_sound.gif"> Beethoven: Kuudes sinfonia<br>
			<img src="img/iconset/m_image.gif"> Kuva<br>
			<img src="img/iconset/m_image.gif"> Kuva<br>
			<img src="img/iconset/m_image.gif"> Kuva<br><br>
		</ul>
	</ul>
</div>

Tämän pitäisi olla maksimissaan 250px pitkä, kuten se onkin. (Huomatkaa alussa overflow-x: auto) Teksti Beethoven: Kuudes sinfonia katkeaa kuudes ja sinfonia sanojen välissä, vaikka sen ei pitäisi. Alas pitäisi ilmestyä scrollbar.

Et voi sijoitella ul-elementin sisään tuollaista koodia, vaan siellä pitäisi olla li-elementtejä. Itse ongelmaasi ratkaisuksi kelvannee white-space: nowrap; estämään automaattisen rivittymisen. Muista myös, että overflow-x ja overflow-y ovat CSS3:n uusia ominaisuuksia, jotka eivät kaikkialla toimi.

Kiitos. Ainakin IE7 ja IE8 tukevat tätä, lisäksi ainakin muut uudet selaimet.

Mahdollisimman hyvää selaintenvälistä toimivuutta ajatellen CSS-tiedostossa voi ensin määrittää overflow:n autoksi ja sitten erikseen säätää tarkemmin overflow-x:n ja overflow-y:n toimimaan halutulla tavalla.