• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

2 Fragen zu meiner Navigation

Publisher

Publisher

Neues Mitglied
Diese Navigation hier: DJ Sansire - official website

Frage 1: Wenn ich im Browser den Text vergrössere oder verkleinere verkleinert sich manchmal die gesamte Navigation ein bisschen zu schmal, oder zu breit und eine Kategorie verschiebt sich nach unten. Wie kann ich das schön fix machen?

Frage 2: Wie kann ich diese 2-3 Pixel zwischen den li Einträgen formatieren, bzw. auf 1 px beschränken?

Allgemein bin ich nicht so über die Codierung dieser Navigation zufrieden, hatte aber mal einen Thread erstellt ob man es so lassen kann, oder es eine bessere Variante gibt so eine Navigation zu machen. Aber niemand hatte was dagegen zu sprechen.

Code:
Code: 
#navig { /* Navigation */
 background-color: #000;
 text-align: center;
 padding-top: 10px;
 padding-bottom: 10px;
 width: 952px;
}
 
#navig li { /* Navigation - Listeneinträge */
 display: inline;
}
#navig li a{ /* Navigation - Listeneinträge Links */
 text-transform: uppercase;
 color: #FFF;
 text-decoration: none;
 padding-right: 30px;
 padding-left: 29px;
 height: 30px;
 background-image: url(../images/navig_normal.gif);
 background-repeat: repeat-x;
 padding-top: 11px;
 padding-bottom: 10px;
 font-size: 14px;
}

HTML: 
<ul id="navig">
    <li><a href="../index.php" title="Zur Startseite">Startseite</a></li>
    <li><a href="../biographie.php" title="Zur Biografie">Biografie</a></li>
    <li><a href="../sanelectro.html" title="Lable SAN ELECTRO">SAN ELECTRO</a></li>
    <li><a href="../events1.html" title="Zu den Events">Events</a></li>
    <li><a href="../galerie.html" title="Zur Galerie">Galerie</a></li>
    <li><a href="../community/gb/gb.php" title="Zum Gästebuch">Gästebuch</a></li>
    <li><a href="../community/kontakt/kontakt.php" title="Zum Kontaktformular">Kontakt</a></li>
    </ul>
 
Zuletzt bearbeitet:
Publisher schrieb:
Frage 1: Wenn ich im Browser den Text vergrössere oder verkleinere verkleinern ist manchmal die gesamte Navigation ein bisschen zu schmal, oder zu breit und eine Kategorie verschiebt sich nach unten. Wie kann ich das schön fix machen?
Zum Vergrößern anklicken....
Sorge einfach dafür, dass keine Inhalte verdeckt werden. Das ist ein Feature kein Fehler.
Eventuell mit der Display Formatierung talbe und table-cell arbeiten. Aber wie das der IE kann, weiß ich nicht. IE6 kann es auf jeden fall nicht.
Publisher schrieb:
Frage 2: Wie kann ich diese 2-3 Pixel zwischen den li Einträgen formatieren, bzw. auf 1 px beschränken?
Zum Vergrößern anklicken....
Kommetiere die Zeilenumbrüche aus bzw. schreibe alles Hintereinander.
 
HTML: 
<ul id="navig"><!--
    --><li><a href="../index.php" title="Zur Startseite">Startseite</a></li><!--
    --><li><a href="../biographie.php" title="Zur Biografie">Biografie</a></li><!--
    --><li><a href="../sanelectro.html" title="Lable SAN ELECTRO">SAN ELECTRO</a></li><!--
   --><li><a href="../events1.html" title="Zu den Events">Events</a></li><li><a href="../galerie.html" title="Zur Galerie">Galerie</a></li><li><a href="../community/gb/gb.php" title="Zum Gästebuch">Gästebuch</a></li><li><a href="../community/kontakt/kontakt.php" title="Zum Kontaktformular">Kontakt</a></li>
    </ul>
die
 
Ich werde es dann morgen probieren, aber ich denke nicht das es was ändert.
Denn Zeilenumbrüche im Code nach einem sauberen abgeschlossnen Tag bewirken nichts.
 
Was ist ein imho? Kenne dieses Wort nicht und musste es nie benutzen.

Wie schon gedacht, das auskommentieren zwischen den Listeneinträgen bewirken nichts.
 
