Jörg Kruses Webmaster-Forum > HTML und CSS

layout in dreamweaver zentrieren

1 jeannette

hallo ihr!

habe leider ein problem: hab in dreamweaver 8 eine HP mit hilfe von ebenen erstellt, die sich auch überlappen. nun möchte ich das gesamte layout aber gern immer zentriert haben.
hab mich schon im quellcode versucht mit ner übergeordneten ebene, weil ich hier im forum was gelesen hatte, aber leider funktionierte das nicht.

vielleicht könnt ihr mir helfen! das wäre toll!!!!

hier vielleicht noch der quellcode:

<!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" />
<META NAME="Keywords" CONTENT="alurehab,netti,netti III,svipp,mini,vital base,faltrampen,multifunktionsrollstuhl,lagerungsrollstuhl,pflegerollstuhl,kraftknoten,sonderbau,pörnbacher,rehintech,4u,ce,ced,transferhilfen">
<title>Alu_Rehab</title>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:224px;
	top:16px;
	width:786px;
	height:63px;
	z-index:1;
}
#apDiv2 {
	position:absolute;
	left:226px;
	top:96px;
	width:63px;
	height:740px;
	z-index:2;
}
#apDiv3 {
	position:absolute;
	left:499px;
	top:145px;
	width:248px;
	height:948px;
	z-index:3;
}
#apDiv4 {
	position:absolute;
	left:261px;
	top:85px;
	width:300;
	height:290;
	z-index:4;
}
-->
</style>

<style type="text/css">
<!--
#apDiv5 {
	position:absolute;
	left:80px;
	top:123px;
	width:191px;
	height:606px;
	z-index:5;
}
#apDiv6 {
	position:absolute;
	left:256px;
	top:476px;
	width:556px;
	height:192px;
	z-index:6;
	background-image: url(bilder/circle.jpg);
}
#apDiv7 {
	position:absolute;
	left:368px;
	top:842px;
	width:215px;
	height:21px;
	z-index:7;
}
#apDiv8 {
	position:absolute;
	left:315px;
	top:883px;
	width:164px;
	height:21px;
	z-index:8;
}
a:link {
	color: #666666;
	text-decoration: none;
}
a:visited {
	color: #666666;
	text-decoration: none;
}
a:hover {
	color: #333333;
	text-decoration: underline;
}
a:active {
	color: #333333;
	text-decoration: none;
}
#apDiv9 {
	position:absolute;
	left:299px;
	top:96px;
	width:710px;
	height:740px;
	z-index:-2;
	background-color: #FFFFFF;
}
#apDiv10 {
	position:absolute;
	left:430px;
	top:479px;
	width:551px;
	height:204px;
	z-index:-1;
}
#apDiv11 {
	position:absolute;
	left:490px;
	top:508px;
	width:179px;
	height:19px;
	z-index:9;
}
#apDiv12 {
	position:absolute;
	left:471px;
	top:100px;
	width:210px;
	height:46px;
	z-index:10;
}
#apDiv13 {
	position:absolute;
	left:803px;
	top:183px;
	width:149px;
	height:204px;
	z-index:11;
}
#apDiv14 {
	position:absolute;
	left:471px;
	top:159px;
	width:242px;
	height:32px;
	z-index:12;
}
#apDiv15 {
	position:absolute;
	left:472px;
	top:207px;
	width:242px;
	height:232px;
	z-index:13;
}
body {
	background-color: #DFECFF;
}
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#apDiv16 {
	position:absolute;
	left:283px;
	top:108px;
	width:708px;
	height:27px;
	z-index:3;
}
#apDiv17 {
	position:absolute;
	left:288px;
	top:113px;
	width:702px;
	height:26px;
	z-index:3;
}
#apDiv18 {
	position:absolute;
	left:259px;
	top:96px;
	width:140px;
	height:25px;
	z-index:3;
}
#apDiv19 {
	position:absolute;
	left:277px;
	top:96px;
	width:140px;
	height:26px;
	z-index:4;
}
#apDiv20 {
	position:absolute;
	left:539px;
	top:96px;
	width:118px;
	height:26px;
	z-index:5;
}
#apDiv21 {
	position:absolute;
	left:714px;
	top:96px;
	width:140px;
	height:26px;
	z-index:6;
}
#apDiv22 {
	position:absolute;
	width:140px;
	height:26px;
	z-index:1;
	left: 366px;
	top: 80px;
}
#apDiv23 {
	position:absolute;
	left:869px;
	top:98px;
	width:140px;
	height:26px;
	z-index:7;
}
#apDiv24 {
	position:absolute;
	left:425px;
	top:96px;
	width:114px;
	height:27px;
	z-index:6;
}
#apDiv25 {
	position:absolute;
	left:573px;
	top:95px;
	width:115px;
	height:27px;
	z-index:7;
}
#apDiv26 {
	position:absolute;
	left:867px;
	top:96px;
	width:116px;
	height:27px;
	z-index:8;
}
#apDiv27 {
	position:absolute;
	left:720px;
	top:96px;
	width:133px;
	height:26px;
	z-index:9;
}
#apDiv28 {
	position:absolute;
	left:299px;
	top:96px;
	width:118px;
	height:26px;
	z-index:6;
}
#apDiv29 {
	position:absolute;
	width:118px;
	height:24px;
	z-index:7;
	left: 419px;
	top: 96px;
}
#apDiv30 {
	position:absolute;
	left:779px;
	top:96px;
	width:118px;
	height:27px;
	z-index:8;
}
#apDiv31 {
	position:absolute;
	left:659px;
	top:96px;
	width:118px;
	height:26px;
	z-index:9;
}
.Stil7 {FONT-SIZE: x-small; }
#apDiv32 {
	position:absolute;
	left:303px;
	top:136px;
	width:529px;
	height:12px;
	z-index:10;
}
.Stil8 {	FONT-SIZE: x-small;
	color: #005E7B;
}
#apDiv43 {
	position:absolute;
	left:718px;
	top:816px;
	width:43px;
	height:15px;
	z-index:21;
}
.Stil9 {color: #005E7B}
#apDiv42 {
	position:absolute;
	left:631px;
	top:816px;
	width:68px;
	height:14px;
	z-index:20;
}
#apDiv44 {
	position:absolute;
	left:311px;
	top:791px;
	width:550px;
	height:17px;
	z-index:22;
}
#apDiv41 {
	position:absolute;
	left:547px;
	top:816px;
	width:65px;
	height:15px;
	z-index:19;
}
#apDiv33 {
	position:absolute;
	left:995px;
	top:103px;
	width:205px;
	height:81px;
	z-index:23;
}
#apDiv34 {
	position:absolute;
	left:899px;
	top:96px;
	width:110px;
	height:27px;
	z-index:10;
}
#Layer1 {
	position:absolute;
	width:793px;
	height:832px;
	z-index:11;
	left: 221px;
	top: 77px;
	background-color: #FFFFFF;
}
-->
</style>


