[freshman13]

Hallo,

tolles Forum hier!!!

Bisher wurde ich immer fündig bei der Lösung meiner CSS-Probleme aber diesmal leider nicht, vielleicht könnt ihr mir paar Tips geben.

Zum Problem:

Ich möchte ein Menü erstellen, davon soll jeder Menüpunkt eine eigene Farbe bekommen. Außerdem soll sich beim Hover-Effekt die Höhe vergrößern jedoch die dahinterliegende Leiste so bleiben wie zuvor.

Schwer zu erklären deshalb der verkürzte Code:

Html:

<table cellpadding="0" cellspacing="0">
  <tr id="navi_bar">
    <td>
	<ul id="navi">
	  <li id="blue"><a href="index.html">INFORMATIVES</a></li>
	  <li id="grey"><a href="index.html">KONTAKT</a></li>
	</ul>                        
    </td>
  </tr>                
</table>

CSS:

#navi_bar {
width : 1024px;
height : 27px;
background-color : #CC9933;
z-index:1;
}
#navi {
padding : 0;
margin : 0;
list-style : none;
}
#navi li {
float : left;
display : block;
margin : 0;
width : 130px;
height : 27px;
}
#navi li a{
display : inline;
float : left;
width : 130px;
height : 27px;
text-align : center;
text-decoration : none;
color:#FFFFFF;
}
#blue:hover{
background : #6600FF;
z-index : 200;
height : 35px;
}
#grey:hover {
background: #666667;
z-index:200;
height:35px;
}

So wie es jetzt ist passt sich die <tr id="navi_bar"> dem Inhalt an, table-layout:fixed brachte da keine Lösung. Das Problem bekomme ich in den Griff wenn ich die id="blue" und id="grey" in die <a>-tag´s setzte jedoch kommt das nicht in Frage da die Vorlage in ein CMS soll und ich auf die <a>-Tags ohne größere Eingriffe kein Zugriff habe.

Außerdem zickt hier auch noch der IE wieder rum, mit dem FF klappts ansatzweise.

Bin für jeden Tip dankbar!!!

[fricca]

Wenn du hier schon eine Weile mitliest, müsstest du doch auch gemerkt haben, dass Codeschnipsel nicht ausreichen.
http://xhtmlforum.de/40080-f-r-frage...twortende.html

Zu deiner Breite: Folge folgendem Link und lies nach, was unter "Applies to" steht.
CSS 2.1, 10.2 Content width: the 'width' property

Es stellt sich die Frage, was die Tabelle überhaupt in deinem Code zu suchen hat.

[freshman13]

Ok, ich habs soweit gelöst nur will der IE 6 als einzigster nicht

hier der Link

Jemand ne Idee

Danke im Vorraus

[fricca]

Zitat von freshman13

Ok, ich habs soweit gelöst

Bitte, gern geschehen.

nur will der IE 6 als einzigster nicht

Der kann nur Links hovern.

Du brauchst auch kein Div um deine Liste. Du hast bereits ein ul-Element, das deinen Hintergrund bekommen kann.

[freshman13]

Vielen Dank fricca!

Muß ich hier auf JS zurückgreifen? Verdammt, ich bin nur Java mächtig.. hast du mir in dieser Sache vielleicht auch noch nen Tip?

Gruß freshman

[fricca]

Zitat von freshman13

Muß ich hier auf JS zurückgreifen?

Nein, wieso denn? Leg deinen Hover-Effekt einfach auf die Links.

[freshman13]

Nochmals Danke,

hab ich gemacht aber jetzt übernimmt er nur eine Farbe. Habs online gestellt damit du es dir anschauen kannst.

[fricca]

Sicher, es wird nur eine Farbe verwendet, nämlich die Farbe des letzten Vorkommens deines Selektors #navi li a:hover. Der ist sicher nicht geeignet, wenn du jeden Menüpunkt separat ansprechen willst.
#blue a:hover
#grey a:hover

Ich glaube, du brauchst ein gutes Buch für Einsteiger: Little Boxes.

[freshman13]

Und wie umgehe ich dieses Problem? Gibt es dazu eine Lösung?

[fricca]

Puh.
Ich habe in meinem Vorposting die Lösung in Rot markiert.