Ich weiß nicht was du falsch gemacht hast (Cache?), bei mir funktioniert es:
navbar.gif

http://s154304762.online.de/dj/
 
Mit meiner Standardschriftart bricht bereits ohne Zoomveränderungen ein Eintrag in die nächste Zeile um. Ich wüsste keine geeignete Möglichkeit, das zu verhindern, außer den <li>-Elementen eine feste Breite zu geben oder das gesamte Layout etwa auf em-Einheiten statt auf Pixeln aufzubauen. Aber selbst bei em bin ich mir gerade nicht sicher, ob Umbrüche ohne feste Breitenangabe unter allen Umständen verhindert werden.

Wie schon gedacht, das auskommentieren zwischen den Listeneinträgen bewirken nichts.
Zum Vergrößern anklicken....

Bei mir schon. Das sind die Leerzeichen, die den Abstand erzeugen.
 
A ja das mit dem Auskommentieren ging nun, lag an dem Live-Modus meines DW. Im Browser ists ok. Nur will ich aber doch einen Abstand dazwischen und genau 1 px!

mermshaus schrieb:
Mit meiner Standardschriftart bricht bereits ohne Zoomveränderungen ein Eintrag in die nächste Zeile um.
Zum Vergrößern anklicken....
Welches Betriebssystem und Browser hast du?
 
Ich hatte nur den Code kopiert (nicht auf den Link geklickt), deshalb fehlte da die richtige Font-Definition. Aber du scheinst die Breite der Navigation genau auf die Breite der verwendeten Wörter in der passenden Schriftart in der passenden Größe in der passenden Art von Rendering ausgelegt zu haben. Das macht mit Sicherheit browser-/systemübergreifend mehr Ärger, als es nützt. Ich würde die Breiten der <li>-Elemente fest setzen (können ja unterschiedliche Werte sein).
 
Ich sehe zur Zeit nur den Weg über das Einbringen zusätzlicher Elemente. Weil alles inline formatiert ist, gibt es auch keine Außenabstände. ...
 
Konnte es nun ein bisschen besser machen, aber wenn man zu weit weg zoomt passiert es nochmals. (Ausser im Firefox) www.dj-sansire.ch
HTML: 
  <ul id="navig">
    <li><a href="../index.php" title="Zur Startseite">Startseite</a></li><!--
    --><li><a href="../biographie.php" title="Zur Biografie">Biografie</a></li><!--
    --><li><a href="../sanelectro.html" title="Lable SAN ELECTRO">SAN ELECTRO</a></li><!--
    --><li><a href="../events1.html" title="Zu den Events">Events</a></li><!--
    --><li><a href="../galerie.html" title="Zur Galerie">Galerie</a></li><!--
    --><li><a href="../community/gb/gb.php" title="Zum Gästebuch">Gästebuch</a></li><!--
    --><li><a href="../community/kontakt/kontakt.php" title="Zum Kontaktformular">Kontakt</a></li>
    </ul>
PHP: 
 #navig { /* Navigation */
 margin-bottom: 36px;
 border-left-width: 1px;
 border-left-style: solid;
 border-left-color: #000;
}
 
#navig li { /* Navigation - Listeneinträge */
 display: inline;
 
}
#navig li a{ /* Navigation - Listeneinträge Links */
 text-transform: uppercase;
 color: #FFF;
 text-decoration: none;
 background-repeat: repeat-x;
 font-size: 14px;
 padding-top: 11px;
 padding-bottom: 10px;
 float: left;
 width: 135px;
 text-align: center;
 height: 15px;
 background-image: url(../images/navig_normal.gif);
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #000;
}
 
In meinen Augen hast Du jetzt das größere Übel gewählt. Auf Schriftvergrößerung ist den Layout jetzt sehr allergisch.
navbar_float.gif

Deine Formulierung kann ich auf kein Problem beziehen.
 
Hier eine Alternative mit em-Maßen:

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Demo</title>

    <style type="text/css">
        /**
         * new clearfix
         *
         * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
         */
        .clear:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
            }
        * html .clear             { zoom: 1; } /* IE6 */
        *:first-child+html .clear { zoom: 1; } /* IE7 */

        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 60em;
            border: 0.2em solid #f00;
        }

        li {
            list-style: none;
            float: left;
        }

        li a {
            display: block;
            text-align: center;
            width: 10em;
        }

        li a:hover {
            background: #f00;
        }
    </style>

    </head>

    <body>

        <ul class="clear">
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>

    </body>

