✔ Menü verschiebt sich bei hover (bold)

[whiterussian]

Hallo!

Wieder mal ein Listenmenü Problem (horizontal)
Es sieht eigentlich alles ganz gut aus, die Links verschieben sich jedoch bei hover (font-weight: bold; )

CSS:

#wrapper {
	position:absolute;
	width:370px;
	height:25px;
	z-index:5;
	top: 261px;
	left: 36px;
}

 ul#navlist
{
	margin: 0;
	padding: 0;
	line-height: 22px;
	width: 360px;
	display: inline;

}

#navlist li
{
	margin: 0;
        padding: 0;
	float: left;
	list-style-type: none;
	line-height: 22px;
	display: inline;
}

#navlist a, #navlist a:link, #navlist a:visited, #navlist a:hover, #navlist a:visited:hover {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333; 
	line-height: 22px;
	display: inline;
	margin: 0;
       padding: 0;
	text-decoration: none; 

}

#navlist a:hover, #navlist a:visited:hover {
	font-weight: bold;	
}

span.trennstrich {
	font-weight: bold;
	color: #6a80a3;
}

und HTML:

<div id="wrapper">
	<ul id="navlist">
    
<li><a href="index.html" title="zur Startseite" target="_self"><span class="trennstrich">|&nbsp;</span>Home</a></li>

<li><a href="unternehmen.html" title="Unternehmen" target="_self"><span class="trennstrich">&nbsp;|&nbsp;</span>Unternehmen</a></li>

<li><a href="leistungen.html" title="Leistungen" target="_self"><span class="trennstrich">&nbsp;|&nbsp;</span>Leistungen</a></li>

<li><a href="kontakt.html" title="Kontakt" target="_self"><span class="trennstrich">&nbsp;|&nbsp;</span>Kontakt<span class="trennstrich">&nbsp;|</span></a></li>

</ul>
	</div>

oder kann ich das auch anders lösen (die Vertikalen Striche müssen sein ...)

 

[Maik]

Hi,

entweder stellst du das Schriftgewicht für die Links grundsätzlich auf bold, oder du definierst für die einzelnen Menüpunkte eine "individuelle" fixe Breite, ansonsten wirst du mit diesem "normalen" Browserverhalten leben müssen.

Der vertikale Trennstrich liesse sich alternativ mit der border-Eigenschaft einrichten:

ul#navlist
{
        margin: 0;
        padding: 0;
        line-height: 22px;
        width: 360px;
        display: inline;
}

#navlist li
{
        margin: 0;
        padding: 0;
        float: left;
        list-style-type: none;
        line-height: 22px;
        display: inline;
        border-right:1px solid #6a80a3;
        text-align:center;
}

#navlist li.first { border-left:1px solid #6a80a3; }

#navlist li#home {
width:50px;
}
#navlist li#unternehmen {
width:100px;
}
#navlist li#leistungen {
width:85px;
}
#navlist li#kontakt {
width:65px;
}

<div id="wrapper">
     <ul id="navlist">
         <li id="home" class="first"><a href="index.html" title="zur Startseite" target="_self">Home</a></li>
         <li id="unternehmen"><a href="unternehmen.html" title="Unternehmen" target="_self">Unternehmen</a></li>
         <li id="leistungen"><a href="leistungen.html" title="Leistungen" target="_self">Leistungen</a></li>
         <li id="kontakt"><a href="kontakt.html" title="Kontakt" target="_self">Kontakt</a></li>
     </ul>
</div>

 

[whiterussian]

Tja, was soll ich sagen.

Wieder einmal grosse Klasse von Dir

Wenn ich jetzt noch ne Bewertung abgeben könnte ...
(Keine Sorge, mach ich, sobald möglich)

Thx,
whiterussian

 

[Maik]

Keine Ursache, gern geschehen

Die nächste Bewertung ist wieder möglich, wenn du neun weitere User bewertet hast, denn ein User kann erst nach zehn anderweitig vergebenen Bewertungen erneut bewertet werden, und dient als Schutzmechanismus gegen einen Mißbrauch der Funktion.