kablam: Website mittig zentrieren

Hallo
Ich brauche dringend die Unterstützung von spezialisten, ich Versuche nun seit 2Wochen meinen Traum der eigenen Webpage zu verwirklichen, als Grundlage habe ich den Dreanweaver8
Nach stundenlangem lesen von Posts auf Foren hoffe ich nun Hilfe zu bekommen.
Ich möchte meine Website mittig im Bild zentrieren und wenn möglich mit flexibler Grösse (Anpasung an Fenstergrösse Besucher) einrichten.
Habe da schon Manuel gewisse Codes eingegeben, leider funktionieren sie jedoch nicht.
Momentan wird mein Seitengerüst ohne Links Oben positioniert. Habe schon etliches über Container gelesen jedoch kann ich Sie nicht erstellen.
Meine Seite ist mittels Ebenen aufgebaut.

  
  

<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Unbenanntes Dokument</title>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
 background-color: #7C8D87;
}
#mittig {
 margin-left:-512px;
 margin-top:-384px;
 position:absolute;
 left:50%;
 top:50%;
 width:1024px;
 height:768px;
 z-index:1;
}
#head {
 position:absolute;
 left:0px;
 top:0px;
 width:1024px;
 height:224px;
 z-index:2;
}
#nav {
 position:absolute;
 left:0px;
 top:225px;
 width:203px;
 height:542px;
 z-index:2;
}
#main {
 position:absolute;
 left:204px;
 top:225px;
 width:820px;
 height:526px;
 z-index:1;
}
#feet {
 position:absolute;
 left:204px;
 top:751px;
 width:820px;
 height:17px;
 z-index:2;
}
#editablesection {
 position:absolute;
 left:5px;
 top:5px;
 width:790px;
 height:510px;
 z-index:1;
}
#contactlocation {
 position:absolute;
 left:133px;
 top:185px;
 width:60px;
 height:76px;
 z-index:3;
}
#home {
 position:absolute;
 left:4px;
 top:5px;
 width:190px;
 height:37px;
 z-index:3;
}
#Layer1 {
 position:absolute;
 left:8px;
 top:5px;
 width:190px;
 height:37px;
 z-index:4;
}
#Layer2 {
 position:absolute;
 left:14px;
 top:17px;
 width:161px;
 height:46px;
 z-index:4;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

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];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('../img/60x76locationcontactaktiv.jpg','../img/190x37homeactiv.png')">
<div id="mittg">
  <div id="head"><img src="../img/1024x225_heacsection.jpg" width="1024" height="225" alt="head-section" /></div>
  <div id="nav">
    <div id="contactlocation"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('conatct','','../img/60x76locationcontactaktiv.jpg',1)"><img src="../img/60x76locationcontact.jpg" alt="contact/location" name="conatct" width="60" height="76" border="0" id="conatct" /></a></div>
    <div id="home"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','../img/190x37homeactiv.png',1)"><img src="../img/190x37homeinactiv.png" alt="Aeroplaneworks-home" name="home" width="190" height="37" border="0" id="home" /></a></div>
    <img src="../img/204x543_Navsection_left.jpg" width="204" height="543" alt="nav-section" /></div>
  <div id="main">
    <div id="editablesection"></div>
  <img src="../img/820x526_mainsection_transparenty.png" width="820" height="526" alt="main-section" /></div>
  <div id="feet"><img src="../img/820x17_feetsection_transparent.png" width="820" height="17" alt="feetsection" /></div>
</div>
</body>
</html>