</html>

Zoomen klappt im Firefox und IE8 einwandfrei, der IE6 scheint ab und an mal falsch zu runden, weshalb es doch noch verspringt. Aber das würde ich ignorieren.
 
Also ich habe nicht vor mit Haks zu arbeiten.

stachelbeer schrieb:
In meinen Augen hast Du jetzt das größere Übel gewählt. Auf Schriftvergrößerung ist den Layout jetzt sehr allergisch.
navbar_float.gif

Deine Formulierung kann ich auf kein Problem beziehen.
Zum Vergrößern anklicken....

Wo kann man denn die Schrift im IE so behindert gross einstellen? Wenn ich die Schriftgrösse auf das maximum setze bleibt die navigation sogar auf 14px. Nur der Inhalt ändert sich.

Im Firefox zwar sieht der Maximalzoom genau so aus wie auf dem Bild. Kann ich evt die maximale Grösse verändern? Begrenzen?
 
Publisher schrieb:
Wo kann man denn die Schrift im IE so behindert gross einstellen?
Zum Vergrößern anklicken....
Wie kommst Du auf den IE?
Publisher schrieb:
Wenn ich die Schriftgrösse auf das maximum setze bleibt die navigation sogar auf 14px. Nur der Inhalt ändert sich.
Zum Vergrößern anklicken....
Was eher unhöflich ist.
Publisher schrieb:
Im Firefox zwar sieht der Maximalzoom genau so aus wie auf dem Bild. Kann ich evt die maximale Grösse verändern? Begrenzen?
Zum Vergrößern anklicken....
Nein.
 
Wenn man wegzoomt verschiebt sich eine Kategorie nach unten links. Kann mir jemand helfen?

HTML: 
<ul id="navig">
    <li><a href="../index.php" title="Zur Startseite">Startseite</a></li><!--
    --><li><a href="../biographie.php" title="Zur Biografie">Biografie</a></li><!--
    --><li><a href="../sanelectro.html" title="Lable SAN ELECTRO">SAN ELECTRO</a></li><!--
    --><li><a href="../events1.html" title="Zu den Events">Events</a></li><!--
    --><li><a href="../galerie.html" title="Zur Galerie">Galerie</a></li><!--
    --><li><a href="../community/gb/gb.php" title="Zum Gästebuch">Gästebuch</a></li><!--
    --><li><a href="../community/kontakt/kontakt.php" title="Zum Kontaktformular">Kontakt</a></li>
    </ul>

Code: 
#navig { /* Navigation */
 margin-bottom: 36px;
 border-left-width: 1px;
 border-left-style: solid;
 border-left-color: #000;
}
 
#navig li { /* Navigation - Listeneinträge */
 display: inline;
 
}
#navig li a{ /* Navigation - Listeneinträge Links */
 text-transform: uppercase;
 color: #FFF;
 text-decoration: none;
 background-repeat: repeat-x;
 
 
 
 font-size: 1
.,5;
 padding-top: 11px;
 padding-bottom: 10px;
 float: left;
 width: 135px;
 text-align: center;
 height: 15px;
 background-image: url(../images/navig_normal.gif);
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #000;
 font-size: 14px;
}
#navig li a:hover{ /* Navigation - Listeneinträge Links Mausüber-Effekt */
 background-image: url(../images/navig_over.gif);
}
#navig li a:visited{ /* Navigation - Listeneinträge Links Besucht-Effekt */
 color: #E0E0E0;
}
 
Publisher schrieb:
Wo kann man denn die Schrift im IE so behindert gross einstellen?
Zum Vergrößern anklicken....
Werden hier Behinderte veralbert, die auf so große Schrift angewiesen sind?

Kann ich evt die maximale Grösse verändern? Begrenzen?
Zum Vergrößern anklicken....
IMHO haben die Browser eine bestimmte Anzahl Vergrößerungsstufen. Die maximale Größe ergibt sich aus der im Browser eingestellten Standardgröße. Wenn Du die auf 40px stellst, dann wirst Du sicher auch auf 80px vergrößern können.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben