Webinhalte zentrieren

Hallo,
ich suche Hilfe. Und zwar möchte ich, daß meine Webseite im Browser zentriert dargestellt wird.

Ich habe dazu:

body {
font: 10px Helvetica, Arial, sans-serif;
color: black; background-color: #ffffff;
margin: 0px;
text-align: center;
}
[COLOR=„red“]#content {
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

im Bereich und

[COLOR=„red“]


im body-Bereich eingefügt.
Für das Ergebnis die Testseite: emscherwetter

Die Wörter TEST werden richtig platziert, jedoch nicht die Navigationsleiste.
Hat da jemand einen Tip, wie ich das korrigieren kann ?
Danke Axel

Jetzt sehe ich gerade, daß im IE und im Firefox alles richtig angezeigt wird, nur im Safari-Browser nicht, da steht die Navi-Leisteam linken Bildschirmrand un nicht im mittig platzierten Container.
Hier der gesamte Code:

emscherwetter body { font: 10px Helvetica, Arial, sans-serif; color: black; background-color: #ffffff; margin: 0px; text-align: center; } #content { width: 1000px; margin-left: auto; margin-right: auto; text-align: left; } div#Rahmen { width: 55.1em; padding: 0.8em; background-color: clear; } * html div#Rahmen { /* Korrektur fuer IE 5.x */ width: 56.7em; w\idth: 55.1em; } div#Rahmen div { clear: left; } ul#Navigation { margin: 0; padding: 0; text-align: center; }

ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}

  • html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
    }
    :first-child+html ul#Navigation li { / Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
    }

ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}

  • html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
    }
    :first-child+html ul#Navigation ul { / Workaround fuer den IE 7 /
    background-color:silver; padding-bottom:0.4em;
    }
    ul#Navigation li:hover ul {
    display: block; /
    Unternavigation in modernen Browsern einblenden */
    }
    ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
    }

ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}

  • html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x /
    w\idth: 6.4em; /
    korrekte Breite fuer den IE 6 im standardkompatiblen Modus /
    }
    ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
    }
    li a#aktuell { /
    aktuelle Rubrik kennzeichnen /
    color: maroon; background-color: silver;
    }
    ul#Navigation li ul span { /
    aktuelle Unterseite kennzeichnen */
    background-color: maroon;
    }
  • Startseite
  • <li><a>Wetter</a>
      <ul>
        <li><a href="#Beispiel">Aktuell</a></li>
        <li><a href="#Beispiel">Wetterlage</a></li>
        <li><a href="#Beispiel">Vorhersage</a></li>
        <li><a href="#Beispiel">Niederschlag</a></li>
        <li><a href="#Beispiel">Gewitter</a></li>
        <li><a href="#Beispiel">Satellit</a></li>
        <li><a href="#Beispiel">15-Tages-Prognose</a></li>
        <li><a href="#Beispiel">Warnungen</a></li>
        <li><a href="#Beispiel">Thema des Tages</a></li>
      </ul>
    </li>
    
    <li><a href="#Beispiel">Gesundheit</a>
     <ul>
        <li><a href="#Beispiel">Pollenflug</a></li>
        <li><a href="#Beispiel">UV-Strahlung</a></li>
       </ul>
      </li>
    
    <li><a href="#Beispiel">Webcam</a>
      <ul>
        <li><a href="#Beispiel">Blick nach Osten</a></li>
        <li><a href="#Beispiel">Blick nach Westen</a></li>
      </ul>
    </li>
    
    <li><a href="#Beispiel">Gästebuch</a>
    
    <li><a href="#Beispiel">Links</a>
    
    <li><a>Sonstiges</a>
    	<ul>
    	<li><a href="#Beispiel">Technik</a></li>
    	<li><a href="#Beispiel">Presse</a></li>
    	<li><a href="#Beispiel">Fotoalbum</a></li>
    	<li><a href="#Beispiel">Kontakt</a></li>
    	</ul>
    	
     </ul>
     Test
     Test
     </div>
     <div></div></div></div>
    

gerade eben sahs im FF noch OK aus, aber jetzt ist die Navigation links

PS: Die rechtsklick-Sperre ist nervig.

Da Du sinnfreierweise den Rechtsklick auf deiner Seite deaktiviert hast, kann ich leider nicht genau schauen woran es liegt. Ich kann dir nur raten den Firebug zu verwenden um selbst das Problem zu ergründen.

wird geändert, moment

sorry, sperre ist raus

Für das Zentrieren einer Webseite musst du doch einfach nur:

[HTML]
body {
max-width:1000px;
margin: auto;
}
[/HTML]

machen…

Da wird sie mir aber nicht mittig im Browserfenster angezeigt.

Also ich hab die Erfahrung gemacht das ein margin:auto; genau dies tut.

Also in keinem Browserfenster wird die Seite mit diesem Befehl mittig angezeigt.

Das liegt an dieser Zeile:

[HTML]

    [/HTML]entferne das style-Attribut samt Inhalt und passe die CSS an. Dann klapt das auch mit der Zentrierung.

Okay, zumindest steht nun alles im eingerichteten 1000px großen Fenster drin. Was muss ich denn am CSS noch ändern, wie kann ich die Menüleiste in diesem Fenster genau positionieren, wo ich sie haben möchte ?

Willst du überhaupt die Menüleiste selbst positionieren? Ist doch jetzt zentriert und wird je nach Fenstergröße der Besucher angepasst. Viele stört es nämlich, falls eine Seite nicht zentriert wird. Oder was meinst du genau mit positionieren?

Also: Im Ursprung möchte ich, dass meine Webseite auf dem Monitor zentriert angezeigt wird, egal wie groß der Monitor ist (ich habe hier mal 1000px eingestellt (für Einstellung 1024x768 px)).
Wie kann ich jetzt innerhalb dieses Fensters meine Menüleiste genau dort positionieren, wo ich sie haben möchte (z.B. 100px von oben und 400 px von rechts) ?

margin-top, margin-bottom, padding-top, padding-bottom, etc.?

geht das nicht irgendwie über

? Falls ja, wo muss das hin ?

Nein, das solltest Du mit Außen- und Innenabständen machen, wie von behalx empfohlen.

Okay, wo müsste ich diese Befehle denn einbauen, wenn ich zum Beispiel die Leiste 100px von oben und 300 px von links stehen haben möchte ?

Bezogen auf ul#Navigation ginge das indem Du dort einfach den Außenabstand ergänzt:

margin: 100px 0 0 300px;

Siehe: SELFHTML: Stylesheets / CSS-Eigenschaften / Auenrand und Abstand

Also ich hab’s jetzt im -Bereich eingebaut:

}
ul#Navigation {
margin: 100px 0 0 300px;
text-align: center;
}
Nun staucht es mir aber die Leiste zusammen, als ob da rechts eine Begrenzung wäre.