|
||||
Navigation Gestalltung
Nabend,
auf die Gefahr hin, dass ich mich blamiere: GarWie Wie realisiere ich den die Navigation so, dass vor dem aktiven Link der Pfeil zu sehen ist (so wie im Mozilla) und das ganze noch valid ist? Ich habe das ganze natürlich erst mit ul / li gemacht, so wie man es im css (http://www.netwg.de/~hauke/dev/garwi...yle/screen.css) noch sehen kann, aber damit bin ich auch kein Stück weiter gekommen p.s.: Die border sind nur zum "Debuggen"
__________________
Kaum macht man es richtig, schon funktioniert es! |
Sponsored Links |
|
|||
an deiner stelle würde ich wieder eine liste verwenden. verwende doch einfach bei dem aktivierten link ein anderes listbullet.
Code:
<div id="nav"> <ul> <li><a href="">Home</a></li> <li class="active"><a href="">Planung</a></li> <li><a href="">Pflaster & Naturstein</a></li> </ul> </div> Code:
#nav ul, #nav li { margin: 0px; padding: 0px; } #nav li { list-style-type: none; } .active { list-style-image:url( ...bildurl einfügen... ); } Code:
#nav li:hover { list-style-image:url( ...bildurl einfügen... ); } Geändert von schorsch (29.03.2007 um 02:38 Uhr) |
Sponsored Links |
|
|||
ich habe mir mal die mühe gemacht und es für dich mit <img>-Tag gebastelt. die seite ist sowohl im firefox, als auch im IE6 richtig dargestellt. valide heißt eigentlich was anderes, aber sie ist auch valide.
Seitenvorschau Code:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>TODO supply a title</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> * { padding: 0px; margin: 0px; font-family: Verdana; color: #ff0; } li { margin-bottom: 5px; line-height: 30px; list-style: none; background: url(navi_spacer.gif) no-repeat 15px 28px; } img { float: left; display: block; width: 14px; margin-right: 5px; } #nav { float: left; width: 160px; background: #060; padding: 5px; } #content { margin-left: 180px; padding: 10px; background: #060; height: 600px; } </style> </head> <body> <ul id="nav"> <li><img src="pfeil.jpg" alt="" />Punkt 1</li> <li><img src="pfeil.jpg" alt="" />Punkt 2</li> </ul> <div id="content"> <h1>Überschrift</h1> </div> </body> </html> Geändert von schorsch (31.03.2007 um 00:36 Uhr) |
|
|||
ich würde sie ja auch versuchen ins css zu hauen, wollte es nur nach seinen wünschen realisieren.
ich hab es nochmal umgeschrieben: Seitenvorschau Code:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Beispiel</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> * { padding: 0px; margin: 0px; font-family: Verdana; color: #ff0; text-decoration: none; } li { margin-bottom: 5px; line-height: 30px; list-style: none; background: url(navi_spacer.gif) no-repeat 15px 28px; } img.pfeil { float: left; display: block; width: 14px; margin-right: 5px; } #nav { float: left; clear: left; width: 160px; background: #060; padding: 5px; } #content { margin-left: 180px; padding: 10px; background: #060; height: 600px; } a { background: url(pfeil.jpg) no-repeat 0px 2px; padding: 7px 0px 7px 20px; } </style> </head> <body> <ul id="nav"> <li><a href="">Punkt 1</a></li> <li><a href="">Punkt 2</a></li> </ul> <div id="content"> <h1>Überschrift</h1> </div> </body> </html> Geändert von schorsch (31.03.2007 um 00:56 Uhr) |
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 |