Ich freue mich über Eure Hilfe

  1. Liebe(r) kablam,

    ich Versuche nun seit 2Wochen meinen Traum der eigenen Webpage zu verwirklichen

    OK...

    als Grundlage habe ich den Dreanweaver8

    absolut _nicht_ OK.

    Merke, auch wenn der Dreamweaver "Träume" verspricht, so webt er doch ein rechtes Kuddelmuddel, wie prompt Dein von Dir geposteter Code eindrücklich beweist. Dreamweaver ist ein Werkzeug für Profis, die wissen, wie sie es sinnvoll einsetzen - und interessanterweise setzen gerade die Profis den Dreamweaver eben _nicht_ ein (es sei denn, es muss "mal eben schnell" gehen).

    Soviel zu "professionell" in puncto Webseitenerstellung und Dreamweaver.

    Mein Rat an Dich: Erläutere, was Du von HTML und CSS verstehst. Basierend auf Deinem Wissen kann man Dir dann raten, wie Du sinnvoller vorgehen kannst.

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Lieber Felix

      Zu deiner Frage, wie geagt ich bin erst dran mich in die Materie einzuarbeiten, ich bin eher der Grafische-Typ deshalb sagt mit das gestalten mit Bedienoberflächen leichter als HTML und CSS ich möchte es verstehen, behersche jedoch die Sprache noch nicht, ich verstehe so langasam was welcher Befehl bewirkt jedoch ist mir der Aufbau mit Satzbeginn und Abschluss und anordnung noch nicht geläufig.
      Wie du sagtes es herscht ein Chaos im Code. ja leider, zum Beispeil wollte ich mir dem image "home" ein Rollover Navigationsleisten Punkt erstellen.
      Da meine Nav-Leiste Links am Rand steht und aus verschiedenen Images besteht (pro Image eine Navpunkt) habe ich den Punkt home mittels einer Ebene auf die Ebene Nav-section gelegt. Darauf habe ich den Befehl (Nav-Punkt) wieder gelöscht und aus dem Ebenenfenster Rechts im Dreamweaver gelöscht.
      Beim erneuten erstellen hat es aus dem 1nen Nav-Punkt (home) 1Ebene mit einer unterebene erstellt. Dies geht so ja nicht. Seitdem bringe ich dieses Chaos nicht mehr raus....
      Wenn du mir ein Typ hasst wäre ich sehr dankbar

      liebe Grüsse

      1. Zu deiner Frage, wie geagt ich bin erst dran mich in die Materie einzuarbeiten, ich bin eher der Grafische-Typ deshalb sagt mit das gestalten mit Bedienoberflächen leichter als HTML und CSS ich möchte es verstehen,

        dann verstehe zuerst, dass html nichts mit der darstellung zu tun hat ;) genau aus dem grund sind wysiwyg-editoren die html UND css gleichzeitig erzeugen für anfänger eher gefährlich als hilfreich

        [...]

        der beste tipp: beginne von aussen nach innen, langsam und der reihe nach

        das hier hilft dir ggf weiter
        https://forum.selfhtml.org/?t=180597&m=1193886

        zum zentrieren das hier
        http://suit.rebell.at/index.php?id=14
        user: suit
        pass: rebell

        1. hi Suit,

          zum zentrieren das hier
          http://suit.rebell.at/index.php?id=14
          user: suit
          pass: rebell

          Ei, ei, deine Umlaute sind gar schröcklich *grusel* und die Warning macht sich auch nicht sooo gut (aber ich gehe davon aus das sich deine Seite noch im Aufbau befindet).

          gruss
          shadow

          --
          Vor dem Parser und auf hoher See sind wir allein in Gottes Hand
          1. Ei, ei, deine Umlaute sind gar schröcklich *grusel* und die Warning macht sich auch nicht sooo gut (aber ich gehe davon aus das sich deine Seite noch im Aufbau befindet).

            ja, darum auch der passwordschutz :)

            da ist grade eine debugausgabe drinnen, darum ist die html-ausgabe auch nicht valide

            und die zeichencodierung hat folgedessen auch probleme

        2. Wau, super Beschreibung vielen dank hasst mir sehr geholfen

          Endlich hab ichs hingekriegt. bin nun auch fleissig dran ein Buch über CSS zu lesen.
          Der Container ist nun mittig zentriert im Browser, jedoch nur beim Firefox.
          Opera kommt nur weiss und beim Ie der Grüne Hintergrund (Background body).
          Hab ich da was übersehen?
          Die Angaben sind alle in px, habs zuerst mittels % Versucht, jedoch musste ich die Abstände und Längenangaben in % bis auf 2. Dezimalstelle angeben.
          Habe dann vermutett das dies die Browser nicht schlucken und geändert.
          Aufgrund dass meine Homepage 1024x768px gross ist und fix, also kein gleiten (scrollen) in Vertikaler Richtung, wäre es schön gewesen wenn die Seitengrösse sich anpassen würde, jedoch nur bis zu einer Grösse welche über max-width und max-height. Ist das möglich so zu realisieren oder nicht, so dass es von den 3 Browsern (heutigem Standart geschluckt wird)?

          Gruss und vielen Dank

          ``
          <!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" />
          <!-- TemplateBeginEditable name="doctitle" -->
          <title>Aeroplaneworks-maintemplate-center</title>
          <!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
          <style type="text/css">
          <!--
          html, body {
           height: 100%;
           margin: 0;
           background: #7C8D87;
          }

          #top {
           float: left;
           width: 1px; height: 50%;
           margin-bottom: -384px;
          }

          #container {
           clear: left;
           position: relative;
           margin: 0 auto;
           width: 1024px;
           height: 768px;
           background: #7C8D87;

          }
          #head-section {
           position:absolute;
           left:0px;
           top:0px;
           width:1024px;
           height:225px;
           z-index:1;
           background-image: url(../img/1024x225_heacsection.jpg);
           background-repeat: no-repeat;
          }
          #nav-section {
           position:absolute;
           left:0px;
           top:225px;
           width:204px;
           height:543px;
           z-index:2;
           background-image: url(../img/204x543_Navsection_left.jpg);
           background-repeat: no-repeat;
          }
          #main-section {
           position:absolute;
           left:204px;
           top:225px;
           width:820px;
           height:526px;
           z-index:3;
           background-image: url(../img/820x526_mainsection_transparenty.png);
           background-repeat: no-repeat;
          }
          #feet-section {
           position:absolute;
           left:204px;
           top:751px;
           width:820px;
           height:17px;
           z-index:4;
           background-image: url(../img/820x17_feetsection_transparent.png);
           background-repeat: no-repeat;
          }

          </style>
          <script type="text/javascript">
          <!--
          function MM_reloadPage(init) {  //reloads the window if Nav4 resized
            if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
              document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
            else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
          }
          MM_reloadPage(true);
          //-->
          </script>
          </head>

          <body>
            <div id="top"></div>
            <div id="container">
              <div id="head-section"></div>
                     <div id="nav-section"></div>
                            <div id="main-section"></div>
              <div id="feet-section"></div>
            </div>
          </body>
          </html>

          1. Wau, super Beschreibung vielen dank hasst mir sehr geholfen

            Endlich hab ichs hingekriegt. bin nun auch fleissig dran ein Buch über CSS zu lesen.
            Der Container ist nun mittig zentriert im Browser, jedoch nur beim Firefox.
            Opera kommt nur weiss und beim Ie der Grüne Hintergrund (Background body).
            Hab ich da was übersehen?

            kann ich grade nicht nachvollziehen - ggf. ereilt dich der quirksmode beim internet explorer

            Die Angaben sind alle in px, habs zuerst mittels % Versucht, jedoch musste ich die Abstände und Längenangaben in % bis auf 2. Dezimalstelle angeben.

            wies mit % geht ist irgendwo weiter unten in einem abschnitt vermerkt

            Ist das möglich so zu realisieren oder nicht, so dass es von den 3 Browsern (heutigem Standart geschluckt wird)?

            der ie6 versteht kein max-width bzw max-height - ohne javascript wird das nicht gehen

            flexible seite für alle browser, ausnahme für den ie ist aber möglich