Horisontell scroll i DIV med smådivar i.

2011-06-21, 19:08 #1

Medlem

Reg: Sep 2006

Inlägg: 53

Hej alla kunniga där ute.
Jag försöker lära mig det här med DIV'ar och dess placeringar, och har kört fast med en liten grej.

Jag ska försöka beskriva det:
Jag har en huvuddiv med fast höjd och bredd (element heter det tror jag), och i den vill jag ha massa smådivar som ska flyta omkring fritt. Jag har fler smådivar än vad som får plats i huvuddiven. Då verkar det som att som standard försvinner smådivarna neråt utanför huvuddiven. Se bild #1 i länkarna här nedan. Jag vill att dom istället ska försvinna åt höger. Se bild #2.

Meningen är att jag ska aktivera en horisontell scrollbar, men ingen vertikal. Jag testade det här med "white-space: nowrap" som beskrivs här: http://www.webmasterworld.com/forum83/8844.htm
Och det funkar perfekt om det endast är text eller bilder i huvuddiven. Men hur gör jag när huvuddiven endast innehåller smådivar?

Tack på förhand...

http://www.bohden.se/temp/1.jpg
http://www.bohden.se/temp/2.jpg

Citera

2011-06-21, 23:42 #2

Medlem

Reg: May 2007

Inlägg: 3 528

Nåt sånt här?
http://www.csszengarden.com/?cssfile=019/019.css

Antingen float eller display:inline.

By default kommer nya blockelement att hamna under varandra, float eller display:inline kommer ändra det. Dock verkar det som om du vill ha både och. Slå då in de element du vill ska hamna under varandra i en wrapper-div och gör sen float på den.

__________________
Senast redigerad av phunque 2011-06-21 kl. 23:49.

Citera

2011-06-22, 11:19 #3

Medlem

Reg: Sep 2006

Inlägg: 53

Citat:

Ursprungligen postat av phunque

Nåt sånt här?
http://www.csszengarden.com/?cssfile=019/019.css

Antingen float eller display:inline.

By default kommer nya blockelement att hamna under varandra, float eller display:inline kommer ändra det. Dock verkar det som om du vill ha både och. Slå då in de element du vill ska hamna under varandra i en wrapper-div och gör sen float på den.

Tack ska du ha för svaret.
Jag postade även min fråga på ett annat forum och här är lösningen om någon mer undrar:

Kod:

<html>
<head>

<style type="text/css">       
#div_1
{height: 350px;
width: 350px;
margin: auto;
border: 1px black solid;
overflow-y: hidden;
overflow-x: scroll}

#div_3
{float: left;
height: 350px;
width: 500px;
margin: auto;
border: 1px black solid;
overflow-y: hidden;
overflow-x: scroll}

#div_2
{height: 100px;
width: 100px;
border: 1px solid #A2A2A2;
float: left}
</style>

</head>
<body>
<div id="div_1">
<div id="div_3">
    <div id="div_2"></div>
    <div id="div_2"></div>
    <div id="div_2"></div>
    <div id="div_2"></div>
    <div id="div_2"></div>
    <div id="div_2"></div>
    <div id="div_2"></div>
    <div id="div_2"></div>
    <div id="div_2"></div>
    <div id="div_2"></div>
    <div id="div_2"></div>
    <div id="div_2"></div>
</div>
</div>

</body>
</html>

Citera

2011-06-22, 11:24 #4

Medlem

Reg: Jan 2009

Inlägg: 1 389

Tänk bara på att du inte ska ha samma ID på flera element, använd classer istället om du behöver fler än en med samma.

Citera

2011-06-29, 01:19 #5

Medlem

Reg: Oct 2009

Inlägg: 149

div-element har per default display:block vilket gör att det är en radbrytning mellan varje:

[div 1]
[div 2]
[div 3]

Om du sätter display:inline-block på dem, kommer de radas upp efter varandra:

[div 1][div 2][div 3]

Sätt också overflow-x:scroll på den stora diven.

(Btw, Fundamentalist har helt rätt: Varje ID måste vara unikt. Det får INTE finnas två eller fler element med id="div_2". Du ska isåfall använda class="div_2", och skriva .div_2 istället för #div_2 i CSSen.)

HTML:

HTML-kod:

<div id="storDiv">

<div class="litenDiv">Lite text</div>
<div class="litenDiv">Lite mer text</div>
<div class="litenDiv">Lite mer text igen</div>

</div>

CSS:

Kod:

#storDiv {width:800px; /*Vilken storlek du vill*/
height:600px; /*Vilken storlek du vill*/
overflow-x:scroll;}
.litenDiv {display:inline-block;
}

__________________
Senast redigerad av Alling 2011-06-29 kl. 01:22.

Citera

Horisontell scroll i DIV med smådivar i.

Stöd Flashback