Bilder in der Navigation

[Summernoon]

Ich möchte eine horizontale Navigation ertsellen.
Soweit so gut. Nur ich möchte halt ein hintergrund bild hinter jeden Menüpunkt machen weiß nur nicht wie.
Ich habe ein Bild für den linken Menüpunkt, zwei für die Mitte (die gleich sind) und ein Bild für die rechte Seite.

Hier mal die Bilder

nav-links.gif (2.13 KiB) 97-mal betrachtet

nav-mitte.gif (1.87 KiB) 96-mal betrachtet

nav-rechts.gif (2.3 KiB) 96-mal betrachtet

vielleicht habt ihr ja eine Lösung.
mfg
Summernoon

[Ingo]

Hi, Summernoon.
Mein Vorschlag lautet etwa so - vom Finetuning mal abgesehen:

Code: Alles auswählen

CSS:
  #navi a { display:block; float:left;
            text-align:center;
            padding-top:25px;
            text-decoration:none;
           }
  #navi a.linklinks  { background:url(nav-links.gif);  width:187px; height:22px; }
  #navi a.linkmitte  { background:url(nav-mitte.gif);  width:176px; height:22px; }
  #navi a.linkrechts { background:url(nav-rechts.gif); width:197px; height:22px; }

HTML:
<div id="navi">
  <a href="#1" class="linklinks">Apfel</a>
  <a href="#2" class="linkmitte">Banane</a>
  <a href="#3" class="linkmitte">Birne</a>
  <a href="#4" class="linkrechts">Zitrone</a>
</div>


Gibt sicher noch weitere Möglichkeiten; es kommt auch ein wenig daurauf an, wie genau das
Menü eingebaut werden soll - horizontale Menüs sind da manchmal etwas schwer handzuhaben.

Gruß, Ingo

[Summernoon]

Genau so wollt ich das haben!
Hatte auch sowas mit class sachen versucht...ging aber einfach nicht.
Vielen Dank
Summernoon

[Avedo]

In diesem Fall sollte es aber auch gehen, dass du nur dass nav_mitte.jpg für alle menüpunkte veerwendest. Ist zwar jetzt nicht viel spart aber trotzallem speicherplatz.
mfg, andy