zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden listenbasierendes menü aktiv breiter als hyperlink

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.10.2007, 08:07
css-flashed ;-))
neuer user
Thread-Ersteller
 
Registriert seit: 27.10.2007
Beiträge: 3
andretti befindet sich auf einem aufstrebenden Ast
Standard 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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.10.2007, 11:12
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.10.2007, 11:59
css-flashed ;-))
neuer user
Thread-Ersteller
 
Registriert seit: 27.10.2007
Beiträge: 3
andretti befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 28.10.2007, 13:27
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:50 Uhr.