Moin

Also ich hab mir mal Gedanken gemacht und brauch jetzt eure Hilfe:
Ich möchte eine Xhtml-konforme Website erstellen. In der Website sind mehrere Layer, die alle einen Abstand von 1 Px zueinander haben sollen. Die Layer werden von einem gesamt Layer umschlossen um die Breite von 700px nich zu überschreiten.

Nun was meint ihr wie soll ich vorgehen?

Jeweils einen

wenn du xhtml 1 und css 2 konform gehen willst, dann würd ich dir vorcshlagen, mach das ganz mit layern, welche du Zentral mit einem CSS File steuerst.

Grüße,Paul

Danke erstmal Paul...hab mich jetzt für CSS entschieden.
Da ich es aber noch kaum behersche hab ich mich mal an die Umsetzung gemacht:

#main {
width:700px;
height:512px;
margin:0px auto;
text-align:left;
padding:1px;
z-index:1;
background:#777;
}
#picturebox {
width:225px;
height:373px;
margin-bottom:1px;
margin-right:1px;
background:white;
z-index:2;
}
#navibox {
width:225px;
height:138px;
margin-right:1px;
background:white;
z-index:2;
}

Die ganze Seite wird von der main box eingeschlossen... Nun möchte ich gerne eine Box, neben der navibox und picturebox platzieren, bisher sind aber alle meine versuche fehlgeschlagen, da er ja verständlicherweise, die elemente untereinander platzieren will.
Hat jemand ne Idee wie ich das am besten lösen kann?
(mit position:absolute und den darauf folgenden Angaben geht das nich, da bei position:absolute opera die main box nicht mehr zentriert).

Ich hoffe ihr habt ungefähr mein Problem verstanden ;)

MFG

nilpferd

float:left sollte dein Freund sein. Da musst du einfach ein bißchen rumprobieren, wie es dann genau hinhaut. siehe selfHTML.

---
www.kuminatano.de

versuch mal, den z-index rauszulassen. dann werden deine div´s in reihenfolge des codes dargestellt. notwendig ist dann nur noch "float: left" in den css definitionen deiner inhaltsboxen.


#main {
width:700px;
height:512px;
margin: auto;
text-align:left;
padding:1px;
background:#777;
}
#picturebox {
float: left;
width:225px;
height:373px;
margin-bottom:1px;
margin-right:1px;
background:white;
}
#navibox {
float: left;
width:225px;
height:138px;
margin-right:1px;
background:white;
}

#drittebox {
float: left;
width:246px;
height:138px;
margin-right:1px;
background:white;
}

---