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

Tråden skapades och har fått 5 svar. Det senaste inlägget skrevs .
1

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

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)

  • 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;
}

  • 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.

  • 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.

Ursprungligen av Mattias Bodlund:

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.

Uveränt, tack för hjälpen!

Citat:

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.

Jag försökte med de svåraste delarna först, alla <div>:ar skall normaliseras sedan.

Tack än en gång.

//Mikael

1
Bevaka tråden