Bold verschiebt navigation

[Corraggiouno]

hi,

ich habe ein kleines Problem mit meiner Navigation. Wenn ich eine Link anklicke, wird dieser fett hevorgehoben; gleichzeitig wird dabei das ganz - aufgrund der Bold Definition - zur Seite verschoben. Dies möchte ich vermeiden.
kann mir da jemand einen Tipp geben?
ph
css-code:

* {margin: 0px; padding: 0px;}

html 
{
height: 100.3%;
font-family: Verdana;
font-style: normal;
font-size: 0.8em;
}

body 
{
text-align: center;
background: url(../images/background.png) repeat-x;
}

div#wrapper 
{
width: 1120px;
height: 600px;
margin: 50px auto;
/*background: blue;*/
}

h1
{
background: url(../images/logo1.png) no-repeat;
background-position: center;
height:198px;
text-indent: -999em;
}


ul
{
background: url(../images/background_nav.png) repeat-x;
height: 40px;
margin: -38px 300px;


}


li
{
/*background: url(../images/abgrenzung.pn) no-repeat;*/
padding: 0 20px;
line-height: 3.0em;
display:inline;
list-style-type: none;
}


a 
{
text-decoration:none;

}

a:link
{

text-decoration:none;
color:#ffffff;
}

a:visited
{
color:#ffffff;

}

a:hover
{
text-decoration:underline;
color:#ffffff;

}

.link_mark
{
font-weight:bold;
color:#ffffff;
padding: 0 20px;
}

 

[lowsaxonian]

Moin,

in Deinem Code ist da nichts zu entdecken

a:hover
{
text-decoration:underline;
color:#ffffff;
}

auf der verlinkten Site auch nicht.

Aber Du kannst dieses Problem generell vermeiden, indem Du dem gehoverten Feld eine feste Breite zuweist.

Grüße
low

 

[Corraggiouno]

habe meinen code wie folgt geändert...............

a:hover
{
text-decoration:underline;
color:#ffffff;
width: 180px;
}

...............irgendwie hat sich da nichts verbessert............liegt das überhaupt am hover?..........die links verschieben sich leider immer noch wenn ich diese anklicke............
http://ok.dyntec.de/home.html

 

[Elroy]

Hallo.

Mit dem hover hat das nichts zu tun.
Versuch mal deinem Listenfeld generel eine feste Breite zu geben.

Gruss
Elroy

 

[Corraggiouno]

li
{
/*background: url(../images/abgrenzung.pn) no-repeat;*/
padding: 0 20px;
line-height: 3.0em;
display:inline;
list-style-type: none;
width: 90px;
}

.......ok, habe meinem li eine feste Breite gegeben; leider werden die einzelnen Links beim Anklicken immer noch verschoben............. ph

 

[lowsaxonian]

hm, bei mir verschiebt sich auf dem IE7 nix. Naturgemäß werden die Links etwas breiter, aber das Menü an sich bleibt gleich.
Hast Du mal den Cache Deines Browsers geleert ?

 

[Corraggiouno]

mmh, habe meine Seite auch mal mit IE 8 aufgerufen.
......vielleicht habe ich mein Problem nicht ganz genau erklärt. Also wenn ich die Links anklicke werden diese ja Fett markiert. Aber beim Klicken verschieben sich - aufgrund von "bold" die nebenstehenden listen-Elemente des angeklicktes links. Wie kann ich dies verbessern, damit das bzw. die nebenstehenden Listen - Elemente beim Anklicken nicht bewegt werden?

 

[threadi]

Gib ihnen eine feste Breite. Jedem einzelnen Link innerhalb der Menüpunkt. Und mache sie auch zu Blockelementen.

 

[Corraggiouno]

....ich dachte das man li - element nicht zu Block-Elementen machen darf?

 

[threadi]

Doch, kann man. Aber ich sprach vom Link innerhalb des <li>.

 

[Corraggiouno]

kannst du mir vielleicht einen Code-Schnipsel zeigen, wie du das meinst; kann mir das nicht so richtig vorstellen............

 

[Corraggiouno]

habs jetzt mal wie folgt geändert:

li#home
{
width: 90px;	
}

li#technik
{
width: 105px;
}

html-code:

<li id="home" class="link_mark"><a href="home.html">Home</a></li>
<li id="technik"><a href="technik.html">Technik</a></li>

ich hoffe ich hab's richtig definiert; leider ist immer noch ein "Verschiebeffekt" der links zu sehen

 

[threadi]

Nein, ich meinte es eher so:

li#home a {
 display: block;
 float: left;
 width: 90px;
}

etc.pp.

 

[Corraggiouno]

also ich kann mir nicht helfen; das ist irgendwie ein "Verschlimmbesserung" http://ok.dyntec.de/home.html

<ul>
<li id="home" class="link_mark"><a href="home.html">Home</a></li>
<li id="technik"><a href="technik.html">Technik</a></li>
<li id="referenzen"><a href="referenzen.html">Referenzen</a></li>
<li><a href="preise.html">Preise</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>

li#home a
{
display:block;
float:left;
width: 60px;	
}

li#technik a
{
display:block;
float:left;
width: 60px;
}

li#referenzen a
{
display:block;
float:left;
width: 60px;
}

 

[threadi]

Für die letzten beiden Punkte musst Du auch eine Breite angeben.

Und dann müsstest Du die Breitenangaben so anpassen, dass sie alle Menüpunkte zusammen die gesamte Breite einnehmen.

 

[Corraggiouno]

...dann muss ich dies auch auf jeder .html-Seite in jedem Link die id definieren, oder?

 

[threadi]

Nur im Menü wo Du dieses Problem hast. Und ja, das müsste auf jeder Seite im HTML-Code gemacht werden. Wenn Du php verwendest fällt das natürlich etwas einfacher.

 

[Corraggiouno]

......habe dies jetzt auf jeder Seite so definiert;

<li id="home" class="link_mark"><a href="home.html">Home</a></li>
<li id="technik"><a href="technik.html">Technik</a></li>
<li id="referenzen"><a href="referenzen.html">Referenzen</a></li>
<li id="preise"><a href="preise.html">Preise</a></li>
<li id="kontakt"><a href="kontakt.html">Kontakt</a></li>

..........und im css - code .....

li#home a
{
display:block;
float:left;
width: 70px;	
}

li#technik a
{
display:block;
float:left;
width: 70px;
}

li#referenzen a
{
display:block;
float:left;
width: 70px;
}

li#preise a
{
display:block;
float:left;
width: 60px;
}

li#kontakt a
{
display:block;
float:left;
width: 60px;
}

......aber irgendwie wird das ganz immer noch verschoben?? ph

 

[threadi]

Bei mir im Firefox nicht. Welchen Browser hast Du?

 

[lowsaxonian]

IE7 auch nicht. Wenn Du den Browser-Cache löschen würdest, kommt ggf. die richtige Anzeige.
Die Breite vll für alle gleich groß (etwas breiter) ansetzen, dann siehts homogener aus.