Trädvy Permalänk
Medlem
Plats
sverige
Registrerad
Dec 2003

css positionering

tja

behöver lite css hjälp, var flera år sedan jag pillade med detta! Har 4 div:ar som ska placeras i en annan div, alltså totalt 5. Hur ska jag använda position i css:en för respektive div för att åstadkomma nedanstående?

MacBook Pro Retina, Mac Mini, iPhone, iPad, iPod, Apple TV, Apple Cinema Display

Trädvy Permalänk
Medlem
Plats
Örebro
Registrerad
Dec 2008

<div id="wrapper"> <!-- Den som är runt allting -->
<div id="header"> <!-- Headern -->
</div>

<div id="content"> <!-- Allt innehåll (den gula). Se till att den har "float: left;" i css dokumentet-->
</div>

<div id="sidebar"> <!-- Sidebaren (den gröna). Sw till att den har "float: right;" i css dokumentet-->
</div>

<div id="footer"> <!-- footern (den vita längst ner) -->
</div>

</div>

teh winnarz!!!!11

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003
Citat:

Ursprungligen inskrivet av VicMackey
tja

behöver lite css hjälp, var flera år sedan jag pillade med detta! Har 4 div:ar som ska placeras i en annan div, alltså totalt 5. Hur ska jag använda position i css:en för respektive div för att åstadkomma nedanstående?

http://img190.imageshack.us/img190/2663/40954559.th.png

Positionering i css går att lösa på många vis. Du måste säga vad vi får och inte får använda. Absolut positionering, rot-diven ska bestämma totala storleken, etc etc. Annars så får du den första lösningen som fungerar.

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> Div positioning </title> <style type="text/css" media="screen"> #div0 { width: 500px; height: 500px; background-color: blue; } #div1 { height: 140px; width: 480px; background-color: red; margin: 10px 10px 5px 10px; float: left; } #div2 { height: 300px; width: 365px; background-color: yellow; margin: 5px 5px 5px 10px; float: left; } #div3 { width: 100px; height: 300px; background-color: green; margin: 10px 10px; margin: 5px 10px 5px 10px; float: right; } #div4 { width: 480px; height: 20px; background-color: white; margin: 5px 10px 10px 10px; float: left; } </style> </head> <body> <div id="div0"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </div> </body> </html>

Fungerar i FF 3.5.2, IE8, Chrome 2.0.172.33 (browsers jag har)

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Plats
sverige
Registrerad
Dec 2003

ska bara peta ihop en väldigt basic och statiskt liten grej så jag har inga större krav mer än detta, Tack!

MacBook Pro Retina, Mac Mini, iPhone, iPad, iPod, Apple TV, Apple Cinema Display

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003
Citat:

Ursprungligen inskrivet av VicMackey
ska bara peta ihop en väldigt basic och statiskt liten grej så jag har inga större krav mer än detta, Tack!

Ok. Hade inget för mig så jag gjorde denna också.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> Div positioning </title> <style type="text/css" media="screen"> #div0 { height: 600px; width: 600px; background-color: blue; padding: 10px 10px 35px 10px; } #div1 { height: 25%; width: 100%; background-color: red; float: left; } #div2 { height: 65%; width: 69%; background-color: yellow; margin: 10px 0px 0px 0px; float: left; } #div3 { height: 65%; width: 29%; background-color: green; margin: 10px 0px 5px 0px; float: right; } #div4 { height: 10%; width: 100%; background-color: white; margin: 5px 0px 5px 0px; float: left; } </style> </head> <body> <div id="div0"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </div> </body> </html>

Den är beroende av div0s bredd och höjd, alla andra element expanderar efter den. Ett litet problem är att mellanrummet i sidled mellan div2 och div3 inte går att få till en bestämd position (exempelvis 5px) när man använder procent utan det är hela procent som måste anges. I detta fall är det 1% mellanrum, vilket gör att mellanrummet är ganska stort om man gör div0 stor. Måste hitta en lösning till detta...

Denna lösning fungerar i webbläsarna jag skrev förut.

ηλί, ηλί, λαμά σαβαχθανί!?