|
|||
listenbasierendes menü aktiv breiter als hyperlink
aloha!
ich habe ein listenbasierendes menü, wo ich den gerade gklickent, ergo aktiven link inaktiv machen un eine aktiv-farbe geben möchte; so, wie ich das angehe, ist aber das "aktive" listenelement immer breiter, als wenn dieses lediglich das hyperlink-listenelement wäre hier mal zwei seiten mit dem code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Unbenanntes Dokument</title> <style type="text/css"> html *{margin:0;padding:0;} html,body{ behavior:url("body_and_soul_balance_stylesheet/csshover.htc");} #linkrow { margin-top:10px; width:720px; height: 25px; background-color: #FFFAEA; } /* ++++++++++++++++++++++++++++++++++++++ Linkmenü - Navigation ++++++++++++++++++++++++++++++++++++++ */ #linkliste { list-style-type: none; text-align:left; margin: 0 5px; padding: 0; } #linkliste li { float: left; position:relative; list-style-type: none; } #linkliste li a, .active1, .active2, .active3, .active4, .active5, .active6, .active7, .active8 { display: block; height:18px; margin-right:1px; padding:2px 5px; font-size: 13px; text-align: left; text-decoration: none; font-weight: bold; border:1px solid #CC6600; background-color: #FFFAEA; } *>#linkliste li a, .active1, .active2, .active3, .active4, .active5, .active6, .active7, .active8{ display: block; height:auto; margin-right:1px!important; padding:2px 5px; font-size: 13px; text-align: left; text-decoration: none; font-weight: bold; border:1px solid #CC6600; background-color: #FFFAEA; color:#993300; } #linkliste li a{color:#CC6600!important;} .pn1, .active1{width:47px;} .pn2, .active2{width:115px;} .pn3, .active3{width:155px;} .pn4, .active4{width:73px;} .pn5, .active5{width:79px;} .pn6, .active6{width:88px;} .pn7, .active7{width:79px;} .pn8, .active8{width:64px;} /* ++++++++++++++++++++++++++++++++++++++ Link- Submenü - Navigation ++++++++++++++++++++++++++++++++++++++ */ #linkliste li ul {position: absolute; top: 21px;left:0;display:none;} #linkliste li ul li{filter:alpha(opacity=100);-moz-opacity: 1; opacity: 1;} #linkliste li ul li a{padding-top:-1px; border-top:none!important;} #linkliste li:hover ul{display:block;} </style> </head> <body> <div id="linkrow"> <ul id="linkliste"> <li class="active1">Problem</li> <li class="pn4"><a href="problem_2.html" title="Kontakt" target="_self">Problem_2</a></li> </ul> </div><!-- ende div linkrow --> </body> </html> Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Unbenanntes Dokument</title> <style type="text/css"> html *{margin:0;padding:0;} html,body{ behavior:url("body_and_soul_balance_stylesheet/csshover.htc");} #linkrow { margin-top:10px; width:720px; height: 25px; background-color: #FFFAEA; } /* ++++++++++++++++++++++++++++++++++++++ Linkmenü - Navigation ++++++++++++++++++++++++++++++++++++++ */ #linkliste { list-style-type: none; text-align:left; margin: 0 5px; padding: 0; } #linkliste li { float: left; position:relative; list-style-type: none; } #linkliste li a, .active1, .active2, .active3, .active4, .active5, .active6, .active7, .active8 { display: block; height:18px; margin-right:1px; padding:2px 5px; font-size: 13px; text-align: left; text-decoration: none; font-weight: bold; border:1px solid #CC6600; background-color: #FFFAEA; } *>#linkliste li a, .active1, .active2, .active3, .active4, .active5, .active6, .active7, .active8{ display: block; height:auto; margin-right:1px!important; padding:2px 5px; font-size: 13px; text-align: left; text-decoration: none; font-weight: bold; border:1px solid #CC6600; background-color: #FFFAEA; color:#993300; } #linkliste li a{color:#CC6600!important;} .pn1, .active1{width:59px;} .pn2, .active2{width:115px;} .pn3, .active3{width:155px;} .pn4, .active4{width:73px;} .pn5, .active5{width:79px;} .pn6, .active6{width:80px;} .pn7, .active7{width:79px;} .pn8, .active8{width:64px;} /* ++++++++++++++++++++++++++++++++++++++ Link- Submenü - Navigation ++++++++++++++++++++++++++++++++++++++ */ #linkliste li ul {position: absolute; top: 21px;left:0;display:none;} #linkliste li ul li{filter:alpha(opacity=100);-moz-opacity: 1; opacity: 1;} #linkliste li ul li a{padding-top:-1px; border-top:none!important;} #linkliste li:hover ul{display:block;} </style> </head> <body> <div id="linkrow"> <ul id="linkliste"> <li class="pn1"><a href="problem.html" title="Kontakt" target="_self">Problem</a></li> <li class="active4">Problem_2</li> </ul> </div><!-- ende div linkrow --> </body> </html> Geändert von andretti (28.10.2007 um 08:09 Uhr) |
Sponsored Links |
|
||||
Und wo ist jetzt das Problem?
Was soll die unterschiedliche Breite bringen? Schon mal die Schrift vergrößert? Aktive Links markiert man am besten mit <strong> nicht mit einer extra Klasse.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
Sponsored Links |
|
|||
aloha!
danke für die rasche antwort: nun, ich weiß ja net, ob du das ausprobiert hast, ich habe den code ja gepostet und auch die datei zum ansehen hochgeladen. es ist so, dass die hyperlinks generell bold sind, und auch der aktitve ist natürlich bold; ich will ja lediglich den "aktiven" nicht klickbar machen und mit einer andren farbe versehen; das ist jetzt unabhängig von schriftgröße, schriftart oder sonstwas; irgendwie wird das padding im listenelement anders angenommen als im <a>- tag. ich habe es jetzt mal so gelöst, dass ich dem listenelement das padding gegeben habe, das funktioniert. |
|
||||
Du kannst strong auch eine andere Farbe usw. geben. Nur wird es auch ohne CSS und für Screenreader anders dargestellt.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Drop down Menü bleibt aktiv nach zurück mit back button vom Firefox | gombi | CSS | 0 | 18.01.2010 16:34 |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 09:55 |
automatisch breiter menü | rafa | CSS | 0 | 22.07.2009 17:29 |
Unterschied Frames-CSS | josshh | CSS | 11 | 29.01.2008 23:14 |
Höhenangabe für Hintergrund auf 100% funktioniert nicht! | Pumpkin | CSS | 7 | 29.08.2005 14:52 |