PHP News

#1 (**permalink**) 10-12-2006, 20:00

Hi,

ich sitze nun schon seit stunden an diesen misst und komme nicht weiter. Ich bastle grad ein Menü. Beim ie siehts aus wie es aussehen sollte, nur macht jetzt der blöde firefox probleme (siehe Bild)

Hier der Code:
[CODE]
.leftMenu {
background-image: url(imagesOld/menuArrowBG1.gif);
background-position: right;
vertical-align:top;
width:257px;
height:19px;
margin:0px;
}

.leftMenu a {
font-family:Verdana, Arial;
font-size:11px;
color:#000000;
text-decoration:none;
vertical-align:middle;
width:257px;
height:19px;
line-height:19px;
padding-left:27px;
margin:0px;
}

.leftMenu a:hover {
font-family:Verdana, Arial;
font-size:11px;
color:#000000;
text-decoration:none;
background-image: url(imagesOld/menuArrowBG2.gif);
width:257px;
height:19px;
}[CODE]

Und hier wird das ganze aufgerufen:

Code:

<div class="leftMenu"><a href="">Top News</a></div>

Wie kriege ich es hin, das das ganze Menü beim hover mit den anderen Bild ganz ausgetauscht wird, und nicht nur zum teil wie auf dem Bild zu sehen?

#2 (**permalink**) 10-12-2006, 20:13

schreib mal background-image: url(imagesOld/menuArrowBG1.gif); unter .leftMenu a statt unter .leftMenu

#3 (**permalink**) 10-12-2006, 20:29

wenn ich das so mache, wird das hintergrundbild nach unten verschoben und ist nicht mehr mittig (wie man auf den bild bei hover erkennen kann)

#4 (**permalink**) 10-12-2006, 23:54

Da a von Haus aus ein inline-Element ist, müssen width und height natürlich wirkungslos bleiben - deine Links sind also nur so groß, wie es ihr Inhalt erfordert.
display:block oder floating schafft Abhilfe.

Außerdem brauchst du die allgemeinen Angaben für a bei a:hover nicht noch mal alle extra zu wiederholen.

#5 (**permalink**) 11-12-2006, 10:03

tatsächlich, damit klappt es fast. durch das padding-left:27px; wird jetzt aber 27 pixel nach rechts zu viel angezeigt. gibt es eine andere möglichkeit als mit padding den text um 27 pixel zu verschieben?

#6 (**permalink**) 11-12-2006, 10:15

Zitat:

Original geschrieben von joextra
durch das padding-left:27px; wird jetzt aber 27 pixel nach rechts zu viel angezeigt.

Du meinst, die Berechung nach dem Boxmodell ist jetzt korrekt?

Zitat:

gibt es eine andere möglichkeit als mit padding den text um 27 pixel zu verschieben?

Du kannst das padding ruhig beibehalten, wenn du width entsprechend veringerst.

#7 (**permalink**) 11-12-2006, 10:15

laut box-modell werden die 27 pixel zur gesamtbreite hinzugezählt. also muss die breitenangabe um diesen wert verkleinert werden. und bevor du fragst: im ie siieht das aber sauber aus, der hat eine bug. siehe meinen link.

gruß
peter

#8 (**permalink**) 11-12-2006, 10:28

ne, so klappt es auch nicht. wenn ich die 27pixel von der width wegnehme, fehlen die im ie. im ff siehts dann gut aus, im ie aber so (siehe bild)

#9 (**permalink**) 11-12-2006, 10:32

Zitat:

Original geschrieben von joextra
ne, so klappt es auch nicht.

Doch, tut es - wenn du es richtig machst.

Zitat:

wenn ich die 27pixel von der width wegnehme, fehlen die im ie.

Warum die "fehlen", und was du dagegen tun kannst, ist auf der von mir verlinkten Seite ausführlich erklärt - also beschäftige dich bitte damit, anstatt jedes mal sofort "funzt nich" zu plärren.

#10 (**permalink**) 11-12-2006, 10:33

falsche doctype. nimm html strict oder xhtml.

gruß
peter

#11 (**permalink**) 11-12-2006, 10:51

@Kropff
ja, jetzt klappt es. danke, wieder etwas dazu gelernt.

@wahsaga
du hast schon recht, aber wenn man stunden lang an so einen blöden problem hängt ohne auf eine lösung zu kommen, ist man irgend wann so genervt das man einfach keinen bock mehr hat.