CSS: Div Layout

eriza

Hallo,

ich habe ein Problem mit meinem Page Layout. Ich benutze einen Table um die Seite zu zentrieren und positioniere im Inneren Div Layer. Allerdings funktioniert das nur bei der ersten Box, die zweite bezieht sich wieder von der Positionierung auf die Seite und nicht auf den Parent-DIV Tag.

Folgender HTML Code:

Code

<body style="margin:0px;">
<table border="1" width="100%" height="800" cellpadding="0" cellspacing="0" style="border:2px solid black;">
<tr>
<td></td>
<td width="26"></td>
<td width="400">


<div id="outer" style="position:absolute; border:3px solid #00FF00; width:350; height:500; top:0px">
OuterDiv


<div id="box1" style="position:absolute; left:50px; top:50px; border:3px solid #FF0000;">InnerDiv 1</div>
</div>


<div id="box2" style="position:absolute; left: 50px; top:50px; border:3px solid #0000FF;">InnerDiv 2</div>


</div>


</td>
<td width="25"></td>
<td></td>
</tr>
</table>
</body>

Alles anzeigen

So sieht der Output aus:
[Blockierte Grafik: http://www.rawclan.com/screen.png]

Ich benötige es aber so dass sich zb in diesem Fall die beiden DIV Layer decken, bzw. alle weiteren Layer die ich innerhalb des umschließenden DIV Tags positioniere von den Koordinaten des Parent Tags gerechnet ausgehen.

phpfan

Zähle mal alle <div> und </div>

Zitat

Ich benutze einen Table um die Seite zu zentrieren

Und warum nicht auch per div?

Also erstmal danke für die antwort.

Wenn ich es nicht mit tabelle mache, und den DIV zentriere funktioniert die Ausrichtung der innenliegenden DIVs nicht mehr. Dann werden die innenliegenden DIVs vom <body> Rand aus bemessen.

Code

<body style="margin:20px 0px; padding:0px; text-align:center;">
<div id="outer" style="width:400px; height : 380px; border : 1px solid black; margin : 0px auto; text-align : left;">
OuterDiv


    <div id="box1" style="position:absolute; left:50px; top:50px; border:3px solid #FF0000;">InnerDiv 1</div>

    <div id="box2" style="position:absolute; left:60px; top:60px; border:3px solid #0000FF;">InnerDiv 2</div>


</div>
</body>

Alles anzeigen

sejuma

Mach entweder Tabellen oder div's, besser div's.
Verzichte dabei auf absolute Positionierungen, sofern diese nicht ganz gezielt eingesetzt werden. Verwende besser float und margin.
Verwende einen Doctype.

Nach diesem Prinzip sollte es gehen:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">


	<html>




	<head>


	<title>
	Test
	</title>


	</head>




	


	
<body style="margin:0px; padding:0px;"> 
<div id="outer" style="width:400px; height : 380px; border: 1px solid black; margin : 0px auto;"> 
OuterDiv 


    <div id="box1" style="float:left; width:100px; border:3px solid #FF0000;">InnerDiv 1</div> 

    <div id="box2" style="float:left; width:288px; border:3px solid #0000FF;">InnerDiv 2</div> 


</div> 
</body> 


</html>

Alles anzeigen

mhm. ich bin aber auf absolute positionierung im inneren div angewiesen. bleibt mir also nur die tabelle als möglichkeit.

sejuma

Du kannst natürlich auch absolut positionieren. Das geht dann aber immer von der linken oberen Ecke des Fensters aus.
Relativ wäre zum nächst höheren Element.