CSS: Problem mit Zentrierung & Breite v. Navigationsleiste
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
anwendungsbeispiel
auto
automatische zentrierung
bestandteil
code
dank
display
http
image
kleinen denkansatz
kleines beispiel
mittelwert
passen
problem
testen
url
vermitteln
verweis
zahl
-
Liebe LC-Community,
ich versuche nun seit einigen Tagen eine Navigationsleiste zu zentrieren und dabei die gleiche Breite zu behalten.
www.[entfernt].com hier ist der Übeltäter
Wenn man nun einen speziellen Screen hat, der eine spez. Größe hat oder einfach zoomt, verändert sich die Breite..
Habt Ihr Ideen?
Danke & LG,
MC
Beitrag zuletzt geändert: 15.8.2014 12:02:42 von mczernin -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Moin,
wenn du dich direkt und einfach an den "Auflösungen" orientieren möchtest bieten sich
"Media Queries" an.
Mit diesen kannst du deine Seite bequem an so gut wie alle Endgeräte an passen.
Anwendungsbeispiel:
/* Geräte mit max. Auflösung 800px */ @media screen and (max-width:800px) { .nav {margin: 0 auto;width:100%;} }
Es bietet sich allerdings auch an für Desktops/Notebooks sich einen "Mittelwert" zu suchen.
Anwendungsbeispiel:
@media screen and (min-width:1024px) { .nav {margin: 0 auto;width:800px;} .nav li {float:left;width:80px;} } /* Auch mit den % kann man arbeiten (sogar bequemer) */ @media screen and (min-width:1024px) { .nav {margin: 0 auto;width:80%;} .nav li {float:left;XX%;} } /*Statt "margin 0" kann man aber bei % auch gut mit float werkeln*/ @media screen and (min-width:1024px) { .nav {float:left;margin-left:10%;width:80%;} }
So etwas nennt sich "Responsive Webdesign" und ist doch Zukunftssicherer als jetzt irgendwelche
rein "zentrierten" Optionen vorzuschlagen.
Du kannst damit fast allen Endgeräten eine vernünftige Ausgabe deiner Website liefern,
was in Zeiten von Smartphones und Tablets durchaus sinnvoll ist.
Dazu noch ein paar kleine informative Seiten:
http://www.responsive-webdesign.mobi/
http://www.tutorials.at/responsive-webdesign/responsive-webdesign-tutorial.php
Ich hoffe dir einen kleinen Denkansatz vermitteln zu können.
MfG -
seven-sign schrieb:
Moin,
wenn du dich direkt und einfach an den "Auflösungen" orientieren möchtest bieten sich
"Media Queries" an.
Mit diesen kannst du deine Seite bequem an so gut wie alle Endgeräte an passen.
Anwendungsbeispiel:
/* Geräte mit max. Auflösung 800px */ @media screen and (max-width:800px) { .nav {margin: 0 auto;width:100%;} }
Es bietet sich allerdings auch an für Desktops/Notebooks sich einen "Mittelwert" zu suchen.
Anwendungsbeispiel:
@media screen and (min-width:1024px) { .nav {margin: 0 auto;width:800px;} .nav li {float:left;width:80px;} } /* Auch mit den % kann man arbeiten (sogar bequemer) */ @media screen and (min-width:1024px) { .nav {margin: 0 auto;width:80%;} .nav li {float:left;XX%;} } /*Statt "margin 0" kann man aber bei % auch gut mit float werkeln*/ @media screen and (min-width:1024px) { .nav {float:left;margin-left:10%;width:80%;} }
So etwas nennt sich "Responsive Webdesign" und ist doch Zukunftssicherer als jetzt irgendwelche
rein "zentrierten" Optionen vorzuschlagen.
Du kannst damit fast allen Endgeräten eine vernünftige Ausgabe deiner Website liefern,
was in Zeiten von Smartphones und Tablets durchaus sinnvoll ist.
Dazu noch ein paar kleine informative Seiten:
http://www.responsive-webdesign.mobi/
http://www.tutorials.at/responsive-webdesign/responsive-webdesign-tutorial.php
Ich hoffe dir einen kleinen Denkansatz vermitteln zu können.
MfG
Danke für Deine Antwort. Diese Methode kenne ich.
Wenn ich nun für class .nav width auf xxx setze ist es nicht mehr zentriert... -
Moin,
zuerst nie an der richtigen Seite testen.
Du hast hier genug Subdomains um dort dein Design zu entwicklen & zu testen.
Wie definierst du "xxx"? Es muss eine Zahl sein max. 100.
EIn kleines Beispiel: @media screen and (min-width:1024px) { .nav {margin: 0 auto;width:100%;max-width:1000px;} .nav li {float:left;width:10%;} }
MfG -
seven-sign schrieb:
Moin,
zuerst nie an der richtigen Seite testen.
Du hast hier genug Subdomains um dort dein Design zu entwicklen & zu testen.
Wie definierst du "xxx"? Es muss eine Zahl sein max. 100.
EIn kleines Beispiel: @media screen and (min-width:1024px) { .nav {margin: 0 auto;width:100%;max-width:1000px;} .nav li {float:left;width:10%;} }
MfG
Ok.. Gibt es auch eine möglichkeit ohne media queries? -
Moin,
natürlich gibt es die nur deckst du damit nicht so viele Endgeräte ab.
.nav {margin: 0 auto;width:800px;}
Hier noch ein weiterführender Link:
http://www.ich-lerne-css.de/Style/Examples/007/center.html
MfG -
seven-sign schrieb:
Moin,
natürlich gibt es die nur deckst du damit nicht so viele Endgeräte ab.
.nav {margin: 0 auto;width:800px;}
Hier noch ein weiterführender Link:
http://www.ich-lerne-css.de/Style/Examples/007/center.html
MfG
Danke vielmals ;)
Wenn das nun so eingebe, kommt dann das raus... (siehe Link oben...)
PS: leider ist es momentan zu aufwendig woanders zu testen :) Solange ich nur CSS verändere sollte das kein Problem machen ;) -
mczernin schrieb:
PS: leider ist es momentan zu aufwendig woanders zu testen :) Solange ich nur CSS verändere sollte das kein Problem machen ;)
An den HTML-Code solltest du aber auch noch einmal rangehen:
<div id="homepage-column-2" class="block"> </div>
hat in <head></head> nichts zu suchen
<center> ist nicht Bestandteil von HTML5
body { background-image: url( http://mczernin.tipido.net/wordpress/wp-content/uploads/2013/09/bg-body-tile.png ) !important; }
enthält einen Verweis zu einer nicht mehr existierenden Website -
mein-wunschname schrieb:
mczernin schrieb:
PS: leider ist es momentan zu aufwendig woanders zu testen :) Solange ich nur CSS verändere sollte das kein Problem machen ;)
An den HTML-Code solltest du aber auch noch einmal rangehen:
<div id="homepage-column-2" class="block"> </div>
hat in <head></head> nichts zu suchen
<center> ist nicht Bestandteil von HTML5
body { background-image: url( http://mczernin.tipido.net/wordpress/wp-content/uploads/2013/09/bg-body-tile.png ) !important; }
enthält einen Verweis zu einer nicht mehr existierenden Website
danke habe ich nun nach deinen Vorschlägen geändert ;) ich habe die navigationsleiste nun fix eingestellt.. Ich muss daher jedes mal wenn ein neuer menüpunkt dazukommt die css anpassen...
Beitrag zuletzt geändert: 16.8.2014 16:36:40 von mczernin -
mczernin schrieb:
mein-wunschname schrieb:
mczernin schrieb:
PS: leider ist es momentan zu aufwendig woanders zu testen :) Solange ich nur CSS verändere sollte das kein Problem machen ;)
An den HTML-Code solltest du aber auch noch einmal rangehen:
<div id="homepage-column-2" class="block"> </div>
hat in <head></head> nichts zu suchen
<center> ist nicht Bestandteil von HTML5
body { background-image: url( http://mczernin.tipido.net/wordpress/wp-content/uploads/2013/09/bg-body-tile.png ) !important; }
enthält einen Verweis zu einer nicht mehr existierenden Website
danke habe ich nun nach deinen Vorschlägen geändert ;) ich habe die navigationsleiste nun fix eingestellt.. Ich muss daher jedes mal wenn ein neuer menüpunkt dazukommt die css anpassen...
Ich wollte mir das gerade noch einmal ansehen, weil ich dachte, dass man da noch was machen kann (automatische Zentrierung), aber der Link zu HP ist jetzt raus. -
mein-wunschname schrieb:
mczernin schrieb:
mein-wunschname schrieb:
mczernin schrieb:
PS: leider ist es momentan zu aufwendig woanders zu testen :) Solange ich nur CSS verändere sollte das kein Problem machen ;)
An den HTML-Code solltest du aber auch noch einmal rangehen:
<div id="homepage-column-2" class="block"> </div>
hat in <head></head> nichts zu suchen
<center> ist nicht Bestandteil von HTML5
body { background-image: url( http://mczernin.tipido.net/wordpress/wp-content/uploads/2013/09/bg-body-tile.png ) !important; }
enthält einen Verweis zu einer nicht mehr existierenden Website
danke habe ich nun nach deinen Vorschlägen geändert ;) ich habe die navigationsleiste nun fix eingestellt.. Ich muss daher jedes mal wenn ein neuer menüpunkt dazukommt die css anpassen...
Ich wollte mir das gerade noch einmal ansehen, weil ich dachte, dass man da noch was machen kann (automatische Zentrierung), aber der Link zu HP ist jetzt raus.
Ja ich habe ihn vorrübergehend weggetan, weil ständig meine PM mit Nachrichten voll war (Wie hast du...?, Welches Theme...?..) Aber es ist doch eine normale wordpress page mit eigenem css...
www.gartencafe.com -
Ich habe mir das jetzt noch einmal detailliert angesehen. Die Grundlagen des Templates stammen ja von woothemes.com. Das ursprüngliche Template kenne ich zwar nicht, aber für eine automatische Zentrierung der Menüpunkte müsste man ziemlich viel umschreiben. Das ist dann für einschließlich Testdurchlauf für einen Forentipp zuviel Aufwand.
Wenn ich eine Navi-Leiste zentrieren will, dann nehme ich für die einzelnen <li> nicht float:left sondern
oderdisplay: inline;
display:inline-block
Bei anderen Themes auf der genannten Website (z.B. Duo) wird es auch genau so gemacht. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
