Zur Navigation

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]

09.08.2007 01:31 | geändert von Jörg: 09.08.2007 07:12

2 Jörg

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

09.08.2007 07:21 | geändert: 09.08.2007 07:23

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

25.12.2008 11:29

4 Amin (Gast)

Super! Danke Thomas!

28.04.2009 13:37

... 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!

10.06.2011 16:14

... 5 Monate später ...

6 Paul (Gast)

Hey, vielen Dank Thomas!

12.11.2011 21:22

... 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.

22.05.2012 13:01

8 Viola (Gast)

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

18.06.2012 22:34

... 8 Monate später ...

9 Idefix (Gast)

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

24.02.2013 15:18

Beitrag schreiben (als Gast)





[BBCode-Hilfe]