Zentrieren von Ebenen @ tutorials.de: Tutorials, Forum & Hilfe

Zeitgenosse · 14.08.07 23:38

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>

Maik · 15.08.07 06:10

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>
      [b]<div id="wrapper">[/b]
                <!-- Hier folgt der Bestand -->
      [b]</div>[/b]
</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.

Zeitgenosse · 15.08.07 09:43

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?

Maik · 15.08.07 11:29

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.

Zeitgenosse · 15.08.07 20:10

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.

Maik · 15.08.07 20:23

Zitat von Zeitgenosse

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.

Klingt logisch, wenn man das Seitenkonzept en detail kennt.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Ebenen zentrieren bei unterschiedlichen Auflösungen

Ebenen zentrieren

Ebenen zentrieren

Ebenen zentrieren

Ebenen/Animation...zentrieren

E-Mail:

Abonnieren Abbestellen