Ganz einfach mit
.ele{
}
Echt ist das so? Ich mache "normale" Menüs zwar auch mit ul-Listen aber wenn Grafikspielereien gewünscht sind, lasse ich die ul-Liste weg. Was hat das denn konkret für Nachteile?
Bild als Hover Effekt und Div-Größe
- Ersteller xFrager
- Erstellt am
.ele{
}
Cheffchen
Senior HTML'ler
Hallo,
habe erst jetzt das bild gesehen, nun wird vielles klarer und das etwas auf denn holzweg bist aber nur ein bisschen.
@bernie_r
Cheffchen
habe erst jetzt das bild gesehen, nun wird vielles klarer und das etwas auf denn holzweg bist aber nur ein bisschen.
- musst bei #navi ul alle padding und margin auf 0 setzten.
- #navigation background-position: center 10px; einfügen, wo bei die 10px ca sind
- #navi ul li änderst display in inline-block
- der rest macht über #navi ul li a oder #navi ul li a:hover wie hintergrundbilder und größen
@bernie_r
das läuft aber lange noch nicht unter Grafikspielereien und selbst wenn, menü ist ul li liste oder ist halt kein Menü :O).
und natürlich auch ander Programme, reicht das nicht?
Cheffchen
Ist er nicht. Alle Elemente haben keinerlei Abstände zueinander. Du hast jedes <li> und <a> 108px breit gemacht und darin den Text zentriert. Da "Neuigkeiten" und "Downloads" längere Wörter sind als "Portfolio" und "Kontakt" haben die Wörter natürlich einen größeren Abstand zueinander. Dafür kann dein CSS aber nichts.
Wenn Du einheitliche "Abstände" willst (in Anführungszeichen da es keine tatsächlichen Abstände sind) dann verzichte auf die feste Breite von 108 Pixeln. Setz statt dessen den padding für die <a>-Elemente anders, z.B.
Problem dabei ist dann wiederum, dass deine Hintergrundgrafik, die per hover eingeblendet wird, nicht mehr dazu passt. Da die Grafik nicht in der Breite flexibel ist, kannst Du nicht auf die Pixelangabe von 108 Pixel verzichten und musst somit auch mit den "Abständen" leben.
Wenn Du einheitliche "Abstände" willst (in Anführungszeichen da es keine tatsächlichen Abstände sind) dann verzichte auf die feste Breite von 108 Pixeln. Setz statt dessen den padding für die <a>-Elemente anders, z.B.
Code:
padding: 42px 8px 0;Problem dabei ist dann wiederum, dass deine Hintergrundgrafik, die per hover eingeblendet wird, nicht mehr dazu passt. Da die Grafik nicht in der Breite flexibel ist, kannst Du nicht auf die Pixelangabe von 108 Pixel verzichten und musst somit auch mit den "Abständen" leben.