Div Hindergrundbild Größe ändern

[AlexK-Mainz]

Hi,
finde zu folgender Frage nirgends eine Lösung

Sachverhalt
Ich habe Haupt DIV (240px breit 16px hoch). Dieser Container soll nun dynamisch mit Inhalten aus einer Datenbank gefüllt werden um so ein Reiter-artiges Menu zu bilden.

/ Menu 1 / Menu 2 / Menu 3/...

Dazu erstelle ich für jeden Menüpunkt(Reiter) ein Div und verschiebe die Anfangsposition (left:) des nächsten um die Breit des letzten Containers.

Die Aufschrift ($menu_text) des Reiters lade ich Dynamisch aus der Datenbank und gehe nun per while-Schleife jeden Menueintrag durch.

=> Das klappt bis hierhin auch wunderbar.

Als Hintergrundbild dient ein Bild namens bg_reiter.jpg (50px breit)

Da ich die Reiter aber nur so breit haben möchte wie der Text ist, lese ich die Länge der Aufschrift jedes Reiters vorher aus ($length=strlen($menu_text)) und multipliziere dies um den Faktor 7, damit ich weiß, wieviele Breite mein Text verbaucht (mir ist klar, das Buchstaben wie "i" weniger Platz von der Breite her verbrauchen als z.B. ein "M" - aber das ist mein kleinstes Problem) Ich möchte einfach keine feste Breite haben, damit ein Reiter mit der Aufschrift "ICQ" nicht ebenso breit ist wie der Reiter z.B. "Einladungskarten".

Den DIV Eintrag des jeweiligen Reiters kann ich mit dynamisch konfigurieren

echo "<div style='... width:". $length . "px;...'";

und auch die Verschiebung der folgenden Div-Container für die nächsten Reiter klappt.

Nun mein Problem:

falsch wäre eine Feste Breite:
/ klein / mittel / kl / breiter Men / mitel /

gewünscht ist eine dynamische Reiterbreite und damit eine Anpassung der Breite des Hintergrundbildes:
/ klein / mittel / kl / breiter Menueintrag / mittel / ...


Das Hintergrundbild (bg_reiter.jpg (50px breit)), welches ich innerhalb des ...style="..." definiert habe ist immer nur so breit wie der Text und wird dann abgeschnitten.
Habe ich einen Text der nur 30px breit ist, wird das Bild des Reiters nach Pixel 30 abgeschnitten.

Gibt es eine Möglichkeit das per CSS bestimmte Hintergrundbild in der Breite zu skalieren?

Oder würdet Ihr das o.g. Menu vielleicht ganz anders aufbauen? Mein Problem ist, dass ich schlecht z.B. mit Tabellen arbeiten kann, da ich nur eine Höhe von 16px frei und der Tabellenrand schon so dick ist, dass ich kaum noch was in die Tabelle eingetragen bekäme, da die Schrift 12px groß sein soll.

Bin für Vorschläge offen, wenn Sie nur zum Ziel führen ;-)


danke fürs lesen und ggf für die Hilfe

 

[Fredmonster]

so schwer, wie du dir das machst ist das programmieren gar nicht.. :) Echt süß, das werd ich mir mal kopieren ;)


Nun aber zu deinem Problem:
Du erstellst die Grafik mit dem Hintergrundbild in 1*Höhe also 1px breit und so hoch, wie das menü ist, so hoch muss auch das Bild sein.. (12px schriftgröße->14px bildhöhe usw.).
Dann setzt du das hintergrundbild per CSS ein und setzt background-repeat:repeat-x;

Gruß, Fredmonster

PS: Wenn du aan den Seiten noch platz haben willst musst du mit padding-left bzw padding-right arbeiten.. Siehe dazu CSS 4 You - The Finest in Stylesheets

 

[AlexK-Mainz]

Ok.. mal wieder den Wald vor lauter Bäumen nicht gesehen.

Wobei mir nicht bewusst war, dass sich das "background-image:..." automatisch an die Größe des Containers anpasst, wenn ich "background-repeat:no-repeat" setze.

Aber es funzt jetzt.


danke

 

[BcF]

Wobei mir nicht bewusst war, dass sich das "background-image:..." automatisch an die Größe des Containers anpasst, wenn ich "background-repeat:no-repeat" setze.

tut es doch auch nicht

...oder oO

 

[Fredmonster]

doch tut es meister.. deswegen heißt es ja background-image;)

 

[BcF]

Aber wenn man "background-repeat:no-repeat;" setzt dann wird das doch einfach nur einmal angezeigt und passt sich an nix an, oder hat sich AlexK da verschrieben und meinte "repeat-x"?

 

[Fredmonster]

Du hast schon recht, wenn man no-repeat setzt passt es sich ab einer bestimmten Größe nicht mehr an, aber bis zur Größe des Bildes schon..