Background-Position Spezialist

[Fexxx]

Hallo zusammen,

ich bin dabei ein grafisches Menü mit background-image und background-position umzusetzen. Nun sollen einige der Navigationmenüpunkte aber rechts einen 20px Abstand bekommen, was mir aber nicht gelingen will.

So soll es aussehen:
Vorlage

Meine HTML Datei:
HTML Ansicht

Die (Navi) CSS Datei:
CSS Ansicht

Evtl. ist ja auch ein anderen Ansatz sinnvoller?

Lieben Dank

[wildmieze]

schon versucht, der "#navi a" ne breite von 150 statt 170 zu geben ..? .. wenn das klappt, kannst du den anderen links (home und kontakt), die nicht eingerückt sein sollen, mit ner klasse wieder die 170 zuweisen ..

[Fexxx]

Hallo Wildmieze,

danke für den Ansatz: Habe die Weite jetzt generell auf 150px und den rechts eingerückten Navigationspunkten ein margin-left: 20px verpasst.

#navi a
{
display: block;
 width: 150px;
height: 20px;
}


 a.button1:link,  a.button1:visited
{
background-image: url(../images/navigation/home.gif);
background-repeat:no-repeat;
background-position:right;
margin-left: 20px
}

Könntest Du mir deinen Version auch zeigen, konnte diese leider nicht funktionierend umsetzen? Die ist sicher sauberer.

Danke und Gruß
Fexxx

[wildmieze]

ich hab keine version, sondern nur ins blaue getippt

... hmm .. im IE7 scheint das menü ja jetzt in den Grundzügen zu funktionieren (ich würde aber noch die fehlende semikolons im css ergänzen) .. bis auf den ersten sind die links jetzt passend eingerückt .. ob der ansatz mit den 20px-margin richtig ist, kommt darauf an, wo du das "hover-wort" stehen haben willst - das ist jetzt nämlich auch 20px weiter rechts als die anderen "hover-wörter" ..

aber im firefox wird das menü gar nicht angezeigt .. die überschrift übrigens auch nicht, sieht alles etwas anders aus .. da müsste man nochmal genauer schauen, woran es liegt ..

[Fexxx]

Hallo Wildmieze,

danke für deinen klasse Support!
Kannst Du mir mitteilen welche Firefox Version Du hast, habe es auf 2 Rechnern mit Version 3.5.1 positiv gestestet. Auch der IE8 und sogar der IE6 spielen mit!
Wäre ja ein Ding, wenn ausgerechnet der FF Zicken macht?

Stimmt, die Hover sind noch nicht gleich linksbündig, diese sollen alle ganz linksbündig zur unteren weißen Linie stehen... Ganz schön kniffelig
EDIT: Müsst ja passen, wenn ich beim Hover margin-right: 20px gebe...mal testen
EDIT 2: Ah, wenn ich beim Hover margin-left wieder auf "0px" setze klappts.

Evtl geht das ganze Menü auch eleganter bzw. codesparender?



Liebe Grüße
Fexxx

[wildmieze]

also ich hab hier firefox 3.0.11 .. da fehlt wie gesagt das menu und die überschrift (bzw. der content rutscht samt überschrift zu weit hoch) ... dafür tauchen zahlen (1234) und pfeile unter dem content auf, die ich im IE7 nicht sehe .. ich hab mal nen screenshot angehängt ..

obs eleganter und codesparender geht .. *kratzamkopp* .. das menu an sich ist im html "schmal" genug, ist ja nur ne liste .. im css könnteste höchstens noch ein bissl was zusammenfassen (zB das background-repeat der buttons) .. aber sonst finde ich das soweit ok .. bin aber auch nicht der experte für optimalen code

[MrMurphy]

Hallo,

um dem Problem auf den Grund zu gehen ist es sinnvoll, wenn der Code keine Fehler aufweist. Dies ist leider nicht der Fall. Einfach mal die Adresse im Feld URL auf der Seite

http://validator.de.selfhtml.org/validate

eingeben, Validieren-Button klicken und die aufgeführen Fehler beheben.

Gruss

MrMurphy

[max.m]

Hi Fexxx,

im Anhang mal ein Screenshot, links ist Firefox 3.0.12 und rechts IE 8. Also im FF sieht man keine Navi.

Gruß max.m