<script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('bilder/button pr ro.jpg','bilder/button dl ro.jpg','bilder/button k ro.jpg','bilder/button händler ro.jpg','bilder/button kliniken ro.jpg','bilder/button mehr ro.jpg','bilder/button haendler ro.jpg')" aling="center">
<div id="apDiv1"><img src="bilder/alurehab.jpg" width="785" height="64" /></div>
<div id="apDiv2"><img src="bilder/bildlauflseiste.jpg" width="63" height="738" /></div>
<div id="apDiv9"><img src="bilder/index hintergrund.jpg" width="710" height="742" /></div>
<div id="apDiv20"><a href="kontakthauptseite.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','bilder/button k ro.jpg',1)"><img src="bilder/button k.jpg" alt="kontakt" name="Image6" width="118" height="26" border="0" id="Image6" /></a></div>
<div id="apDiv28"><a href="produkthauptseite.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('produkte','','bilder/button pr ro.jpg',1)"><img src="bilder/button pr.jpg" alt="Produkte" name="produkte" width="118" height="26" border="0" id="produkte" /></a></div>

<div id="apDiv29"><a href="downloadshauptseite.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','bilder/button dl ro.jpg',1)"><img src="bilder/button dl.jpg" alt="downloads" name="Image5" width="118" height="26" border="0" id="Image5" /></a></div>
<div id="apDiv30"><a href="klinikenhauptseite.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','bilder/button kliniken ro.jpg',1)"><img src="bilder/button kliniken.jpg" alt="Kliniken" name="Image8" width="118" height="26" border="0" id="Image8" /></a></div>
<div id="apDiv31"><a href="haendlerhauptseite.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','bilder/button haendler ro.jpg',1)"><img src="bilder/button haendler.jpg" name="Image10" width="118" height="26" border="0" id="Image10" /></a><a href="händlerhauptseite.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','bilder/button händler ro.jpg',1)"></a></div>

