kostenloser Webspace werbefrei: lima-city


CSS: Problem mit Zentrierung & Breite v. Navigationsleiste

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    mczernin

    Kostenloser Webspace von mczernin

    mczernin hat kostenlosen Webspace.

    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 :scared:
    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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
  4. Autor dieses Themas

    mczernin

    Kostenloser Webspace von mczernin

    mczernin hat kostenlosen Webspace.

    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...
  5. 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
  6. Autor dieses Themas

    mczernin

    Kostenloser Webspace von mczernin

    mczernin hat kostenlosen Webspace.

    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?
  7. 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
  8. Autor dieses Themas

    mczernin

    Kostenloser Webspace von mczernin

    mczernin hat kostenlosen Webspace.

    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 ;)
  9. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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
  10. Autor dieses Themas

    mczernin

    Kostenloser Webspace von mczernin

    mczernin hat kostenlosen Webspace.

    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
  11. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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.
  12. Autor dieses Themas

    mczernin

    Kostenloser Webspace von mczernin

    mczernin hat kostenlosen Webspace.

    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
  13. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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
    display: inline;
    oder
    display:inline-block

    Bei anderen Themes auf der genannten Website (z.B. Duo) wird es auch genau so gemacht.
  14. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!