Problem mit Unterzeile bei Navigation

[LuvShining]

Hallo,

ich habe soeben versucht eine Navigations-Unterbar "flexibel" zu gestalten.(siehe Bild 1, nav_normal.jpg) Diese Navigationsbar soll im Gebrauch so aussehen, dass sie sowohl aus einer einzelnen Unterzeile bestehen kann als auch aus zweien. In dem Fall hätte ich allerdings gern, dass unter die erste Zeile ein 2px breiter, weisser Strich ist (siehe Bild 3, nav_wunsch.jpg).

Jetzt habe ich es auch fast so hinbekommen. Nur, fehlt mir beim einer Zwei-Teilung der weiße Strich, denn wenn ich den eintrage, geht er in Reihe Zwei nur so weit, wie auch das Menü eingetragen ist (siehe Bild 2, nav_hover.jpg).

Zweites Problem, beim Hover sollen die Buttons einen Rahmen und eine andere Hintergrundfarbe haben. Klappt auch, aber sobald man in Zeile zwei auf über einen der hinteren Buttons geht, verrutschen die Buttons in der darüberliegenden Zeile, als auch umgekehrt. (siehe Bild 2, nav_hover.jpg)

Kann mir jemand bei diesen beiden Problemen helfen?

Hier der CSS-Code:

#nav_main {
    width: 100%;		
    float:left;         
    border-top: 2px #FFFFFF solid;
   border-bottom: 2px #FFFFFF solid;
    line-height: 0px;
}

#nav_main ul {
    float:left;
    display:inline;		
    margin:0;			
    padding: 0;
    margin-left: 15px;  
}

#nav_main ul li {
    float: left;
    display:inline;     
    margin: 0;
    padding: 0;
    font-size: 0.9em;
    line-height: 0.8em;
    list-style-type: none;
}

#nav_main ul li a {
    display:block;
    width: auto;
    font-size: 1em;
    background: transparent;
    text-decoration: none;
    color: #000;
    margin: 0;
    padding: 0.5em 0.5em 0.5em 0.5em;
}

#nav_main ul li a:hover {
    background: #eee;
    color: #0639A2;
    text-decoration: none;
	font-weight:bold;
	border:#72787B 1px solid;
}

HTML-Code

<div id="tabsI">
<ul>
<li><a href="#"><span>Button</span></a></li>
<li><a href="#"><span>Button</span></a></li>
<li><a href="#"><span>Button</span></a></li>
<li><a href="#"><span>Button</span></a></li>
<li><a href="#"><span>Button</span></a></li>
<li><a href="#"><span>Button</span></a></li>
[etc.]
</ul>
</div>

Viele Grüße
Nadine

 

[Maik]

Hi,

könntest du bitte den entsprechenden Quellcode der Navigation posten, denn das HTML-Markup "korrespondiert" nicht mit dem Stylesheet.

 

[LuvShining]

Oops, sorry, falsch kopiert:

#tabsI {
      float:left;
      width:100%;
      background:white;
      font-size:100%;
      font-weight:bold;
      letter-spacing:1px;
      line-height:normal;
	  border-bottom:1px solid #9C9C9C;
      }
    #tabsI ul {
	  margin:0;
	  padding:10px 10px 0 15px;
	  list-style:none;
      }
    #tabsI li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsI a {
      float:left;
      background:url("tableftI.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsI a.abstand {
	  float:left;
      background:url("tableftI.gif") no-repeat left top;
      margin:0;
      padding:0 22px 0 5px;
      text-decoration:none;
     }
      
    #tabsI a span {
      float:left;
      display:block;
      background:url("tabrightI.gif") no-repeat right top;
      padding:3px 15px 2px 6px;
      color:#FFF;
      }

    #tabsI a span {float:none;}

    #tabsI a:hover span {
      color:#FFF;
      }
    #tabsI a:hover {
      background-position:0% -42px;
	        }
    #tabsI a:hover span {
      background-position:100% -42px;
      }

und zugehöriger HTML wie oben.

 

[Quaese]

Hi,

was ich auf die Schnelle sehe - das Problem mit dem "Springen" der Linkbuttons könnte seine Ursache im 1 Pixel
breiten Rahmen haben, der in #nav_main ul li a:hover zugewiese wird. Da dieser vorher nicht vohanden war, wird der
Button um zwei Pixel breiter und damit reicht eventuelle der Platz im Navigationselement nicht mehr aus.
Als Lösung könntest Du für #nav_main ul li a ebenfalls einen 1-Pixel-breiten Rahmen mit der Hintergrundfarbe erstellen.

Ciao
Quaese

 

[LuvShining]

Ja, dass klang logisch. Leider hat aber auch dieser Trick nicht funktioniert :-(

 

[Maik]

Hi,

das fette Schriftgewicht in #nav_main ul li a:hover sorgt ebenfalls für ein Verschieben der übrigen Links.

 

[LuvShining]

Ja, das leuchtet soweit schon ein.

Was mich an dieser Navigationszeile aber noch immer ärgert und wundert ist die Tatsache, das zum Beispiel wenn hier zwei Zeilen in einer Liste erzeugt werden der erste Link/Button aus der zweiten Zeile an das Ende der ersten Zeile hochspringt, wenn ich einen hover bei dem ersten Link/Button in der ersten Zeile erzeuge.
Dieser "Fehler" tritt aber nur auf, wenn ich die Seite im IE betrachte. Der FF lässt alles in der korrekten Reihenfolge verweilen.

Auch hätte ich, nur der Optik halber, halt noch immer einen Strich in weiss, 1px zwischen Zeile 1 und Zeile 2 (siehe Bild 3). Die einzige Lösung die ich hierfür gefunden habe wäre ein Zusatz "border-bottom: #fff 1px solid" bei #nav_main und dann die zweimalige Aufzählung im HTML-Code

<div id="nav_main"> 
<ul>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
[etc.]
</ul></div>

<div id="nav_main"> 
<ul>
<li><a href="#">Button 11</a></li>
<li><a href="#">Button 12</a></li>
[etc.]
</ul>
</div>

Dann verrutscht nichts mehr in den Zeilen und auch der Strich für die Optik ist da.
Trotzdem empfinde ich es als eine sehr unschöne Lösung.

Gibt es eine bessere?

Gruß, Nadine