Anfänge mit div statt Tabellen

Deejoy · 21. Mai 2005

Hi,
ich mach gerade so meine ersten gehversuche mit div und css möchte also ein Layout von Tabellen umsetzen.

Jetzt habe ich mal folgende Quelltext angefangen

Code:

<div id="body" style="position: relative; width:775px; margin:0px auto; text-align:center; padding:0px; background-color:#FFFFFF; border:1px solid #000000; top:25px;">

<div id="header1" style="position:absolute; width: 775px; height:107px; background-image: url(img/header_ganz.jpg); background-repeat:no-repeat;left: 0px; top: 0px; "></div>
<div id="nav11" style="position:absolute; width:775px;left:0px; top:107px; height:33px ">
<div id="navi_011" style="position:absolute;width: 244px; height:33px; left:0px; background-image: url(img/header_r3_c1.jpg); background-repeat:no-repeat;"></div>
</div>
<div id="main" style="position:absolute; width:775px; height:10px; left:0px; top:140px; background-color:#FFFFFF"><span>Test Text</span></div>

</div>

Ich möchte das ganze immer zentriert haben und das kalppt soweit auch jedoch soll der div body einen dünen schwarzen Rahmen um das ganze machen. Tut er aber leider nicht.
Auch paßt er sich nicht automatisch in der höhe an.

Kann mir jemand mal ein paar gute Tips geben

Gruß
Deejoy

ans meer · 28. Mai 2005

Hallo Deejoy,

ich fange zwar auch erst mit CSS-Layouts an, aber ich könnte mir vorstellen, dass es an der absoluten Positionierung liegt. Ich hab jetzt mal ein bisschen rumgespielt und ich denke, dass du es so willst, wie es jetzt ist. Ich hab noch ein paar unnötige Dinge rausgenommen, kann das hier aber leider nur mit dem Opera ansehen. Hoffe, es taugt dir trotzdem.
Die Hintergrundfarben habe ich mal zur besseren Übersicht reingemacht, damit man sieht, über welchen Raum sich ein Div erstreckt, aber die kann man ja wieder rausnehmen. Et voilà, der Code:

HTML:

<html>
<head><title>Test</title>

<style type="text/css">
<!--
#body {
width:775px;
margin:auto;
text-align:center;
padding:0;
background-color:#FFF;
border:1px solid #000;
margin-top: 25px;
}

#header1 {
background-color: #00f;
height:107px;
background-image: url(img/header_ganz.jpg);
background-repeat:no-repeat;
}

#nav11 {
background-color: #f00;
height:33px 
}

#navi_011 {
background-color: #f0f;
width: 244px;
height:33px;
background-image: url(img/header_r3_c1.jpg);
background-repeat:no-repeat;
}

#main {
height:10px;
background-color:#0f0;
}
//-->
</style>

</head>


<body>

<div id="body">

<div id="header1"></div>
<div id="nav11">
<div id="navi_011"></div>
</div>

<div id="main"><span>Test Text</span></div>
</div>

</body>
</html>

Anfänge mit div statt Tabellen

Deejoy

ans meer

Neue Beiträge