Mehrer Background-Images, oder automatische Images

[Artemis]

Hi Leutz!

Ich hab folgendes Problem.

Bei meiner HP ( --- ) hab ich diese Buttons (also bei einem aktiven oder gehoverten MenüEintrag) als ein Image.
Dadurch sind die Images aber alle geich gross.

Um die verschieden groß zu machen (am besten so breit wie der Text) hab ich mir folgendes vorgestellt, was natürlich nicht funktioniert:

Ich male die linke ecke als background
ich male die mitte als background, so breit wie der text (mit repeat-x)
und ich male die rechte ecke als background.

naja, das funzt aber net.

aht jemand ne idee?

 

[Fätzminator]

ich komm nicht ganz nach
du sprichst vom untermenu?

 

[Artemis]

Also bisher hab ich das als ein Image:



Jetzt würde ich das gern so machen:
---(<--linkes Bild) + ---(<--mittleres Bild, aber dann so breit wie der text, mit repeat-x) + ---(rechtes bild)

das sollte dann so machbar sein, dass das halt von der breite variabel ist.

So halt:
---

Oder so halt:
---

 

[Fätzminator]

benutzt du php?
ich glaube, das is nur mit php oder js möglich... ausser du machst ne tabelle, die die volle breite hat und gibt links und rechts ne bestimmte grösse (bei 3 zellen)

 

[Artemis]

ja, wie ginge dass denn dann ungefähr?

 

[Prophet]

Beispiel:

<div style="background-image:url(bild_verlauf.jpg);background-repeat:repeat-x;">
[img]bild_anfang.jpg[/img]
Beschriftung
[img]bild_ende.jpg[/img]
</div>

Anstatt div kannst du natürlich auch jedes andere element nehmen...

 

[Artemis]

hmm mein prob is aber, dass ich ein element hab, bei dem normal nix angezeigt werden soll sondern nur beim hovern.

 

[flapo]

...was nicht geht, wenn du mehrere Tabellenzellen hast. Das Problem hatte ich auch mal... Ich hab einfach eine Lösung ohne Abschluss gemacht (www.gymigames.ch.vu). aber das ist auch nicht das, was du brauchst... :?

Ãœbrigens: Das Design ist genial!

 

[Artemis]

ich hab jetzt eine Lösung: Sie funktioniert mit FireFox, Mozilla, Opera und Netscape (neueste Versionen) nur nicht mim IE.

das stylesheet:

span.lnk{
	background:url("topbar.bg.png") repeat-x;
	height:25px;
	line-height:25px;
	display:block;
}
span.lnk span.left{
	background:none;
	height:25px;
	line-height:25px;
	width:6px;
	float:left;
	display:block;
}
span.lnk span.right{
	background:none;
	height:25px;
	line-height:25px;
	width:19px;
	float:left;
	display:block;
}
span.lnk span.center{
	background:none;
	height:25px;
	line-height:25px;
	float:left;
	display:block;
}

span.lnk:hover{
	background:none;
}

span.lnk:hover span.left{
	background:url("left.png");
}
span.lnk:hover span.right{
	background:url("right.png");
}
span.lnk:hover span.center{
	background:url("center.png") repeat-x;
}

die testseite:

<link rel="stylesheet" type="text/css" href="style.css">

<span class="lnk">
	<span class="left"></span>
	<span class="center">asdhajhdsjsdskjjkadjsjkdjkashdkhkasdsahdhashkd</span>
	<span class="right"></span>
</span>

PS: Warum gibt es eigentlich PHP, aber keine JS, CSS oder HTML-Code-Tags?

 

[Prophet]

weil php mit einer funktion das automatische highlighten ermöglicht diese gibt es für html usw. nicht.

so sollte es klappen