<div id="apDiv34"><a href="mehrhauptseite.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','bilder/button mehr ro.jpg',1)"><img src="bilder/button mehr.jpg" alt="Mehr" name="Image9" width="108" height="26" border="0" id="Image9" /></a></div>
</body>

</html>

[Edit Jörg: Code in Codeblöcke eingefügt]

2 Jörg Kruse

Hallo Jeanette,

das Problem ist, dass die einzelnen Layer mit position:absolute platziert werden. Dadurch werden diese an den Anzeigebereich des Browsers ausgerichtet und können nicht mehr zentriert werden. Auf dieser Seite habe ich die Problematik etwas detaillierter dargelegt und auch eine alternative Positonierung mit float beschrieben:

http://notizen.joergkrusesweb.de/n-2007-8/nebeneinander-zentrieren.html

3 Thomas (Gast)

Warum so? Es geht denke ich auch einfacher.

versucht mal den hier:

<!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>Untitled Document</title>

<style type="text/css">
<!--
#Top {
	position:absolute;
	left:111px;
	top:16px;
	width:448px;
	height:103px;
	z-index:1;
	background-color: #9999CC;
}
#navigation {
	position:absolute;
	left:110px;
	top:120px;
	width:95px;
	height:100px;
	z-index:2;
	background-color: #0066FF;
}
#content {
	position:absolute;
	left:207px;
	top:122px;
	width:351px;
	height:103px;
	z-index:3;
	background-color: #999999;
}
#hauptlayer {
	position:relative;
	top:34px;
	width:501px;
	height:278px;
	z-index:4;
	left: 30px;
	top: 71px;
}
-->
</style>
</head>

<body>
<div id="hauptlayer" style="width:694px; margin-left:auto; margin-right:auto">
<div id="Top"></div>
<div id="navigation"></div>
<div id="content"></div>
</div>

</body>
</html>

Ich stand vor kurzem auch vor diesem Problem, hab die Seite mit Layer aufgebaut und jeden Layer einen absoluten wert gegeben. Ich wollte die Seite Zentrieren und habe es einfach gemacht indem ich über allen anderen layern einen hauptlayer erstellt hab.
den hab ich dann so eingefügt dass er wirklich als hauptlayer steht
und im wert style -> margin-left:auto; & margin-right:auto;
bei width achtet darauf das ihr ja einen grösseren wert eingebt als die kleineren layer sind sonst habt ihr ein Problem

<div id="hauptlayer" style="width:1000px; margin-left:auto; margin-right:auto">
<div id="Top"></div>
<div id="navigation"></div>
<div id="content"></div>
</div>

und mit css hab ich dann den wert absolut relative

#hauptlayer {
	position:relative;
	top:34px;
	width:501px;
	height:278px;
	z-index:4;
	left: 30px;
	top: 71px;
}

Ich habe es mit diversen Browser getestet. Es funktioniert bei alle. Sollte jemand fragen zu dem Thema haben einfach anmailen!
aftereffect [ät] gmx [dot] at

glg Thomas

4 Amin (Gast)

Super! Danke Thomas!

... 2 Jahre und 1 Monat später ...

5 Timo (Gast)

es ist wohl nie zu spät danke zu sagen:
hab deinen tip gerade verwendet!
DANKE!

... 5 Monate später ...

6 Paul (Gast)

Hey, vielen Dank Thomas!

... 6 Monate später ...

7 Ole (Gast)

Auch an dieser Stelle noch einmal Danke! Dieser kleine Trick revolutioniert bei mir wirklich alles! Hätte nicht gedacht, dass es so einfach sein könnte.

8 Viola (Gast)

Ich bin sooo froh!!! Toll und ein dickes DANKE!!! Warum kompliziert, wenn es auch einfach geht!

... 8 Monate später ...

9 Idefix (Gast)

Vielen, vielen Dank!!! Was hab´ich noch einer solchen Lösung lange gesucht.

nach oben

Beitrag schreiben (als Gast)

Verwandte Themen
Thema	Autor	Forum	Beiträge	Letzter Beitrag
xampp zeigt nur Quelltext an	Bany	PHP und MySQL	6	22.11.2010 11:03
Hintergrund mit ebene zentrieren	KOHwalsky	HTML und CSS	15	21.03.2006 11:22

layout in dreamweaver zentrieren

Beitrag schreiben (als Gast)

Verwandte Themen