XHTML, CSS och DIV:ar. Hur positionera rätt?

Tråden skapades 2004-09-23 och har fått 5 svar. Det senaste inlägget skrevs 2004-09-23.

2004-09-23 12:52

Mikael Svensson
Medlem ●
Mölndal
2004-09-23 12:52

Så hade jag tänkt mig att layouten på sidan skulle vara, där alla fält byggs av <div>. Men alla fält skall också vara "fluid" och måste på något sätt sättas i relativa mått (% eller em).

Det enda som skall vara bestämt är att layouten skall ha en viss grundbredd och den skall centreras på sidan. Storleken skall sedan gå att ändra - både på text och bilder.

Nu funkar det hyfsat bra i Safari och Firefox, men jag har problem med den sista lilla biten, sidfoten, som inte hamnar där den skall. Inte fungerar det som det skall i IE5/Mac heller. Hur skall jag fånga upp sidfoten och hur skall jag få det att fungera med IE?

Ett exempel som kommit nästan ända fram finns på http://82.182.110.148/divtest/, där samtliga fält finns med. Många är de, sammanlagt 11 som skall visa innehåll och ytterligare något eller några som behövs för positioneringen.

TIA

//Mikael

Anmäl Ändra Gilla Svara

2004-09-23 13:16

Kellogs
Medlem ●
Malmö
2004-09-23 13:16

Testa detta, vet ej om det funkar när inte allt har fasta positioner men det borde gå
div.sidh {
position: absolute;
left: XX px;
top: XX px;
}

Om du sätter position absolute så måste du ange värde (om jag nu inte minns fel)

Anmäl Ändra Gilla Svara

2004-09-23 14:15

Gäst
Oregistrerad ●
2004-09-23 14:15

Ok - det var mycket på en gång.

Steg 1. Centrering.
Den lösning jag brukar använda för att få det att fungera fint i "alla" browsers är:
Placera hela din layout i en div som heter page-container och sedan följande css

body
{
text-align: center;
}

#page-container
{
position: relative;
text-align: left;
width: 54.5em;
margin: 0px auto 0px auto;
}

Anmäl Ändra Gilla Svara

2004-09-23 14:35

Gäst
Oregistrerad ●
2004-09-23 14:35

Problem: Dina boxar med innehåll är absolut placerade vilket gör att det "bryts ut" ur dokumentets layout vilket gör det svårt att placcera något under dem.

Anmäl Ändra Gilla Svara

2004-09-23 14:58

Gäst
Oregistrerad ●
2004-09-23 14:58

Ok - Titta på detta. Inte helt bra men nästan.

Lösningen var inte "clear" utan att sätta en av columnerna till position: relative vilket ger containern en höjd vilket placerar footern rätt. Inte perfekt men kanske något du kan arbeta vidare med.

En bra ide är alltid att test med olika längder på tecten i dina divs. Att texten alltid är samma längd är inte så troligt.