Problem mit Flash-Buttons

[CP-control]

Hallo,
ich hoffe ihr könnt mir helfen und zwar hab ich ein Problem mit folgenden Flash-Buttons: http://cccpnews.ho.am/help/index.html
Wie man sehen kann, sind die Kategorien durch einen schwarzen Strich aufgeteilt außer bei der "Home" / "Kino" Fläche... wie fügt man dort ebenfalls diesen Strich als abgrenzung ein???
Hier ist die Style.css

* { margin:0; padding:0;}
body { font-family:Arial;}
/*==================list====================*/
#header .nav li { display:inline;}
#header .nav li a { display:block; float:left; background:url(1.gif); font-size:.86em; text-decoration:none; height:30px; line-height:30px; color:#545454; position:relative;}
#header .nav li a b { display:block;  background:url(7.gif) no-repeat right top; padding:0 35px 0 35px; cursor:pointer; }
#header .nav li a:hover { background:url(2.gif) left top repeat-x; color:#fff;}
#header .nav li a.current { background:url(2.gif) left top repeat-x; color:#fff;}
#header .nav li a.first b { background:url(6.gif) no-repeat left top; padding-left:55px; }
#header .nav li a.first:hover b { background:url(4.gif) no-repeat left top; padding-left:55px;}
#header .nav li a.first-current b { background:url(4.gif) no-repeat left top !important; padding-left:55px;}
#header .nav li a.last b { background:url(5.gif) no-repeat right top; padding-right:55px;}
#header .nav li a.last:hover b {background:url(3.gif) no-repeat right top;}
#header .nav li a.last-current {background:url(2.gif) left top repeat-x; color:#fff;}
#header .nav li a.last-current b {background:url(3.gif) no-repeat right top !important; padding-right:55px;}

Wenn man bei der folgenden Zeile statt right > left eintippt, erscheint zwar der schwarze Strich bei HOME / KINO, dafür aber ist jetzt der andere Strich bei HANDY / INTERNET weg.

Zeile:
#header .nav li a b { display:block; background:url(7.gif) no-repeat left top; padding:0 35px 0 35px; cursorointer; }

Ergebnis:
http://cccpnews.ho.am/help/index2.html

 

[lowsaxonian]

Moin,

wenn ich das richtig sehe, ist folgender Code in Deinem CSS dafür verantwortlich:

height:30px; line-height:30px

Da Du für den Button "Home" jedoch die Klasse "first" vergibst, in dem diese Linie nicht definiert ist, taucht sie in diesem Bereich auch nicht auf.

<link href="style.css" rel="stylesheet"><div id="header"><ul class="nav">
<li><a href="http://" class="first"><b>HOME&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></a></li>
<li><a href="http://"><b>&nbsp;KINO&nbsp;</b></a></li>
<li><a href="http://"><b>&nbsp;MUSIK&nbsp;</b></a></li>
<li><a href="http://"><b>&nbsp;HANDY&nbsp;</b></a></li>
<li><a href="http://" class="last"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;INTERNET</b></a></li></div> <br>

Man macht kein Layout mit HTML, sondern mit CSS. Für die Fettschrift könntest Du z.B. eine Klasse definieren und z.B. per <span> einbauen.
Dass Du kein Doctype verwendest, keinen Head und keinen Body definierst, liegt vermutlich daran, dass es sich hier um eine Testseite handelt. Trotzdem sollte man diese derart schreiben, dass sie von jedem Browser angezeigt werden kann.

Grüsse
low

 

[CP-control]

Danke für die Antwort..

Also das mit dem line-height:30px hab ich versucht, jedoch ändert sich nichts außer die Größe der Buttons.

Ich denke folgende Zeile muss dafür verantwortlich sein:
#header .nav li a b { display:block; background:url(7.gif) no-repeat right top; padding:0 35px 0 35px; cursorointer; }

Wenn man statt "right" > "left" schreibt, erscheint der Strich auf der anderen Seite, dabei verschwindet aber der Strich auf der rechten Seite.

Beispiel (right):
http://cccpnews.ho.am/help/index.html

Beispiel (left):
http://cccpnews.ho.am/help/index2.html


Was kann man da tun?

 

[lowsaxonian]

Was kann man da tun?

Moin,

wie ich bereits schrieb, liegt das Problem in Deiner Klasse "first". Ich habe die Klasse mal spasseshalber (mit Firebug) aus dem Code für den ersten Button entfernt und die gewünschte Linie war da. Also entweder die Klasse entfernen oder entprechend modifizieren.

#header .nav li a b { display:block; background:url(7.gif) no-repeat right top; padding:0 35px 0 35px; cursorointer; }

Diese Zeile hat meines Erachtens nichts mit einer Linie zu schaffen. Die Linie wird im CSS definiert und stammt nicht aus der Background-Grafik.

Grüsse
low

 

[CP-control]

DANKE !!!
Nachdem ich die Klasse "first" entfernt habe, sind alle Linien da :-|
Endlich wurde das Problem gelöst!