HTML & CSS: div - positionering

[Benzen]

Jag skulle behöva lite hjälp med att förstå eller hitta bra exempel på hur man positionerar element i CSS. Jag tyckte mig följa ett bra exempel men utan någon större framgång. Resultatet är nu att 2 div:ar placeras rätt medan den tredje är totalt fel i Mozilla, och samtliga 3 är ute och cyklar i Explorer.

Det jag försöker göra är följande:
* Skapar en grunddiv
* Högst i denna kommer en menydiv
* (1) Efter denna kommer en div som ska vara vänsterjusterad och som ska innehålla bilder.
* (2) Till höger om denna kommer själva textrutan

I Mozilla lyckas jag alltså få till både 1 och 2 och dessa hamnar rätt. Om jag försöker introducera en tredje div som även den ska ligga till vänster om 2 hamnar den dock åt skogen. I Explorer är det enbart 1 som kommer på rätt plats.

Jag gissar att jag missar något elementärt när det kommer till CSS:en.

Min 1 ser ut som följer:
#imagebox {
float:left;
display:inline;
margin-left:15px;
margin-top:10px;
border:#000000 0px solid;
padding:0;
}

& 2 ser ut som följer:
#mainbox {
margin-top:10px;
margin-left:230px;
background:#FFFFFF;
width:550px;
border:#000000 1px solid;
padding:0;
}

Tänker jag helt galet med float och inline? Hur skulle ni skriva? Jag vill alltså placera dessa bredvid varandra.

 

[moiran]

Sv: HTML & CSS: div - positionering

Ta bort display-grejen och gör båda till float:left. Bestäm storleken på båda också, om det är två divar som ska ligga brevid varandra. Se till att de har tillräckligt med plats för att ligga brevid varandra också (inklusive marginaler, ramar och padding - som fungerar olika för olika browsers och gärna ställer till det när man vill ha flytande element... ). Sen borde det funka som du tänkt dig.

En annan variant är ju att du positionerar div:arna med absolut eller relativ placering.

Hur display fungerar och inte fungerar kan du se här: http://www.quirksmode.org/css/display.html

Och väldigt grundligt hur float fungerar här (tutorial 8 är väl vad du tänkt dig):
http://css.maxdesign.com.au/floatutorial/

 

[moiran]

Sv: HTML & CSS: div - positionering

Hm. Kanske går det lösa genom att göra båda blocken display:inline också (och ingen float). Fortfarande förutsatt att de får plats brevid varandra.

 

[moiran]

Sv: HTML & CSS: div - positionering

hm, ta bort den enorma margin-left på div2 också när du gör någon av ovanstående lösningar.

 

[moiran]

Sv: HTML & CSS: div - positionering

När jag nu vaknat till lite mer (jaja, jag hade sovmorgon idag): du kan inte använda display-inline om det inte är så att bild-diven och text-diven är lika höga eller att du har tänkt dig att bild-divens underkant ska vara kant i kant med text-divens underkant. (till skillnad från överst i grunddiven båda två)

 

[Benzen]

Sv: HTML & CSS: div - positionering

Tack sa jattemycket for dina svar! Mitt stora problem ar just att jag inte forstar detta med inline, float osv men jag misstanker att dina tips och de dar lankarna loser problemet. Just nu sitter jag pa jobbet och kan inte testa forran ikvall, men lasa om det ska jag.

 

[moiran]

Sv: HTML & CSS: div - positionering

För att förstå display behöver du förstå skillnaden mellan "block" och "inline"-element. Det finns nog lite svenska länkar som förklarar det rätt tydligt, som t.ex:

http://www.tigge.org/html/html_and_css_0.9.pdf sidan 68 och framåt
http://www.ninetnet.com/websidor/css/css_placering.html#disp
http://www.jonasweb.nu/sidor/stylesheets/boxar_2.html

 

[Benzen]

Sv: HTML & CSS: div - positionering

Tack, nu har jag hunnit lasa lite och borjar forsta vad det handlar om. Ditt andra exempel fran Floattutorial var verkligen perfekt, precis det jag vill astadkomma. Tillsammans med dina senaste lankar ska det nog fungera nu.

Som jag tolkar det appliceras display: inline pa barnelementen (de element som presenteras inuti den div dar inline introduceras). Det jag har gjort ar dock att satta inline pa ett barnelement istallet for i det element som innehaller de element jag vill ska hamna bredvid varandra. Effekten av det hela blir darfor obefintlig. Men jag tror jag anvander losningen med enbart float istallet.

 

[nidron]

Sv: HTML & CSS: div - positionering

Som jag tolkar det appliceras display: inline pa barnelementen (de element som presenteras inuti den div dar inline introduceras). Det jag har gjort ar dock att satta inline pa ett barnelement istallet for i det element som innehaller de element jag vill ska hamna bredvid varandra. Effekten av det hela blir darfor obefintlig. Men jag tror jag anvander losningen med enbart float istallet.

Det verkar ju fungera för dig nu, så jag tänkte mest ge ett exempel på vad man kan göra med display-attributet. Länkar( <a href=""> ) är inline-element som bara tar upp så mycket plats de behöver. Tänk dig att du vill ha en meny längst till vänster på sidan och att varje länk börjar på ny rad, samt att det finns en avgränsande border till varje länk. Då kan det vara smart att sätta alla länkar i menyn till display:block; så att alla länkar kommer bli lika breda

..Och för ditt problem rekommenderar jag f.ö. float