✔ Probleme mit horizontaler Navigation

Status
Nicht offen für weitere Antworten.
M

Mistertom

Grünschnabel
Hey ho!
Ich habe 2 Probleme mit meiner horizontalen Navigation.

Das 1. Problem:
Ich verwende Hintergrundgrafiken, die beim Mouseover wechseln. Die Schrift auf diesen Hintergrundgrafiken ist leider obenbündig - ich möchte diese weiter unten ausrichten. Wenn ich diese nun mit Padding auf die richtige vertikale Position ausrichte, verschiebt sich auch die Hintergrundgrafik.

Das 2. Problem:
Im Internet Explorer ist die Navigation total falsch dargestellt. Die Listenelemente der Navigation werden untereinander angeordnet.. trotz display: inline-block; ...im Footer wird die Navigation korrekt angezeigt.

Hier einmal der Link zur Seite: http://www.tom-lindemann.de
Ist wie gesagt noch im Aufbau. Hakt momentan an diesen beiden Hürden.

Würde mich freuen, wenn ihr Ideen für eine Lösung der Probleme hättet!
Lieben Gruß, Tom
 
Hi,

zeichne das li-Element mit dem display-Wert inline aus, und formatiere die Links anstelle von display:inline-block mit float:left, denn der display-Eigenschaftswert inline-block wird derzeit nur von wenigen Browsern korrekt interpretiert.

Der Link-Text lässt sich mit der CSS-Deklaration line-height:152px vertikal zentrieren, ansonsten muß gemäß dem CSS-Boxmodell der vertikale padding-Wert von der height-Deklaration subtrahiert werden, damit das Element seine Höhe mit 152px beibehält.

mfg Maik
 
Wow, vielen lieben Dank! Auf die Lösung mit float wäre ich nicht gekommen. Merci!
Hoffe nur, dass es auch bei den älteren Versionen des Internet-Explorers problemlos angezeigt wird. Die nächste Aufgabe ist den Content-Bereich 3-Spaltig zu gestalten. Mal schaun.. Ich meld mich wahrscheinlich beizeiten nochmal. :D
 
Wo hast du denn diesen Eigenschaftswert ausgegraben?

Code: 
ul#navigation li {
        display: inline;
        float: center;
        font-size: 95%;
        padding: 0;
        border: 0;
        margin: 0;
        height: 152px;
        width: 100px;
    }

  • left
  • right
  • none
  • inherit
stehen für float zur Auswahl.

mfg Maik
 
Code: 
ul#navigation { 
        padding: 0;
        border: 0;
        margin: 0 auto; /* zentriert Element horizontal, wenn es eine Breite besitzt */
        list-style-type: none;
        width: 500px; /* 5 Menüpunkte à 100px */
    }
mfg Maik
 
Okay, eine Frage hab ich noch...
Ich möchte links und rechts neben den 5 Buttons einen Abstandhalter von 200px Breite einfügen. Im Internet Explorer wird mir soweit alles korrekt angezeigt, im Firefox jedoch nicht. Normalerweise ist das ja immer andersherum..

Hintergrund ist folgender:
Die Buttonleiste soll 500px breit sein und zentral auf liegen. Darunter ist der Content-Bereich angesetzt mit ebenfalls 500px und links davon soll eine Leiste für ein Untermenü sein, rechts vom Contentbereich ein weiterer Bereich von 200px Breite. Beim Verkleinern des Browserfensters soll Menü und Contentbereich weiterhin übereinander stehen. Ohne Abstandhalter verschiebt sich das ganze..

Nun habe ich in die ungeordnete Liste des Menüs einfach vorne und hinten noch einen Listenpunkt der Breite 200px eingefügt mit einem Hintergrundbild der selben Breite. Und trotzdem ist das ganze Menü nach links verschoben und der erste Platzhalter somit ignoriert.

:confused:
 
Hi,

ergänze in diesem Regelblock die beiden fehlenden Semikolons:

Code: 
    #navileft {
        display: inline;
        float: left;
        background: url(http://www.tom-lindemann.de/grafik/button_bg);
        background-repeat: no-repeat;
        background-position: top center;
        width: 200px;
    }
und notiere in den beiden äußeren Listenpunkten ein geschütztes Leerzeichen:

Code: 
<ul id="navigation">

   <li id="navileft">&nbsp;</li>
   <li id="navistart"><a href="index.html" title="Zur Startseite">Start</a></li>
   <li id="naviprofil"><a href="profil.html" title="Profil">Profil</a></li>
   <li id="naviprojekt"><a href="projekt.html" title="Projekte">Projekt</a></li>
   <li id="navimedia"><a href="media.html" title="Media">Media</a></li>
   <li id="navikontakt"><a href="kontakt.html" title="Kontakt">Kontakt</a></li>
   <li id="naviright">&nbsp;</li>

</ul>
mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück