✔ Zentrieren von Ebenen

Status
Nicht offen für weitere Antworten.
Z

Zeitgenosse

Grünschnabel
Hallo, ich brauche Eure Hilfe,

bastle gerade an meiner ersten Website (Dreamweaver/Entwurfebene). Habe also mit Codierung noch nicht so viel zu tun gehabt.
Und zwar möchte ich, dass die Site in allen Browsern mittig positioniert wird. Ich habe verschiedene Sachen ausprobiert, bin aber nicht weitergekommen.

Den Code habe ich mal reinkopiert, vielleicht kann mir jemand helfen.

Herzlich, Sven

Code: 
<!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=ISO-8859-1" />
<title>Praxis_Site</title>
<style type="text/css">
<!--
#logo {
	position:absolute;
	left:40px;
	top:73px;
	width:150px;
	height:140px;
	z-index:3;
	background-image: url(Bilder/Logo.jpg);
	visibility: visible;
}
#Layer1 {
	position:absolute;
	left:221px;
	top:20px;
	width:50px;
	height:186px;
	z-index:2;
}
#balken {
	position:absolute;
	left:305px;
	top:184px;
	width:555px;
	height:2px;
	z-index:5;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FACE5E;
	border-right-color: #FACE5E;
	border-bottom-color: #FACE5E;
	border-left-color: #FACE5E;
	visibility: visible;
}
#text {
	position:absolute;
	left:305px;
	top:240px;
	width:299px;
	height:430px;
	z-index:4;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	visibility: visible;
	background-color: #FACE5E;
}
#Praxisbezeichnung {
	position:absolute;
	left:312px;
	top:93px;
	width:548px;
	height:60px;
	z-index:6;
	visibility: visible;
}
#spruch {
	position:absolute;
	left:50px;
	top:274px;
	width:245px;
	height:250px;
	z-index:7;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	visibility: visible;
}
#foto {
	position:absolute;
	left:627px;
	top:240px;
	width:223px;
	height:342px;
	z-index:8;
	background-image: url(Bilder/Test_foto.jpg);
	visibility: visible;
}
body {
	background-image: url();
}
.Stil4 {font-size: 11px}
.Stil5 {font-family: Verdana, Arial, Helvetica, sans-serif}
.Stil6 {font-style: italic; font-family: Verdana, Arial, Helvetica, sans-serif;}
#Name {
	position:absolute;
	left:40px;
	top:40px;
	width:820px;
	height:30px;
	z-index:9;
	visibility: visible;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #FACE5E;
	border-right-color: #FACE5E;
	border-bottom-color: #FACE5E;
	border-left-color: #FACE5E;
}
#Berufsbezeichnung {
	position:absolute;
	left:40px;
	top:70px;
	width:270px;
	height:21px;
	z-index:10;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	visibility: visible;
}
#Layer2 {
	position:absolute;
	left:445px;
	top:27px;
	width:258px;
	height:34px;
	z-index:9;
}
.Stil11 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #FACE5E;
}
#Layer3 {
	position:absolute;
	left:747px;
	top:54px;
	width:126px;
	height:22px;
	z-index:10;
}
.Stil12 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FACE5E;
}
#Logo_Rahmen {
	position:absolute;
	left:40px;
	top:20px;
	width:158px;
	height:145px;
	z-index:11;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #FACE5E;
	border-right-color: #FACE5E;
	border-bottom-color: #FACE5E;
	border-left-color: #FACE5E;
	visibility: hidden;
}
.Stil13 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #999999; }
#Steuerungsrahmen {
	position:absolute;
	left:305px;
	top:184px;
	width:555px;
	height:29px;
	z-index:12;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FACE5E;
	border-right-color: #FACE5E;
	border-bottom-color: #FACE5E;
	border-left-color: #FACE5E;
	visibility: visible;
}
#Steuerungsleiste {
	position:absolute;
	left:308px;
	top:187px;
	width:552px;
	height:24px;
	z-index:13;
	background-color: #FACE5E;
	visibility: visible;
}
#Steuerungselement_1 {
	position:absolute;
	left:315px;
	top:192px;
	width:135px;
	height:16px;
	z-index:14;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	visibility: visible;
}
#Steuerungselement_2 {
	position:absolute;
	left:460px;
	top:192px;
	width:49px;
	height:16px;
	z-index:15;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	visibility: visible;
}
#Steuerungselement_3 {
	position:absolute;
	left:519px;
	top:192px;
	width:133px;
	height:16px;
	z-index:16;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	visibility: visible;
}
#Steuerungselement_4 {
	position:absolute;
	left:810px;
	top:192px;
	width:49px;
	height:16px;
	z-index:17;
	visibility: visible;
}
#Rahmen_Site {
	position:absolute;
	left:20px;
	top:20px;
	width:850px;
	height:680px;
	z-index:2;
	border: thin solid #FACE5E;
	visibility: hidden;
}
.Stil16 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #999999; }
#Verbindungslinie_rechts {
	position:absolute;
	left:858px;
	top:70px;
	width:2px;
	height:115px;
	z-index:18;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FACE5E;
	border-right-color: #FACE5E;
	border-bottom-color: #FACE5E;
	border-left-color: #FACE5E;
	visibility: visible;
}
#Seitenlinie_links {
	position:absolute;
	left:40px;
	top:216px;
	width:2px;
	height:485px;
	z-index:19;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #FACE5E;
	border-right-color: #FACE5E;
	border-bottom-color: #FACE5E;
	border-left-color: #FACE5E;
	visibility: visible;
}
#Seitenlinie_unten {
	position:absolute;
	left:40px;
	top:699px;
	width:820px;
	height:2px;
	z-index:20;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #FACE5E;
	border-right-color: #FACE5E;
	border-bottom-color: #FACE5E;
	border-left-color: #FACE5E;
	visibility: visible;
}
#Seitenlinie_rechts {
	position:absolute;
	left:858px;
	top:213px;
	width:2px;
	height:489px;
	z-index:21;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FACE5E;
	border-right-color: #FACE5E;
	border-bottom-color: #FACE5E;
	border-left-color: #FACE5E;
	visibility: visible;
}
#Balken_unten {
	position:absolute;
	left:40px;
	top:704px;
	width:820px;
	height:24px;
	z-index:22;
	background-color: #FACE5E;
	visibility: visible;
}
#Abstandhalter_unten {
	position:absolute;
	left:40px;
	top:728px;
	width:820px;
	height:40px;
	z-index:23;
	visibility: visible;
}
.Stil18 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; }
-->
</style>
</head>

<body>
<div id="logo"></div>
<div id="balken"></div>
<div id="text"></div>
<div id="Praxisbezeichnung">
  <p align="center" class="Stil16">Praxis f&uuml;r </p>
  <p align="center" class="Stil13">Akupunkt-Meridian-Massage und Craniosacrale Osteopathie </p>
</div>
<div class="Stil4" id="spruch">
  <p><em><span class="Stil5">Es ist wichtig, da&szlig; du etwas willst</span></em></p>
  <p>&nbsp;</p>
  <p><em><span class="Stil5">In der Tiefe deines Wesens, </span></em></p>
  <p>&nbsp;</p>
  <p><span class="Stil6">Da&szlig; du etwas von ganzem Herzen glaubst, </span></p>
  <p>&nbsp;</p>
  <p><span class="Stil6">Da&szlig; du w&auml;hlst, wie du leben willst.  </span></p>
  <p>&nbsp;</p>
  <p align="right"><span class="Stil5">Ulrich Schaffer </span></p>
</div>
<div id="foto"></div>
<div id="Name"><span class="Stil11">Carola Schmidt </span></div>
<div id="Berufsbezeichnung">
  <p align="right" class="Stil12">Physiotherapeutin</p>
</div>
<div id="Steuerungsrahmen"></div>
<div id="Steuerungsleiste"></div>
<div id="Steuerungselement_1"> 
  <div align="left"><span class="Stil18">Therapiespektrum</span></div>
</div>
<div id="Steuerungselement_2">
  <div align="left"><span class="Stil18">Praxis</span></div>
</div>
<div id="Steuerungselement_3"><span class="Stil18">Kontakt &amp; Termin</span></div>
<div id="Steuerungselement_4">
  <div align="center"><span class="Stil18">Vitae</span></div>
</div>
<div id="Verbindungslinie_rechts"></div>
<div id="Seitenlinie_links"></div>
<div id="Seitenlinie_unten"></div>
<div id="Seitenlinie_rechts"></div>
<div id="Balken_unten"></div>
<div id="Abstandhalter_unten"></div>
</body>
</html>
 
Hi,

erweiter das Stylesheet folgendermaßen:

Code: 
#wrapper {
       position:absolute;
       left:50%;
       top:20px;
       width:820px;
       margin-left:-410px; /* negative Hälfte von width:820px */
}
und binde das bestehende Layout in das DIV #wrapper ein:

Code: 
<body>
      <div id="wrapper">
                <!-- Hier folgt der Bestand -->
      </div>
</body>
Anmerkung: Über die Suchfunktion hättest du hier im CSS-Board unzählige Threads entdeckt, die sich schon mal genau mit dieser Frage beschäftigt haben.
 
Hallo,

danke für die schnelle Antwort. Ich habe den Code integriert. Das Problem ist aber, dass die Site jetzt zu rechtslastig positioniert ist. Ich benutze übrigens als Vorschaubrowser Safari und Firefox. Kann man da noch etwas ändern?
 
Ausgehend von dem DIV #Abstandhalter_unten (820px breit, Startposition von links 40px) müsste die Box insgesamt 860px breit sein, und der margin-left-Wert entsprechend "-430px" betragen.

Ansonsten müssen die Positionsangaben korrigiert werden, damit die Elemente am linken Elementrand bei null, und nicht bei 40px beginnen.
 
Hallo,

ich denke, ich weiß an was es lag. Die Breite des Abstandshalters_unten ist 820px. Da ich von vorherein einen Abstand links von 40px eingerichtet habe, muss ich diesen rechts jetzt dazu nehmen. D.h. 820px+ 2*40px= 900px (width).Die negative Breite beträgt somit 450px.
Und siehe da, meine Site ist zentriert.
Ich danke für den Code.

Herzlich, Sven.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück