|
|||
Problem mit Navigation (<a>) in ul bzw. li
Hallo,
wahrscheinlich schon ein viel besprochenes Thema, ich habe allerdings nichts gefunden, bzw. wußte nicht wonach ich genau suchen könnte und unter den Ergebnissen war nichts passendes... Zum Thema. Ich will eine einfache Horizontale Navigation haben. Einen Balken indem die einzelnen Navigationspunkte nebeneinander stehen mit einer Hintergrundfarbe. Auf die Art, die ich versuche geht das aber irgendwie nicht, da die navigationspunkte über den Balken stehen (denke das liegt am padding im a). Hier der Code (vielleicht versteht Ihr dann besser...) HTML-Code:
<!-- ################################################################### --> <!-- ### NAVIGATION ### --> <!-- ################################################################### --> <div id="navigation"> <ul> <li class="aktiv"> <a href="#">Punkt</a></li> <li> <a href="#">Punkt</a></li> <li> <a href="#">Punkt</a> </li> <li> <a href="#">Punkt</a> </li> <li> <a href="#">Quick»Punkt</a> </li> <li> <a href="#">Quick»Punkt</a> </li> <li> <a href="#">Punkt</a> </li> </ul> </div> Code:
html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, ul, li, input, textarea, select { font-family: Arial, Verdana, Helvetica, Geneva, sans-serif; color: #3b4247; font-size: 11px; line-height: 1.5em; } html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li { margin: 0; padding: 0; } /* ############################################################### */ /* ### NAVIGATION ### */ /* ############################################################### */ #navigation { background-color: #3b4247; background-image: url(navigation_bg.gif); background-repeat: repeat-x; background-position: bottom left; } #navigation ul { margin-left: 15px; } #navigation ul li { display: inline; list-style-type: none; list-style-position: inside; color: #ffffff; padding: 0px; } #navigation ul li a { color: #ffffff; font-size: 12px; font-weight: normal; padding: 8px; line-height: 12px; margin-right: 1px; text-transform: uppercase; display: block; position: relative; } #navigation ul li a:hover { background-color: #2e3336; } #navigation ul li.aktiv a, #navigation ul li.aktiv a:hover { background-color: #64696d; } Ich hoffe Ihr könnte mir helfen |
Sponsored Links |
|
||||
Alles zu Navigationen findest Du hier.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation zentrieren | garfield1711 | CSS | 1 | 12.06.2011 10:12 |
Problem mit 3-Ebenen Navigation | Hagbard-Celine | CSS | 0 | 22.05.2009 16:01 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |
Ul mit Sub-Ul Navigation macht Darstellungsprobleme im Opera | eRoZion | CSS | 17 | 16.09.2005 10:30 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 19:18 |