Enkel HTML: Kjappt spørsmål om overflow i en div

Fulgu · 24. august 2008

Håper jeg uttrykker meg på grei sjargong, HTML er ikke min greie.

Jeg lager en helt enkel <div> som dekker sidebredden, altså 100% width. Den er 600px høy, og jeg skal fylle den med bilder 580px høye, og ønsker at folk skal kunne scrolle horisontalt bortover bildene.

Men, slik som der er nå brekker den mellom bildene slik at scrollingen foregår vertikalt istedet.

Hvordan hindrer jeg line-breaks mellom bilder slik at <div>en blir tvunget til å scrolle horisontalt?

Fulgu · 24. august 2008

Her er koden btw:

<div>
 <div class="innhold"><img style="float:left;position:relative" src="pics/1.jpg" width="500" height="580" /><img style="float:left;position:relative" src="pics/1.jpg" width="500" height="580" /><img style="float:left;position:relative" src="pics/1.jpg" width="500" height="580" /><img style="float:left;position:relative" src="pics/1.jpg" width="500" height="580" /><img style="float:left;position:relative" src="pics/1.jpg" width="500" height="580" /><img style="float:left;position:relative" src="pics/1.jpg" width="500" height="580" /></div>
</div>

CSS:

.innhold {
background-color: #000000;
background-position: left center;
margin: 0;
padding: 0;
height: 600px;
width: 100%;
border: 0;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
overflow: auto;
white-space: nowrap;
}

Jonas · 24. august 2008

Du har et par overflødige CSS-egenskaper som gjør at det ikke fungerer. Et eksempelet som følger har jeg rett og slett bare fjernet et par. (Testet i Opera, FF og IE)

<html>

<head>

	<title>Test</title>

	<style type="text/css">

		* {
			margin: 0;
			padding: 0;
		}

		.innhold {
			width: 100%;
			height: 602px;
			overflow: auto;
			white-space: nowrap;
		}

	</style>

</head>

<body>

	<div>

		<div class="innhold">

			<img src="pics/1.jpg" width="500" height="580" alt="test" />
			<img src="pics/1.jpg" width="500" height="580" alt="test" />
			<img src="pics/1.jpg" width="500" height="580" alt="test" />
			<img src="pics/1.jpg" width="500" height="580" alt="test" />
			<img src="pics/1.jpg" width="500" height="580" alt="test" />
			<img src="pics/1.jpg" width="500" height="580" alt="test" />

		</div>

	</div>

</body>

</html>

Endret 24. august 2008 av Jonas

Logg inn

Enkel HTML: Kjappt spørsmål om overflow i en div

Anbefalte innlegg

Fulgu

Lenke til kommentar

Videoannonse

Fulgu

Lenke til kommentar

Jonas

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer