Hallo Leute, hab zwar die Suchfunktion benutzt und auch schon goggel gefragt, aber bisher noch nicht weitergekommen.
Zum Problem: hab in Photohop ein Template für eine Page erstellt, das ganze gesliced und abgespeichert. In dreamweaver importiert und Tabellen in divs,die nun alle den wert .position:absolute haben,umgewandelt. Jetz sind die ganzen divs richtig verschachtelt, allerdings links ausgerichtet. Um sie zu zentrieren hab ich sie alle mal in nen neuen div gepackt und den mit margin: auto versehen. Ergebniss: keine änderung.
Wie schaffe ich es nun das der gesamte Inhalt zentriert wird ohne die Anordnung der gesclicten Elemente zu zerstören.
hier die Codes dazu:
Zum Problem: hab in Photohop ein Template für eine Page erstellt, das ganze gesliced und abgespeichert. In dreamweaver importiert und Tabellen in divs,die nun alle den wert .position:absolute haben,umgewandelt. Jetz sind die ganzen divs richtig verschachtelt, allerdings links ausgerichtet. Um sie zu zentrieren hab ich sie alle mal in nen neuen div gepackt und den mit margin: auto versehen. Ergebniss: keine änderung.
Wie schaffe ich es nun das der gesamte Inhalt zentriert wird ohne die Anordnung der gesclicten Elemente zu zerstören.
hier die Codes dazu:
Code:
.div1 {
position: absolute;
left: 0px;
top: 0px;
width: 950px;
height: 1px;
z-index: 1;
background-image: url(Images/template/images/layout_01.png);
}
.div2 {
position: absolute;
left: 0px;
top: 1px;
width: 3px;
height: 163px;
z-index: 2;
background-image: url(Images/template/images/layout_02.png);
}
.div3 {
position: absolute;
left: 3px;
top: 1px;
width: 947px;
height: 163px;
z-index: 3;
background-image: url(Images/template/images/banner.png);
}
.div4 {
position: absolute;
left: 0px;
top: 164px;
width: 2px;
height: 596px;
z-index: 4;
vertical-align: middle;
background-image: url(Images/template/images/layout_04.png);
}
.div5 {
position: absolute;
left: 2px;
top: 164px;
width: 175px;
height: 566px;
z-index: 5;
background-image: url(Images/template/images/navi.png);
}
.div6 {
position: absolute;
left: 177px;
top: 164px;
width: 773px;
height: 566px;
z-index: 6;
background-image: url(Images/template/images/content.png);
}
.div7{
position: absolute;
left: 2px;
top: 730px;
width: 948px;
height: 29px;
z-index: 7;
background-image: url(Images/template/images/footer.png);
}
.div8{
position: absolute;
left: 2px;
top: 759px;
width: 948px;
height: 1px;
z-index: 8;
background-image: url(Images/template/images/layout_08.png);
}
.div9{
position: absolute;
left: 0px;
top: 0px;
width: 1px;
height: 761px;
z-index: 9
}
.inhalt {margin: auto }
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
background-color: #0c3a6d;
}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="inhalt"
<div class="div1"/>
</div>
<div class="div2"/>
</div>
<div class="div3"/>
</div>
<div class="div4"/>
</div>
<div class="div5"/>
</div>
<div class="div6"/>
</div>
<div class="div7"/>
</div>
<div class="div8"/>
</div>
<div class="div9"/>
</div>
/></div>
</body>
</html>