Bild in Navigation

Hi,

ich hab hier: http://www.homepage-baukasten.de/forum/viewtopic.php?t=138196&highlight=bilder+in+navi
einen guten Tipp gefunden hier wie man Bilder in die Navigation einfügt, ohne dass die URL des Navilinks beeinträchtigt wird. Leider funzt es bei mir nicht!!!

Hier der Code:

a.menu[href="/EUROPAPOKAL.htm"]

a.menu[href="/EUROPAPOKAL.htm"]:before{
content:".";
color:transparent;
}

a.menu[href="/EUROPAPOKAL.htm"]:before{
content:".";
color:transparent;
width: 50px;
height: 20px;
background-image:url(http://img.webme.com/pic/o/ouefa/cllogoklein.png);
}


Wenn ich das so mache, sieht man zwar ein Bild, aber das ist völlig zusammengeschrumpft. Bitte um Hilfe.

na ist doch auch klar, wenn es bloß 50x20 Pixel hat
______________
MfG aus Klein Paris-vereinzelte Rechtschreibfehler sind Special Effects meiner Tastatur

Bitte, wenn Du keine Ahnung hast, einfach ignorieren. Das Originalbild ist 25x25 pixel, es liegt nicht daran.

Kann mir jemand bitte helfen?

was sagt uns das rote?

gruss gringo
______________
Mein Youtube Kanal | Standard-Designs als Red Design ohne rechte Boxen | Tips zum Design Professionell

ups - ich ignorier mal
______________
MfG aus Klein Paris-vereinzelte Rechtschreibfehler sind Special Effects meiner Tastatur

Das ist ein anderes Icon von einem anderen unverlinkten Menupunkt.

Klar kann ich nun jeden Navilink mit einem Bild versehen, dann sieht aber der Link zum heulen aus.

Aaaaaaaaaaalso, ich hab mich nun gut 3 Stunden mit dem Thema Bild in der Navigation befasst und gesucht, gesucht und gesucht. Nichts will klapen.

Hier einmal ganz klar was ich haben möchte:

1. Die Navigation soll verschiedene Icons links neben Navi Titel haben

ACHTUNG: Die Seiten-URL's sollen unverändert bleiben!

Hierfür habe ich mich bei diesem Tutorial bedient: http://www.homepage-baukasten.de/forum/viewtopic.php?t=138196&highlight=bilder+in+navi

Im 2. Beitrag die 5. Möglichkeit. Aber was raus kam war dann dies hier:



Ihr seht auch, dass es einige Navi-Links mit Icons hat, diese sind aber direkt im Link eingefügt, wären das echte Links würden die mega-lang sein, es sind Menupunkte ohne Links. Ich möchte aber alle Navi-Links (auch die verlinkten) mit einem Bild machen ohne dass die URL's verändert werden. Laut der Beschreibung geht das, doch eben bei mir sind die völlig zusammengeschrumpft. Vielleicht irgendwas falsch im gesamten Seitencode???

Und wenn wir schon dabei sind noch weitere Dinge die ich machen möchte in der Navi:

2. Die Navigationslinks sollen als Ganzes angeklickt werden können.

Ich möchte, dass man die Navi-Links als Ganzes anklicken kann. Also nicht nur den Schriftzug, sondern auch neben der Schrift soll man klicken können und die Seite öffnet sich.

Bild dazu: (also man kann einfach auf den Button klicken, nicht nur auf die Schrift)


Ist aber nicht das Wichtigste für mich, viel Wichtiger sind Punkt 1) und Punkt 3). Bei Punkt 4) denk ich werd ich keine gescheite Lösung finden können.

3. Der aktive Button ist sichtbar

Der aktive Button soll sichtbar sein. Also das Hover soll dort quasi eingefroren sein, solange man sich auf der Seite befindet.

4. Horizontal ausfahrbare Untermenü's

Hierzu habe ich gar nichts gefunden. Finde nur ständig Coolmenu's die man in der Mitte des Designs positionieren kann und die sich dann vertikal ausfahren lassen.

Ich möchte aber die Navi-Untertitel vertikal ausfahren lassen. Muss ich dafür eine total neue Navi bauen?

Hallo,

Wenn man solche Aussagen liest, hat man keine Lust dir zu helfen. Das ist dann auch deine 1. Verwarnung.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering

Hi 0-4-n

Danke für deine Antwort. Ich bin schweizer, tut mir leid wenn das falsch rübergekommen ist. Bin schon seit über 3 Jahren beim HPBK und versuche stets alles alleine zu lösen und nur nach langer Recherche wo ich keine Lösung finde, frage ich hier mal nach. Wenn ich so lese was hier z.T. für Fragen gestellt werden und wie der Ton ist und niemand verwarnt wird, bin ich bischen über meine Verwarnung verwirrt. Aber ok, mir bleibt nichts anderes übrig als das zu akzeptieren.

Könntest Du mir bitte weiterhelfen, ich denke deine Lösung, die ich als Tutorial nutzte und es nicht geklappt hat, ist die richtige, aber irgendwo ist wohl von meiner Seite ein Fehler drin. Kann mir einfach nicht erklären, wieso die Grafik so klein aussieht.

Gruss

In der Schweiz ist es also üblich, dass man zu Leuten die einem helfen wollen sagt: "Du hast keine Ahnung"?
Also ich wohne an der Grenze zur Schweiz, Basel ist quasi um die Ecke. Muss ich demnächst mal versuchen. Ich will ja nicht unhöflich sein und wenn das so üblich ist...

Entschuldigung von meiner Seite jedenfalls akzeptiert.

Also: Du kannst da gar nichts dafür. Ich wollte die Bilder in das Pseudoelement so einfügen, da das direkte einfügen über die URL Funktion zur Folge hätte, dass der Text nicht mehr vertikal zentriert ist. Um ihn dann wieder vertikal zu zentrieren müsste man das Bild komplett neu ausrichten. Da erschien es mir einfacher das Bild als Hintergrund des Pseudoelementes einzurichten.
Dabei habe ich allerdings nicht bedacht, dass das Pseudoelement vom Element, auf welches es angewendet wird abhängig ist. Soll heißen ist das Element auf welches es angewendet wird ein Block-Element, dann ist auch das Pseudoelement ein Block-Element. Der Link ist aber ein Inline-Element und damit ist auch das Pseudoelement ein Inline Element. Durch die Abhängigkeit ist das normale Einfügen über die URL Funktion dann wohl doch einfacher.
Ich ändere die Beschreibung in dem anderen Thread um.

PS: Den Rest macht dann man Schritt für Schritt.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering