DW - Seite zentrieren

**"Alt+C."** · 20.12.2008 00:15

Hi Leute!

Bin neu hier im Forum und ich bin echt am verzweifeln mit dem zentrieren in Dreamweaver. Es kann sein, dass es hier schon mehrere Themen gibt mit zentrieren, nur wurde mir nirgends auch in anderen Foren überhaupt nicht geholfen bzw. hab ich keine Lösung gefunden. Ich hoffe, ihr könnt mir bei meinem Problem helfen. Ich weiß einfach nicht weiter.

Und zwar folgendes Problem.

Derzeit mache ich für meinen Dad eine neue Firmenwebsite. Ich hab alles schon fast fertig. Funzen tut es auch einwandfrei. Bis auf...das die Seite bei kleineren Auflösungen unter 1680x1050 rechtsbündig eher ist. Bei 1680x1050 Auflösung is die Seite näher an der linken Seite dran. Als ich mit dem aufbauen der Seite begonnen habe, hatte ich eine Tabelle erstellt mit 2 Spalten. Dort wollte ich Bilder einfügen und darauf noch einmal Bilder bzw. Buttons mit Rollover Effekten. Jedoch ging das nicht. Da habe ich eine Ebene erstellt und dort das reingetan. Dann konnt ich die Buttons auch auf das Bild was darunter ist, drauf tun. Das Bild was darunter ist, ist ebenfalls in einer Ebene. In der 2. Spalte hab ich das genauso gemacht. Ich hab wirklich alles probiert, was ich nur gefunden habe, ich schaff es einfach nicht, dass bei jeder Auflösung meine Seite richtig zentriert ist im Browser. Die ist immer total verschoben. Entweder is sie näher an der linken Seite dran oder sie ist total rechtsbündig wo man nach rechts scrollen muss, damit man die Seite sehen kann.

Code ist hier:

HTML-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>...::: ALT &amp; BAIERL GBR :::...</title>
<style type="text/css">
<!--
body {
	background-color: #838BA0;
}
.Stil1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
}
#Layer1 {
	position:absolute;
	width:136px;
	height:0px;
	z-index:1;
	left: 328px;
	top: 331px;
}
#Layer2 {
	position:absolute;
	left:327px;
	top:331px;
	width:136px;
	height:14px;
	z-index:1;
}
#Layer3 {
	position:absolute;
	left:303px;
	top:129px;
	width:171px;
	height:588px;
	z-index:2;
}
#Layer4 {
	position:absolute;
	left:326px;
	top:328px;
	width:140px;
	height:37px;
	z-index:2;
}
#Layer5 {
	position:absolute;
	width:169px;
	height:115px;
	z-index:1;
	top: 132px;
	left: 326px;
}
#Layer6 {
	position:absolute;
	width:137px;
	height:24px;
	z-index:1;
	left: 22px;
	top: 200px;
}
#Layer7 {
	position:absolute;
	width:238px;
	height:138px;
	z-index:2;
	top: 132px;
	left: 500px;
}
#Layer8 {
	position:absolute;
	width:137px;
	height:23px;
	z-index:2;
	left: 22px;
	top: 239px;
}
#Layer9 {
	position:absolute;
	width:4px;
	height:0px;
	z-index:3;
	left: 348px;
	top: 410px;
}
#Layer10 {
	position:absolute;
	width:76px;
	height:22px;
	z-index:4;
	left: 348px;
	top: 449px;
}
#Layer11 {
	position:absolute;
	width:67px;
	height:18px;
	z-index:5;
	left: 348px;
	top: 488px;
}
#Layer12 {
	position:absolute;
	width:58px;
	height:22px;
	z-index:6;
	left: 348px;
	top: 527px;
}
#Layer13 {
	position:absolute;
	width:69px;
	height:17px;
	z-index:7;
	left: 348px;
	top: 566px;
}
#Layer14 {
	position:absolute;
	width:59px;
	height:17px;
	z-index:8;
	left: 348px;
	top: 605px;
}
#Layer15 {
	position:absolute;
	width:562px;
	height:551px;
	z-index:1;
	left: 19px;
	top: 18px;
}
.Stil3 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
#Layer16 {
	position:absolute;
	width:780px;
	height:32px;
	z-index:9;
	left: 324px;
}
#Layer17 {
	position:absolute;
	width:186px;
	height:119px;
	z-index:1;
	left: 136px;
	top: 310px;
}
#Layer18 {
	position:absolute;
	width:112px;
	height:91px;
	z-index:10;
	left: 404px;
	top: 45px;
}
#Layer19 {
	position:absolute;
	width:89px;
	height:83px;
	z-index:10;
	left: 404px;
	top: 157px;
}
-->
</style>
<script type="text/JavaScript">
<!--
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_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_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_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];}
}

function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
</head>

<body onload="MM_preloadImages('http://www.caserver.kilu.de/karosseriebauhover.png','http://www.caserver.kilu.de/klimaanlagenhover.png','http://www.caserver.kilu.de/cartuninghover.png','http://www.caserver.kilu.de/autoservicehover.png','http://www.caserver.kilu.de/cabrioumbauhover.png','http://www.caserver.kilu.de/oldtimerhover.png','http://www.caserver.kilu.de/autohandelhover.png','http://www.caserver.kilu.de/kontakthover.png')">
<div align="center">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div id="Layer9"><a href="http://www.caserver.kilu.de/cartuning.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','http://www.caserver.kilu.de/cartuninghover.png',1)"><img src="http://www.caserver.kilu.de/cartuning.png" name="Image5" width="136" height="31" border="0" id="Image5" /></a></div>
  <div id="Layer10"><a href="http://www.caserver.kilu.de/autoservice.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','http://www.caserver.kilu.de/autoservicehover.png',1)"><img src="http://www.caserver.kilu.de/autoservice.png" name="Image6" width="136" height="31" border="0" id="Image6" /></a></div>
  <div id="Layer11"><a href="http://www.caserver.kilu.de/cabrioumbau.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','http://www.caserver.kilu.de/cabrioumbauhover.png',1)"><img src="http://www.caserver.kilu.de/cabrioumbau.png" name="Image7" width="136" height="31" border="0" id="Image7" /></a></div>
  <div id="Layer12"><a href="http://www.caserver.kilu.de/oldtimer.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','http://www.caserver.kilu.de/oldtimerhover.png',1)"><img src="http://www.caserver.kilu.de/oldtimer.png" name="Image8" width="136" height="31" border="0" id="Image8" /></a></div>
  <div id="Layer13"><a href="http://www.caserver.kilu.de/autohandel.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','http://www.caserver.kilu.de/autohandelhover.png',1)"><img src="http://www.caserver.kilu.de/autohandel.png" name="Image9" width="136" height="31" border="0" id="Image9" /></a></div>
  <div id="Layer14"><a href="http://www.caserver.kilu.de/kontaktinfo.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','http://www.caserver.kilu.de/kontakthover.png',1)"><img src="http://www.caserver.kilu.de/kontakt.png" name="Image10" width="136" height="31" border="0" id="Image10" /></a></div>
  <table width="783" height="559" border="0">
    <!--DWLayoutTable-->
    <tr>
      <td width="183" height="589"><table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><div style="position:absolute; top:180px"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','navigation','',1)" onmouseover="MM_nbGroup('over','navigation','','',1)" onmouseout="MM_nbGroup('out')"></a>
                <div align="center"></div>
          </div></td>
        </tr>
      </table>        
        <div id="Layer5"><img src="http://www.caserver.kilu.de/navigation.jpg" alt="" width="170" height="587" />
          <div id="Layer8"><a href="http://www.caserver.kilu.de/klimaanlagen.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','http://www.caserver.kilu.de/klimaanlagenhover.png',1)"><img src="http://www.caserver.kilu.de/klimaanlagen.png" name="Image4" width="136" height="31" border="0" id="Image4" /></a></div>
          <div id="Layer6"><a href="http://www.caserver.kilu.de/karosseriebau.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','http://www.caserver.kilu.de/karosseriebauhover.png',1)"><img src="http://www.caserver.kilu.de/karosseriebau.png" name="Image2" width="136" height="31" border="0" id="Image2" /></a></div>
        </div>
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','http://www.caserver.kilu.de/karosseriebauhover.png',1)"></a></td>
      <td width="612"><div id="Layer7"><img src="http://www.caserver.kilu.de/rahmen.jpg" alt="" width="600" height="587" />
        <div class="Stil3" id="Layer15">
          <p align="center"><strong>...:::  Herzlich Willkommen in unserer virtuellen Werkstatt :::...   </strong></p>
          <table cellspacing="5" cellpadding="2" width="100%" border="0">
            <tbody>
              <tr>
                <td valign="top" align="left" width="332" rowspan="2"><p>Das   Unternehmen<strong> Alt &amp; Baierl GBR </strong>ist die kompetente<br />
                  Fachwerkstatt wenn es   um Ihr Auto geht.</p>
                    <p>Wir   als freie Werkstatt reparieren <strong>jeden</strong> <strong>Fahrzeugtyp</strong>.</p>
                  <p>Als   Karosseriefachbetrieb bieten wir eine hohe Qualit&auml;t mit<br />
                    einer <strong>zweij&auml;hrigen   Garantie</strong> auf Karosseriearbeiten und<br />
