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;
}
<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.
behalx
29. Mai 2011 um 14:10
7
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.
behalx
29. Mai 2011 um 14:19
9
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.
behalx
29. Mai 2011 um 14:37
11
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 ?
behalx
29. Mai 2011 um 15:34
13
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) ?
behalx
29. Mai 2011 um 15:40
15
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.