Menu mit dynamisch breiten Punkten

[msycho]

Hallo!

Ich habe ein horizontales Menu. Dazu habe ich eine Liste missbraucht.
Jeder Menupunkt hat ein Hintergrund, der sich aus drei Bildern zusammensetzt. Das mittlere soll sich entlang der x-Achse entsprechend der Wortbreite wiederholen.
Mein Problem ist, dass ich genau dieses Bild nicht eingebaut bekommen.

Ich habe mal ein Screen angehängt, damit Ihr euch es besser vorstellen könnt.

Hier noch der Quellcode:

<div id="mainmenu">
		<ul>
		  <li><a href="#">banane</a></li>
		  <li><a href="#">erdbeere</a></li>
		  <li><a href="#">apfel</a></li>
		  <li><a href="#">ananas</a></li>
		</ul>
	</div>

#mainmenu {
  float: left;
  width: 100%;
  /*background:#fff url('./images/button-mitte.jpg') repeat-x bottom;*/
  background-color: #04aee1;
}

#mainmenu ul {
  margin: 0;
  padding: 5px 20px 0;
  list-style: none;
  overflow: hidden;
}

#mainmenu li {
  float: left;
  background: url('./images/button-links.jpg') no-repeat left top;
  margin: 0 10px 0 0;
  padding: 0 0 0 14px;
  line-height: 40px;
}

#mainmenu a {
  float: left;
  display: block;
  background: url('./images/button-rechts.jpg') no-repeat right top;
  padding: 5px 20px 4px 6px;
  text-decoration: none;
  font-weight: bold;
  color: #fff;
}

/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#mainmenu a {float:none;}
/* End IE5-Mac hack */

#mainmenu a:hover {
  text-decoration: underline;
	color: #000;
}

Ich hoffe Ihr könnt mir weiterhelfen.

 

[prm]

Entferne mal die Auskommentierung, falls das keine Absicht ist:

#mainmenu {
float: left;
width: 100%;
/*background:#fff url('./images/button-mitte.jpg') repeat-x bottom;*/
background-color: #04aee1;
}

Ansonsten kannst du jedem Element nur ein Hintergrundbild zuweisen.
Da du das bereits für li und a vergeben hast, bleibt zumindest nichts mehr übrig, das sich an den jeweiligen Link anpassen könnte.
Der background bei #mainmenu zieht sich über die gesamte Leiste.

Ansonsten:
Du hast die Liste nicht missbraucht. Das ist durchaus sinnvoll und auch gängige Praxis.

 

[msycho]

Die Auskommentierung ist schon beabsichtigt.
Ansonsten würde sich ja der Hintergrund über das gesamte Element "mainmenu" erstrecken. Das möchte ich aber nicht.
Ich möchte eben dieses Hintergrundbild für einen "Button" als Hintergrund verwenden.

Heißt das jetzt, dass ich meine Idee so nicht umsetzen kann?

 

[prm]

Wenn du deinen Links eine feste Breite gibst, die sich logischerweise am längsten Linktext orientiert, dann sind Linkgrößen und deren Abstände "berechenbar".

Du könntest dann unter Berücksichtigung von Margin- und Paddingwerten eben eine Grafik basteln, die dann die vorgesehenen Grafikteile "zum Link legt".
Diese Grafik dann als "Balkengrafik" ohne repeat dem #mainmenu zuweisen.
Sie wäre dann jedoch nicht für einen Hovereffekt verwendbar.

 

[msycho]

Ich bin gerade etwas verwirrt.
Denn ich aus sowas bin ich durch Zufall vor ein paar Tagen gestoßen. Ich habe jetzt aber leider den Link nicht mehr.
Dort wurde genau das gemacht was ich machen möchte.

 

[msycho]

Ich hab die Seite wieder gefunden: http://www.tuindorpoost.nl/artikel/css/navigation.html

Wenn Du dir das Beispiel unter "Sliding Door (I & II) Navigation" anschaust, siehst Du, dass der genau das macht, was ich machen möchte. Zugegeben, nicht mit drei sondern zwei Images, aber es geht.

 

[Chumper]

Wäre es nicht sinvoll, den Hintergrund der auf der X-Achse durchlaufen soll als Hintergrund zu definieren und die Bilder links und rechts in den A-Tag mitreinzupacken?

Also so:

<a>bild_links TEXT bild_rechts</a>

bzw. direkt ausßerhalb des a-Tags, wenn die Bilder nicht mit als Link dienen sollen?

 

[msycho]

Wäre eine Möglichkeit, ja. Aber ich wollte mich dem Reiz stellen, das komplett mit CSS umzusetzen.

 

[prm]

Wenn's so etwas ist, musst du lediglich den aktiven Link (Link der angezeigten Seite) speziell formatieren.
Du brauchst also je eine Grafik für
den Normalzustand,
den Hoverzustand und
den für die jeweils angezeigte Seite.

Somit bindest du drei Hintergrundgrafiken für die entsprechenden "Zustände" ein.
Hier hab ich mal ne Anleitung geschrieben wie's geht. Statt der verwendeten background-colors nimmst du eben ein background-image: Aktiven Link hervorheben

 

[Chumper]

Dann sehe ich keine andere Möglichkeit, als den Link in einen weiteres Element z.B. span zu stecken und da auch ein Hintergrunbild zu definieren.