✔ gesamt layout in die mitte (bei Bildschirmauflösung)

Status
Nicht offen für weitere Antworten.
R

raze1

Grünschnabel
wie bekomme ich dieses layout in die mitte

ich hätte gerne das die layer bei verschiedenen Bildschirmauflösungen immer in der mitte sind

Habe die seite mit Dreamweaver erstellt.
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1" />
<meta content="MSHTML 5.50.4522.1800" name="GENERATOR" />
<style type="text/css">
                                    <!--
                                    @import url(pichler/styles.css);
                                    -->
</style>

<style type="text/css">
 div.c76 {position:absolute; left:94px; top:313px; width:191px; height:26px; z-index:26}
 div.c75 {position:absolute; left:94px; top:240px; width:191px; height:26px; z-index:26}
 div.c74 {position:absolute; left:94px; top:277px; width:191px; height:26px; z-index:26}
 div.c73 {position:absolute; left:94px; top:206px; width:191px; height:25px; z-index:24;}
 div.c72 {position: absolute; left: 690px; top: 393px; width: 237px; height: 19px; z-index: 7; background-image:  url(pichler/images/navi2.jpg); layer-background-image:  url(pichler/images/navi2.jpg); border: 1px none #000000;}
 div.c71 {position: absolute; left: 690px; top: 421px; width: 238px; height: 253px; z-index: 8; vertical-align: middle}
 div.c70 {position: absolute; left: 294px; top: 399px; width: 387px; height: 365px; z-index: 6; vertical-align: middle}
 div.c69 {position: absolute; left: 706px; top: 170px; width: 179px; height: 200px; z-index: 4; vertical-align: middle}
 div.c68 {position: absolute; left: 88px; top: 111px; width: 195px; height: 65px; z-index: 15}
 div.c67 {position: absolute; left: 294px; top: 160px; width: 387px; height: 201px; z-index: 3;}
 div.c66 {position:absolute; left:699px; top:114px; width:113px; height:31px; z-index:42}
 div.c65 {position:absolute; left:294px; top:374px; width:387px; height:19px; z-index:43; background-image:  url(pichler/images/navi2.jpg); layer-background-image:  url(pichler/images/navi2.jpg); border: 1px none #000000;}
 div.c64 {position:absolute; left:824px; top:114px; width:113px; height:31px; z-index:42}
 div.c63 {position:absolute; left:594px; top:114px; width:93px; height:31px; z-index:40}
 div.c62 {position:absolute; left:442px; top:114px; width:141px; height:31px; z-index:39}
 div.c61 {position:absolute; left:294px; top:114px; width:138px; height:31px; z-index:38}
 div.c60 {position:absolute; left:324px; top:808px; width:396px; height:14px; z-index:32}
 div.c59 {position:absolute; left:84px; top:785px; width:856px; height:24px; z-index:31; background-image:  url(pichler/images/navi2.jpg); layer-background-image:  url(pichler/images/navi2.jpg); border: 1px none #000000;}
 div.c58 {position:absolute; left:84px; top:0px; width:857px; height:104px; z-index:1; background-image:  url(pichler/screen_andi_betatest.jpg); layer-background-image:  url(pichler/screen_andi_betatest.jpg); border: 1px none #000000;}
</style>
</head>

<body>
<div style="width:860px;margin:0px auto;">



<div id="Layer1" class="c58"></div>

<div id="Layer9" class="c61"></div>

<div id="Layer12" class="c62"></div>

<div id="Layer14" class="c63"></div>

<div id="Layer18" class="c64"></div>

<div id="Layer5" class="c65">Unser Leistungsangebot</div>

<div id="Layer18" class="c66"></div>

<div id="Layer11" style=
"position:absolute; left:73px; top:0px; width:10px; height:803px; z-index:44; background-image:  url(pichler/images/line_left.jpg); layer-background-image:  url(pichler/images/line_left.jpg); border: 1px none #000000;">
</div>

<div id="Layer13" style=
"position:absolute; left:941px; top:0px; width:9px; height:803px; z-index:45; background-image:  url(pichler/images/line_right.jpg); layer-background-image:  url(pichler/images/line_right.jpg); border: 1px none #000000;">
</div>

<div id="Layer2" style=
"position:absolute; left:85px; top:780px; width:855px; height:23px; z-index:46; background-image:  url(pichler/images/navi2.jpg); layer-background-image:  url(pichler/images/navi2.jpg); border: 1px none #000000;">
Websites Optimiert f&uuml;r 1024x768</div>

<div id="Layer16" style=
"position:absolute; left:92px; top:416px; width:190px; height:129px; z-index:47;"
 class="text1"><br />
</div>

<div id="Layer17" style=
"position:absolute; left:327px; top:810px; width:448px; height:19px; z-index:48"
 class="copyrighte"></div>

<div id="Layer19" style=
"position:absolute; left:92px; top:393px; width:190px; height:19px; z-index:49; background-image:  url(pichler/images/navi2.jpg); layer-background-image:  url(pichler/images/navi2.jpg); border: 1px none #000000;">
Anschrift</div>

<div id="content">
<div id="Layer3" class="c67">
    <p class="text1">&nbsp;</p>

</div>  <div id="Layer15" class="c68">logo</div>
  <div id="Layer4" class="c69"></div>

<div id="Layer6" class="c70">
    <p class="text1">&nbsp;</p>
</div>

<div id="Layer8" class="c71">
    <p class="text1">&nbsp;</p>
</div>

<div id="Layer7" class="c72">Einsatzgebiete</div>

<div id="Layer10" class="c73"><a href="#">Firmenprofil</a></div>

<div id="Layer12" class="c74"><a href="#">Kontakt</a></div>

<div id="Layer12" class="c75"><a href="#">Referenzen</a></div>

<div id="Layer12" class="c76"><a href="#">Impressum</a></div>
</div>

</body>
</html>

Danke
 
In deinem CSS-Modell werden die absolut positionierten DIVs nicht im Parent-DIV { width:860px; margin: 0 auto; } angezeigt, sondern richten sich am body- Element aus.

Wenn du die DIVs aber relativ positionierst und für das äussere DIV folgende CSS-Eigenschaften bestimmst, werden sie innerhalb des zentrierten DIVs angezeigt:

Code: 
div#center
{
position: absolute;
top: 0;
left: 50%;
margin-left: -430px; /* neg. Hälfte von width:860px = horizontal zentriertes DIV */
width: 860px;
border: 1px solid #000000;
}

[ editpost ] Dein Source-Code mit relativ positionierten DIVs:

HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1" />
<meta content="MSHTML 5.50.4522.1800" name="GENERATOR" />
<style type="text/css">
<!--
@import url(pichler/styles.css);
-->
</style>

<style type="text/css">
div#center
{
position: absolute;
top: 0;
left: 50%;
margin-left: -430px; /* neg. Hälfte von width:860px = horizontal zentriertes DIV */
width: 860px;
border: 1px solid #000000;
}

div.c76 {position:relative; left:94px; top:313px; width:191px; height:26px; z-index:26}
div.c75 {position:relative; left:94px; top:240px; width:191px; height:26px; z-index:26}
div.c74 {position:relative; left:94px; top:277px; width:191px; height:26px; z-index:26}
div.c73 {position:relative; left:94px; top:206px; width:191px; height:25px; z-index:24;}
div.c72 {position: relative; left: 690px; top: 393px; width: 237px; height: 19px; z-index: 7; background-image: url(pichler/images/navi2.jpg); layer-background-image: url(pichler/images/navi2.jpg); border: 1px none #000000;}
div.c71 {position: relative; left: 690px; top: 421px; width: 238px; height: 253px; z-index: 8; vertical-align: middle}
div.c70 {position: relative; left: 294px; top: 399px; width: 387px; height: 365px; z-index: 6; vertical-align: middle}
div.c69 {position: relative; left: 706px; top: 170px; width: 179px; height: 200px; z-index: 4; vertical-align: middle}
div.c68 {position: relative; left: 88px; top: 111px; width: 195px; height: 65px; z-index: 15}
div.c67 {position: relative; left: 294px; top: 160px; width: 387px; height: 201px; z-index: 3;}
div.c66 {position:relative; left:699px; top:114px; width:113px; height:31px; z-index:42}
div.c65 {position:relative; left:294px; top:374px; width:387px; height:19px; z-index:43; background-image: url(pichler/images/navi2.jpg); layer-background-image: url(pichler/images/navi2.jpg); border: 1px none #000000;}
div.c64 {position:relative; left:824px; top:114px; width:113px; height:31px; z-index:42}
div.c63 {position:relative; left:594px; top:114px; width:93px; height:31px; z-index:40}
div.c62 {position:relative; left:442px; top:114px; width:141px; height:31px; z-index:39}
div.c61 {position:relative; left:294px; top:114px; width:138px; height:31px; z-index:38}
div.c60 {position:relative; left:324px; top:808px; width:396px; height:14px; z-index:32}
div.c59 {position:relative; left:84px; top:785px; width:856px; height:24px; z-index:31; background-image: url(pichler/images/navi2.jpg); layer-background-image: url(pichler/images/navi2.jpg); border: 1px none #000000;}
div.c58 {position:relative; left:84px; top:0px; width:857px; height:104px; z-index:1; background-image: url(pichler/screen_andi_betatest.jpg); layer-background-image: url(pichler/screen_andi_betatest.jpg); border: 1px none #000000;}
</style>
</head>

<body>
<div id="center">

<div id="Layer1" class="c58"></div>

<div id="Layer9" class="c61"></div>

<div id="Layer12" class="c62"></div>

<div id="Layer14" class="c63"></div>

<div id="Layer18" class="c64"></div>

<div id="Layer5" class="c65">Unser Leistungsangebot</div>

<div id="Layer18" class="c66"></div>

<div id="Layer11" style=
"position:relative; left:73px; top:0px; width:10px; height:803px; z-index:44; background-image: url(pichler/images/line_left.jpg); layer-background-image: url(pichler/images/line_left.jpg); border: 1px none #000000;">
</div>

<div id="Layer13" style=
"position:relative; left:941px; top:0px; width:9px; height:803px; z-index:45; background-image: url(pichler/images/line_right.jpg); layer-background-image: url(pichler/images/line_right.jpg); border: 1px none #000000;">
</div>

<div id="Layer2" style=
"position:relative; left:85px; top:780px; width:855px; height:23px; z-index:46; background-image: url(pichler/images/navi2.jpg); layer-background-image: url(pichler/images/navi2.jpg); border: 1px none #000000;">
Websites Optimiert f&uuml;r 1024x768</div>

<div id="Layer16" style=
"position:relative; left:92px; top:416px; width:190px; height:129px; z-index:47;"
class="text1"><br />
</div>

<div id="Layer17" style=
"position:relative; left:327px; top:810px; width:448px; height:19px; z-index:48"
class="copyrighte"></div>

<div id="Layer19" style=
"position:relative; left:92px; top:393px; width:190px; height:19px; z-index:49; background-image: url(pichler/images/navi2.jpg); layer-background-image: url(pichler/images/navi2.jpg); border: 1px none #000000;">
Anschrift</div>

<div id="content">
<div id="Layer3" class="c67">
<p class="text1">&nbsp;</p>
</div> 

<div id="Layer15" class="c68">logo</div>

<div id="Layer4" class="c69"></div>

<div id="Layer6" class="c70">
<p class="text1">&nbsp;</p>
</div>

<div id="Layer8" class="c71">
<p class="text1">&nbsp;</p>
</div>

<div id="Layer7" class="c72">Einsatzgebiete</div>

<div id="Layer10" class="c73"><a href="#">Firmenprofil</a></div>

<div id="Layer12" class="c74"><a href="#">Kontakt</a></div>

<div id="Layer20" class="c75"><a href="#">Referenzen</a></div>

<div id="Layer21" class="c76"><a href="#">Impressum</a></div>
</div><!-- end div#content -->

</div><!-- end div#center -->

</body>
</html>
Da ich in deinem Source-Code ein logisches / chronologisches CSS - / HTML - Markup vermisse, und der Positionierungs-Logik für die vielen, z.T. überflüssigen, DIVs nicht folgen kann, wirst du die Werte left und top für die relativen Positionen der DIVs selber ermitteln ( ausrechnen) müssen, denn die jetzigen stimmen nicht mehr .... :-)

Im HTML-Forum fiel letztens der Begriff Divitis ;-]
 
Danke ! dachte es gibt irgend einen Trick womit es schneller gehen könnte.-
Werde mich doch beim nächsten Projekt mit dem Thema mehr beschäftigen müssen....
 
Grundsätzlich gilt:
Eine ID darf in einem Dokument / einer Seite nur einmal verwendet werden.
Du hast die ID #Layer12 aber 3-fach genutzt (Kontakt, Referenzen, Impressum). Aus diesem Grund habe ich meinen zuletzt geposteten Source-Code korrigiert und die letzten beiden DIVs in #Layer20 und #Layer21 umbenannt -> deine Layer-Nummerierung endete nämlich bei #Layer19 ;-]
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück