webForumDet fria alternativet

DIV med horisontell scroll??

5 svar · 689 visningar · startad av learn

learnMedlem sedan jan. 20051 130 inlägg
#1

Hur gör jag för att få en DIV att scrollas horisontellt istället för vertikalt?

DIV:en i fråga har en bestämd bredd och höjd och dess innehåll skall alltså fortsätta åt sidan istället för nedåt...

Hur göra? Ge mig gärna en exempelkod. Tack!

olarssonMedlem sedan feb. 200777 inlägg
#2

overflow-x: auto;

overflow-x är ickestandard. Men fungerar i IE5+ och FF.

TroxyMedlem sedan mars 20041 505 inlägg
#3

olarsson skrev:

overflow-x är ickestandard. Men fungerar i IE5+ och FF.

overflow-x respektive overflow-y ingår i CSS3 och kan med gott samvete användas.
Nu för tiden kan stödet anses vara fulländat då även Opera och Safari stödjer dessa egenskaper.

learnMedlem sedan jan. 20051 130 inlägg
#4

Arghh, får det inte att funka...! x(

Så här ser koden ut nu:

<style type="text/css">

body
{
background-color:#000;
}

div#ruta 
{ 
padding:30px;
}

div#bilder 
{
padding:10px;
width:400px;
height:200px; 
background-color:#FFF;
overflow-x:scroll;
}

div.bild {
float:left;
margin-right:20px;
}

</style>

<div id="ruta">

    <div id="bilder">
    
        <div class="bild">
        <p><img src="bild1.jpg" /></p>
        <p>Bla bla bla bla</p>
        </div>
        
        <div class="bild">
        <p><img src="bild2.jpg" /></p>
        <p>Bla bla bla bla</p>
        </div>
        
        <div class="bild">
        <p><img src="bild3.jpg" /></p>
        <p>Bla bla bla bla</p>
        </div>
    
    </div>

</div>

Jag vill alltså att bilderna och dess text ska hamna bredvid varandra och att DIV:en sedan skall scrollas horisontellt. Nu med denna kod hamnar de under varandra med en vertikal scroll. Fel, fel, fel!

Vad gör jag för fel??

Untitled-2.jpg
learnMedlem sedan jan. 20051 130 inlägg
#5

Ingen som vet hur man gör detta?

Jag vet att jag sett det på andra sajter förut...

westmanMedlem sedan aug. 2004249 inlägg
#6

Jag har nyligen gjort samma sak. Löste problemet med att lägga en extra bred DIV inuti den mindre "scroll-diven" (i ditt fall #bilder).

Se själv: www.luthagenvåning.se

Efterlyser en bättre lösning. :q

132 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
128 ms — hämta tråd, inlägg och bilagor (db)