horizontales Menü hover

[tombo82]

hallo, ich ma wieder,

ich muss ein Menü erstellen, und bei Mousehover muss sich der aktuelle Link auf dem der Mauszeiger sich befindet, eine hintergrundgrafik anzeigen,
und darf auch keine border-bottom aber (links/rechts/oben) haben...
Kein Ding... läuft...

.navilink{padding-left:10px;padding-right:10px;font-weight:bold;color:#00600E;border-bottom-style:solid;border-width:1px;border-color:black;}

.navilink:hover {padding-left:9px;padding-right:9px;background-color:#00600E;background-image: url(/spider/images/rtl2009/RTLde_navi-verlauf.jpg);background-repeat:repeat-x;color:#ffffff;border-bottom-style:none;border-top-style:solid;border-left-style:solid;border-right-style:solid;border-color:black;border-width:1px;}

.linie {border-bottom-style:solid;border-color:black;border-width:1px;width:925px;margin-left:5px;margin-right:15px;}

mein Problem ist, das ich darunter unter den Links, eine horizonatle linie über die Komplette Seiten haben muss, welche sich unter den Links befindet.
Beim Mousehover soll dann die Linie unter dem Link, wo der Mauszeiger gerade draufsteht verschwinden (nicht die komplette) . Hinzukommt das ich einen Abstand zwischen den Links habe, und somit keine durchgängige Linie bekomme...

<div id="MainDiv" style="width:946px;">
<span class="test">
  <div >
<a href="#" class="navilink"> 0</a>
      <a href="#" class="navilink">1</a>
			<a href="#" class="navilink">2</a>
			<a href="#" class="navilink">3</a>
			<a href="#" class="navilink">3</a>
			<a href="#" class="navilink">4</a>
			<a href="#" class="navilink">5</a>
			<a href="#" class="navilink">6</a>
			<a href="#" class="navilink">7</a> 
 </div>
</span>
</div>

 

[Maik]

Hi,

dein Vorhaben liesse sich beispielsweise so umsetzen:

<div id="MainDiv" style="width:946px;">
     <div id="NaviDiv">
          <ul>
              <li><a href="#" class="navilink">0</a></li>
              <li><a href="#" class="navilink">1</a></li>
              <li><a href="#" class="navilink">2</a></li>
              <li><a href="#" class="navilink">3</a></li>
              <li><a href="#" class="navilink">4</a></li>
              <li><a href="#" class="navilink">5</a></li>
              <li><a href="#" class="navilink">6</a></li>
              <li><a href="#" class="navilink">7</a></li>
          </ul>
     </div>
</div>

#NaviDiv ul {
margin:0;
padding:0;
list-style:none;
}
#NaviDiv ul li {
display:inline;
}
#NaviDiv ul .navilink {
padding-left:10px;
padding-right:10px;
font-weight:bold;
color:#00600E;
border-bottom-style:solid;
border-width:1px;
border-color:black;
float:left;
}
#NaviDiv ul .navilink:hover {
padding-left:9px;
padding-right:9px;
background-color:#00600E;
background-image: url(/spider/images/rtl2009/RTLde_navi-verlauf.jpg);
background-repeat:repeat-x;
color:#ffffff;
border-bottom:none;
border-top-style:solid;
border-left-style:solid;
border-right-style:solid;
border-color:black;
border-width:1px;
}

Für das Erstellen eines "Tab-Menüs" (Reiterkarten auf einem durchgezogenen Rahmen) empfehle ich dir aber diese Beispiele:

• http://css.maxdesign.com.au/listamatic/horizontal05.htm
• http://css.maxdesign.com.au/listamatic/horizontal08.htm
• http://css.maxdesign.com.au/listamatic/horizontal11.htm

Und noch ein Hinweis zu deinem HTML-Code: Das Inline-Element <span> darf kein Block-Element (z.B. <div>) enthalten, sondern nur weitere Inline-Elemente oder Text - siehe hierzu die HTML-Elementreferenz für Inline-Elemente. Aus diesem Grund hab ich es in meinem Beispielcode auch entfernt.

mfg Maik