Lackierung.<br />
                  </p>
                  <div id="Layer18"><a href="http://www.caserver.kilu.de/pics/pic1big.jpg" target="_blank"><img src="http://www.caserver.kilu.de/picansicht/pic1.jpg" alt="" width="140" height="110" border="0" /></a></div>
                  <div id="Layer19"><a href="http://www.caserver.kilu.de/pics/pic1big.jpg" target="_blank"><img src="http://www.caserver.kilu.de/picansicht/pic2.jpg" alt="" width="140" height="110" border="0" /></a></div>
                  <p><br />
                    Wir beraten   fachm&auml;nnisch vor Ort und erstellen Ihnen<br />
                    einen   Kostenvoranschlag.<br />
                  </p>
                  </td>
              </tr>
            </tbody>
          </table>
          <div id="Layer17"><a href="http://home.mobile.de/UNICAR" target="_blank"><img src="http://www.caserver.kilu.de/autohandelpic.jpg" alt="" width="277" height="153" border="0" /></a></div>
        </div>
      </div></td>
    </tr>
  </table>
  <div id="Layer16">
    <p class="Stil1"><br />
      Damit die Grafiken der Website korrekt angezeigt werden<br />
    muss Internet Explorer 7 auf ihrem Computer installiert sein.</p>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</body>
</html>

So hier noch paar Pics wie's bei mir aussieht.

So siehts in Dreamweaver aus:

So siehts im Browser aus bei 1680x1050 (ich nutze Avant BRowser...der basiert auf Internet Explorer....auch mit IE und FF siehts genauso aus):

So bei 1152x864:

Und so bei 1024x768:

Wie ihr seht, umso kleiner die AUflösung, umso mehr geht die Seite rechts an die Seite.

Ich hoffe ihr könnt mir helfen. Ich wär euch so sehr dankbar! Ihr seid meine letzte Hoffnung, dass es doch noch klappt, denn ich weiß einfach nicht mehr weiter

.

Danke im Voraus!!!

Grüße,

"Alt+C." .

**Rinaldo** · 20.12.2008 01:04

Nicht, dass es nachher heißt, auch hier wurde Dir nicht geholfen

.

http://www.css4you.de/wslayout1/ex0009.html

Dein Problem liegt einfach nur an den absoluten Positionierungen - aber nimm das Beispiel als Grundlage und arbeite mit ihr weiter.

**"Alt+C."** · 20.12.2008 11:17

Hi!

Danke dir für die tolle Seite!

Sorry das ich frage aber, kannst du mir sagen, wo ich das einfügen soll von der Seite? Ich find einfach das Problem in meinem Code nicht und ich weiß selber auch nicht wo ich das so richtig einfügen soll. Ich bin in Sachen HTML eigentlich 'n ziemlicher Newbie...ich behandels grade in der Schule...mehr auch nicht. Is ja nicht nur HTML, sondern auch CSS glaube mit dabei. Das weiß ich erst Recht nicht. Könntest du mir vllt die Zeilen nennen wo ich was einfügen muss? Das wär echt super nett

.

Danke im Voraus!!

Greetz,

"Alt+C." .

**Rinaldo** · 20.12.2008 15:13

Da ist es nicht einfach mit dem Einfügen von ein paar Zeilen getan.

Deshalb mein Tipp, den Quelltext von oben zu übernehmen und für die Site Deines Vaters neu anzufangen.

**ChrisVonHier** · 20.12.2008 21:03

Hallo

Ich habe das bei mir so gelöst. Eine Ebene um alles drumherum und dann bei dem Layer 1

position:relative; <<<Nicht absolute, sondern relative...
margin: 0px auto;

zur Startseite vom TP

Thema: DW - Seite zentrieren

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

DW - Seite zentrieren

Ähnliche Themen

Seite zentrieren

Seite zentrieren

Seite zentrieren

Seite zentrieren

Seite Zentrieren

Aktive Benutzer

Aktive Benutzer