|
|||
Brauche Tipps zur Umsetzung der Navigation
Hallo CSS-Freunde,
ich habe folgendes Layout und bin gerade am überlegen wie ich am effektivsten die Navigation umsetze. Sie besteht aus dem 1px Border, dann dem Navi Text und dann diesem Kastenbild welches auch einen Mouseover besitzt bei Hover. Habt ihr Ideen? Ich hab schon an diese Bilder Matrix gedacht. Danke!! |
Sponsored Links |
|
|||
Navigationsmenus gehören in Listen. Du hast da -wenn ich das richtig verstehe- eine 2-Ebenen-Navi: Oben ein Rubrik-Begriff und der blaue Kasten darunter mit einer anderen Verlinkung, richtig?
Dann böte sich z.B. ein Menu in einer Definitionsliste an. |
Sponsored Links |
|
|||
Danke für die Antwort, aber das war vielleicht etwas unmissverständlich von mir.
Also das erste li Element (Erster Kasten) besteht sozusagen aus: ____ Text Bild Wobei das Bild auch einen Mouseover hat. Das Bild ist ursprünglich eine große Grafik welche weisse Trenner hat. Man könnte jetzt das große Bild stückeln und jedem Li eine Hintergrundgrafik zuweisen. Aber wäre es nicht viel besser so eine Bildmatrix zu erstellen? Also jedes Li hat die gleiche Grafik bloss die px position ist eine andere. Fragen über Fragen. |
|
|||
Dann ist es noch einfacher.
Wie wär es damit? Code:
<ul> <li>Text<a href="#">verlinkter Bildtext</a></li> <li>....<li> </ul>< |
|
|||
Genau so!
Hi,
da schließe ich mich an: die Navi gehört in Listen, und wenn die Listenpunke (li-Tags) nebeneinander erscheinen sollen, dann am besten floaten. Hätte folgenden Vorschlag: ########################### <html> <head> <title>Test-Liste</title> <meta name="author" content="Besitzer"> </head> <style type="text/css"> * {margin:0; padding:0;} body {margin:10px;} div#header {width:1004px;height:50px;background-color:#00E0FF;} div#navi {width:1010px;height:140px;background-color:#FFF;} div.nav_item ul {list-style:none; margin:0; padding:0;text-align:center;} div.nav_item {float: left;height: 130px;width: 140px;padding:0;margin: 0 2px;background-color:red;} div.randLinks {margin-left:0;} div.nav_item ul li.nav_title {width:140px;height:20px;color:#FFF;background-color:blue;} div.nav_item ul li.nav_link a {display:block;width:140px;height:120px;color:#007 F00;background-color:#FFBF00;} div.nav_item ul li.nav_link a:hover {background-color:#F00;} br.clearing {clear:both;} div#content {height:300px;width:1004px;border:1px solid blue;} div#footer {width:1008px;height:150px;background-color:#00C070;} </style> <body> <div id="header">Kopfbreich</div> <div id="navi"> <div class="nav_item randLinks"> <ul> <li class="nav_title">Punkt 1</li> <li class="nav_link"><a href="#">Zu diesem Punkt</a></li> </ul> </div> <div class="nav_item"> <ul> <li class="nav_title">Punkt 2</li> <li class="nav_link"><a href="#">Zu diesem Punkt</a></li> </ul> </div> <div class="nav_item"> <ul> <li class="nav_title">Punkt 3</li> <li class="nav_link"><a href="#">Zu diesem Punkt</a></li> </ul> </div> <div class="nav_item"> <ul> <li class="nav_title">Punkt 4</li> <li class="nav_link"><a href="#">Zu diesem Punkt</a></li> </ul> </div> <div class="nav_item"> <ul> <li class="nav_title">Punkt 5</li> <li class="nav_link"><a href="#">Zu diesem Punkt</a></li> </ul> </div> <div class="nav_item"> <ul> <li class="nav_title">Punkt 6</li> <li class="nav_link"><a href="#">Zu diesem Punkt</a></li> </ul> </div> <div class="nav_item"> <ul> <li class="nav_title">Punkt 7</li> <li class="nav_link"><a href="#">Zu diesem Punkt</a></li> </ul> </div> <br class="clearing" /> </div> <div id="content">Inhalte</div> <div id="footer">Fußbereich</div> </body> </html> ############################### Passt vielleicht an dem einen oder anderen Pixel noch nicht exakt, ist aber recht robust (übrigens in Anlehnung an ein Layout von Eric Meyer's CSS). Nicht vergessen: es geht um XHTML. Und da wäre ein "großes Bild mit weißen Linien als Abtrenner" wahrlich nicht die konsequenteste Lösung. Greetings Bichler |
|
|||
obiges Beispiel packt aber lauter Listen nebeneinander, anstatt das Menu in einer Liste zu lassen, wie es semantisch korrekt wäre.
|
|
|||
Zitat:
Also bezüglich Bildermatrix meinte ich das hier: Navigation Matrix Reloaded @ Dan Rubin’s SuperfluousBanter Ein ul und dann die <li>'s . Und da ich so oder so entweder viele kleine oder ein großes Bild lade ist es doch vom Aufwand her besser wenn ich das gleich so aufbaue? Da spare ich mir 6 Http Requests. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
Problem mit FlyOut Menu im IE7 | quarki69 | CSS | 5 | 15.03.2010 16:46 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 19:18 |