Kleines Problem mit der navi

[Hammelmen]

Hallöle,

ich hab da so ein kleines problem. Ich tu gerade einbischen üben und hab mir eine Seite mit html und css gebaut! Was jetzt nicht schwer war, aber ich hab da in der navi ein kleine problem und komm einfach nicht drauf warum es nicht geht.
Ich möchte das die haupt navi im hover effekt den button andert was ja auch geht aber der wird nicht ganz angezeigt.



css code:

div#headercontainer div#header ul#navi {
position:absolute;
top:209px;
left:11px;
list-style:none;
}

div#headercontainer div#header ul#navi li {
padding:9px 8px 0 0;
float:left;
text-transform:uppercase;
text-align:center;
font-size:11px;
font-weight:bold;
background:url(../images/button_1.png) 0 0 no-repeat;
width:109px;
height:21px;
}

div#headercontainer div#header ul#navi li a {
color:#fff;
text-decoration:none;
}

div#headercontainer div#header ul#navi li a:hover,
div#headercontainer div#header ul#navi li.active a {
color:#fff;
text-decoration:none;
font-size:13px;
background:url(../images/button_2.png) 0 0 no-repeat;
width:109px;
height:21px;
}

vielleicht kann mir jemand helfen?

 

[brollius]

AW: Kleines Problem mit der navi

sind die Buttongrafiken(png Bilder) evt.grösser als im Code?

 

[hubspe]

AW: Kleines Problem mit der navi

Moin,

also li würde ich die Grafiken keinesfalls geben.
Schau dir mal hier an wie man eine teilgrafische navi macht.

 

[Hammelmen]

AW: Kleines Problem mit der navi

vielen dank für eure hilfe , aber das hilft mir auch nicht weiter.

ah aj brollius ich musste schon noch margin dazu setzen damit das richtig
dargestellt wird, aber die grössen angaben sind richtig.

trotzdem vielen dank.

 

[hubspe]

AW: Kleines Problem mit der navi

vielen dank für eure hilfe , aber das hilft mir auch nicht weiter.

warum nicht??

Wenn du das Tut verstanden hast und umsetzt sollte das ohne Probleme passen.

 

[hedoo]

AW: Kleines Problem mit der navi

Hallo Hammelmen,
so wird das glaube ich auch nicht funtkionieren.
Du hast einmal einem <li> ein Hinterfrungbild zugewiesen, den hover-Effekt aber auf den Link <a> angewandt.
Da der Link durch das padding vom <li> aber nicht die ganze Breite einnimmt, wird der hover-Effekt erst bei Beginn des Textes(Link) angezeigt.
Besser wäre du weist nicht dem Listenpunkt, sondern dem Link das background-image zu. Mit einem padding um den Link kannst dann und du das ganze Hintergrundbild bei inaktivem Link und hover anzeigen lassen.

 

[Hammelmen]

AW: Kleines Problem mit der navi

Hallo hedoo,

wenn ich das verstanden habe dann muss ich nur den hover-effekt auf das <li> setzen damit es geht.

ich werde es gleich ausprobieren.

Danke für die hilfe.

 

[Hammelmen]

AW: Kleines Problem mit der navi

Ich bins nochmal!

Vielen DANK an hedoo! Dein tipp hat die lösung gebracht!

 

[hedoo]

AW: Kleines Problem mit der navi

Hallo,
nein ich meinte nicht, dass du den hover auf das <li> anwenden sollst.
Das funtioniert nämlich nicht in allen Browsern!
Ich meinte, es wäre besser wenn du das Hintergrundbild für das <a> Tag definierst.
hubspe hat dir ja einen Link geschickt, in dem es genauer erklärt wird.
Das <a> Tag müsste ein display: block; und eine feste Größe mitbekommen, dann kannst du dein Hintergrundbild sowohl für den Normalzustand als auch für den hover einbinden.

hedoo

 

[mf996]

AW: Kleines Problem mit der navi

Hallo Hammelmen,

wenn Du Dein grafisches Navi-Prolem gelöst hast, dann kannst Du ja noch zwei Kleinigkeiten ändern! Ich hoffe mal das ist nicht zu kleinlich, aber: FAG's würde ich zu FAQ (oder vielleicht auch noch FAQs) machen und AGB's einfach nur zu AGB.

Gratuliere zu Deiner Titelseite.

manfred

 

[Hammelmen]

AW: Kleines Problem mit der navi

Hallo erstmal!

Ich verstehe hedoo. Hab das bein den weiter Button gemacht. Aber in der navi haut das nicht ganz hin. Ich mach das irgendwas falsch. Denke ich!:hmpf:

Aber wie heisst es so schön learning by doing

 

[Hammelmen]

AW: Kleines Problem mit der navi

Danke für den hinweiss mf996!