text wird mit border-bottom nicht komplett unterstrichen

[dagunn]

Hallo liebes forum,
ich hätte da ein kleines Problem mit den a tag -.-

Ich hab mithilfe eines DIV-tags und darin enthaltenen p und a tags eine navigation gebaut,
doch leider wird der border-bottom nicht komplett durchgezogen, da hinter dem link iwie noch ein leerzeichen ist!
(siehe fotos)

Ich habe es auch vorher bei .menulink {margin:0px; und padding:0px;} probiert...
Hat da vielleicht jemand eine idee was man da tuen kann ?


Fotos:
ImageShack® - Online Photo and Video Hosting (falsch)
ImageShack® - Online Photo and Video Hosting (wäre richtig vom format her, allesdings ist das immer bei letzten link so, sobald ich einen neuen link hinzufügen wird dieser dann falsch :sad:)

Code:

<div class="header">
<div class="navi">

<p class="menu">
<a href="#" class="menulink" id="rot">&nbsp;Inhalte</a> 
<a href="#" class="menulink" id="gelb">&nbsp;Kontakt</a> 
<a href="#" class="menulink" id="blau">&nbsp;Mehr anzeigen</a>  
</p> 

</div> 
</div>

CSS:

.navi { position: relative; height:100px; }  
.menu { position: absolute; bottom: 0; background-color:#efe; min-height:50px !important; word-spacing: 0px; }  
.menulink { display:inline-block; color:black; min-height:50px !important; border-left:1px solid #000; width:auto; font-weight:bold; text-decoration:none;  }
.menulink:hover {  min-height:47px !important; }  
#rot:hover { border-bottom:3px solid #FF0000; }  
#gelb:hover { border-bottom:3px solid #FFFF00; }  
#blau:hover { border-bottom:3px solid #0000FF; }

Seite im Live-Modus:Sportfest - News

 

[Körnerbrötchen]

Hey dagunn und herzlich willkommen hier auf html.de,
wir müssen leider an deinem Code etwas grundlegend ändern. Eine Navigation baut man über Listen auf, zudem gibt es später vielleicht mehrere blaue oder rote Navigationspunkte. Also lieber eine Klasse als eine ID vergeben. Denn eine ID darf man nur einmal verwenden, eine Klasse mehrmals. Für erzwungene Leerzeichen gibt es übrigens keinen Grund. Weg damit! Somit müsste dein HTML-Code so aussehen:

<div class="header">
<div class="navi">

<ul class="menu">
<li class="rot"><a href="#">Inhalte</a></li>
<li class="gelb"><a href="#">Kontakt</a></li>
<li class="blau"><a href="#">Mehr anzeigen</a></li>  
</ul> 

</div> 
</div>

Schnell noch deinen CSS-Code umgebastelt:

.rot:hover { border-bottom:3px solid #FF0000; }  
.gelb:hover { border-bottom:3px solid #FFFF00; }  
.blau:hover { border-bottom:3px solid #0000FF; }

Dadurch, dass wir den Listenpunkten die Klasse zuweisen sind wir flexibler, denn über .rot a wären wir auch ganz einfach wieder beim Link. Das benutzen wir jetzt auch (so ähnlich).

.menu a {
display:inline-block;
color:black;
min-height:50px !important;
border-left:1px solid #000;
font-weight:bold;
text-decoration:none;
padding:0 5px; /* So fügen wir ein bisschen Innenabstand bei den Links ein */
}
.menu a:hover {  min-height:47px !important; }

Schau mal, ob es so schon funktioniert.

Gruß
Körnerbrötchen

 

[dagunn]

mh okay, vielen dank, hab dann jetzt erstmal die Navigation umgebaut, aber das problem mit dem border-bottom problem besteht immernoch -.-
hier nochmal die seite zum angucken

Sportfest - News

 

[threadi]

Deiner Seite fehlt immer noch der richtige HTML-Code. Besonders der fehlende Doctype führt zu Darstellungsproblemen, z.B. auch bei deinem "Problem".
[Invalid] Markup Validation of http://timowiki.site90.net/alt/schmiindex.php - W3C Markup Validator