doch lieber grafisch

Bisher waren alle Vorschläge unter dem Gesichtspunkt universell, erweiterbar. Universell fällt nun leider weg: Sie müssen sich jetzt festlegen bezüglich Farbgebung, insbesondere die Hintergrundfarbe ist jetzt relevant. Erweiterbar wird das Werk aber trotzdem sein.

Man nehme...,

gestalte, entwerfe eine Grafik guter Qualität, die alle Elemente enthält. Für Zisslaweng habe ich z.B. diesen Entwurf in der Grösse 1500px x 250px gemacht. Wenn alles stimmt: skalieren auf die Grösse zur späteren Verwendung und zerschnippeln. Sorgfalt ist angebracht, denn schliesslich sollen die Stücke wieder zusammengesetzt werden.

(verkleinert)

..mache daraus ein paar Schnippsel,

setze das Ganze nach Bedarf zusammen, der Hintergrund der Grundfarbe angepasst...

..und schon sieht's aus wie bei

Item 1

Item 2 lang

Item 3

html

<div id="MENUE_4">

	<div><IMG src="./grafik/s_act.gif"></div>

	<A href="#" class="act"> Item 1</A>

	<div><IMG src="./grafik/after_act.gif"></div>

	<A href="#" >Item 2 lang</A>

	<div><IMG src="./grafik/after_ina.gif"></div>

	<A href="#" >Item 3</A>

	<div><IMG src="./grafik/e_ina.gif"></div>

</div>

Stylesheet


	<style type="text/css" media="screen">

#MENUE_4 {background: url(./grafik/r_bg.gif) repeat-x;	padding-left: 80px;	height: 34px;	font-family: Arial, sans-serif; font-size:100%;}

#MENUE_4 div {float:left;}

#MENUE_4 a, #MENUE_4 a.act { background: url(./grafik/ina.gif) top repeat-x; padding-top: 10px;  height: 34px; float:left;  color:white; text-decoration: none; font-weight: bold;}

#MENUE_4 a.act  { background: url(./grafik/act.gif) top repeat-x; color: #f16733;}

#MENUE_4 a:hover { color: blue;}

	</style>

Anmerkung:

Kein Problem, dieses Menü um weitere Links zu erweitern, das war ja die Bedingung.
Dass die IMG Tags noch zusätzlich in div eingebettet sind ist ein Zugeständnis an den IE 5.x, der die Grafiken sonst nicht lückenlos zusammenfügt. Ohne div's wäre die Schreibweise im Stylesheet #MENUE_4 img {float:left}

zisslaweng.de