Druckbare Version
Ich bau grad ein Design, in dem die Boxen als Hintergrund einen vertikalen Farbverlauf haben. Nur blöderweise komm ich beim besten Willen nicht mehr drauf, wie ich den streck oder stauch. Ansonsten siehts etwas blöd aus, wenn der Verlauf in der Mitte aufhört.
Edit:
Is relativ dringend, die Seite samt Design muss bis zum 1. Februar stehen.
Strecken/stauchen ist AFAIK nicht drin, aber wiederholen. Mit [FONT="Courier New"]background-repeat:repeat;[/FONT] wird das Hintergrundbild bis zum Ende des Bereiches wiederholt.
Siehe selfHTML.
Wiederholen wäre wohl kaum ein Problem, ist ja eh die Standardeinstellung (zumindest wenn man's in's Tag schreibt). Das nützt aber natürlich nichts, wenn man einen Farbverlauf will.
Was mir einfiele, wäre, das Hintergrundbild nicht als Background zu definieren, sondern als normales Bild in einen ganzflächigen untersten Layer zu packen und dann zu strecken. Aber darauf wärst du wahrscheinlich auch selber gekommen. :(
Sprich: keine Ahnung, aber neunmalklug dahergeredet! :A
Sicher nützt das was. ;)Zitat:
Zitat von drunken monkey
einzelnes Bild:
http://img15.imageshack.us/img15/8813/verlauf19za.jpg
[FONT="Courier New"]repeat[/FONT]:
http://img15.imageshack.us/img15/8813/verlauf19za.jpghttp://img15.imageshack.us/img15/8813/verlauf19za.jpghttp://img15.imageshack.us/img15/8813/verlauf19za.jpghttp://img15.imageshack.us/img15/8813/verlauf19za.jpg
usw.
einzelnes Bild:
http://img15.imageshack.us/img15/5769/verlauf27cl.jpg
[FONT="Courier New"]repeat[/FONT]:
http://img15.imageshack.us/img15/5769/verlauf27cl.jpg
http://img15.imageshack.us/img15/5769/verlauf27cl.jpg
http://img15.imageshack.us/img15/5769/verlauf27cl.jpg
http://img15.imageshack.us/img15/5769/verlauf27cl.jpg
usw.
Aber horizontal und vertikal strecken, kann man damit nicht. Daher nützt es in den meisten Fällen - ich weiß ja nicht, wie das jetzt speziell bei DFYX aussieht - auch nichts.
Bei einem Farbverlauf ist es IMO auch nicht sinnvoll in beide Richtungen zu strecken. ;) Einen horizontalen Farbverlauf in der Breite zu strecken macht ihn grob, ebenso einen vertikalen Farbverlauf in der Länge zu strecken.Zitat:
Zitat von drunken monkey
http://img15.imageshack.us/img15/8813/verlauf19za.jpg http://img35.imageshack.us/img35/559...uf1grob4ed.jpg
http://img15.imageshack.us/img15/5769/verlauf27cl.jpg http://img35.imageshack.us/img35/948...uf2grob4wq.jpg
Sicherlich ist das dann auch nicht die optimalste Lösung für DFYX, denn er müsste seinen vertikalen Verlauf (also oberes Beispiel) so hoch machen wie seine Box ist, um sie dann per [FONT="Courier New"]repeat[/FONT] komplett mit dem Farbverlauf auszufüllen. Ist aber IMO immer noch besser als ein gestrecktes Bild zu nehmen, siehe Beispiele.
Kann hier mal wieder auf die Grafikfunktionen in PHP verweisen, da dürfte das auch dynamisch umsetzbar sein. ^^
Natürlich kann es sinnvoll sein, einen Farbverlauf in beide Richtungen zu strecken. Man könnte ihn ja beispielsweise so lang machen (z.B. 1500 Pixel), dass "Strecken" schon "Stauchen" bedeutet. Dann würde die Qualtität gleich bleiben. ^_^
Und wenn man die auf den Hintergrund strecken will, darf man wohl annehmen, er weiß nicht von vornherein wie groß sie werden sollen - weder wie hoch, noch wie breit. Kann natürlich auch anders sein, müsste DFYX sagen. :rolleyes:
Aber prinzipiell denke ich, dass meine Lösung mit dem "globalen" Div mit Bild da noch die bessere Lösung ist, zumindest wenn man's eben in beide Richtungen strecken will. Könnte aber sein, dass das mit PHP besser geht, das kann ich nicht so gut.
:D Ja, sicher, hast recht.Zitat:
Zitat von drunken monkey
Trotzdem würde ich es wohl nicht so lösen. Aber lassen wir das. ^^
Generell wäre es doch ganz gut gewesen wenn DFYX ein bisschen mehr erzählt/gezeigt hätte. :p Ist ja auch immer abhängig von den Umständen und irgendwo auch Geschmacksache. ;)
Und wegen PHP:
Ich verweise einfach mal hier drauf. Die Frage ist nun: Kann DFYX PHP? ^^
Mein Designentwurf: www.dfyx.de/temp/nightlife.png
Es geht um die beiden unteren Boxen, bei denen sich die Höhe (nicht die Breite) ändern kann. Die drei oberen Boxen hab ich schon als einzelne Bilder. Der Hintergrund würde aus 3 Teilen bestehen: oberer Rand mit Ecken, Mitte mit linkem und rechtem Rand (Das is der Abschnitt, der gestreckt werden soll), unterer Rand mit Ecken.
Richtung, in die ich strecken will:
Nur vertikal. Die Breite der Box weiß ich vorher und die Bilddatei ist auch entsprechend groß angelegt, weil links und rechts noch ein Rand dran ist.
Grober Verlauf nach dem Strecken:
Das soll kein Problem sein. Da kann ich wie der besoffene Affe schon gesagt hat ein entsprechend großes Bild nehmen.
Variante Layer drunter:
Klingt interessant, müsst ich mir aber mal anschaun, wie das richtig funktioniert und ob das mit allen gängigen Browsern einigermaßen nach was aussieht. Hat grad mal einer nen Artikel dazu da?
Variante PHP:
Ich würde mal sagen ja, ich kann PHP ziemlich gut, aber wie man Designelemente mit PHP machen soll, ist mir schleierhaft. Das würde nur gehen, wenn ich aus den Zeilenhöhen die höhe der Box berechnen könnte und das kann ich nicht, weil ich ja vorher schlecht weiß, welche Schriftart und -größe der User tatsächlich benutzt, wie die Zeilenabstände aussehen etc. So was könnt ich zwar theoretisch fest vorgeben, aber das würde die Seite für beispielsweise Leute mit Sehschwäche unbrauchbar machen und selbst dann wärs noch ein riesiger Aufwand, zu berechnen, wo die Zeilenumbrüche liegen, etc. Die Variante kommt also eher nicht in Frage.
Hm, Farbverläufe diesert Art sollte man sich beim Designen lieber sparen, das sie nicht vernünftig in HTML umgesetzt werden können (afaik) Du könntest aber einen Farbverlauf mit einer festen Höhe machen und diesen dann unten oder oben an der Box ausrichten. Dann geht der Farbverlauf zwar nicht über die ganze Box, aber so ist es immer noch besser als ohne.
Das könnte so aussehen:
HTML-Code:<div style="background: #FFFFFF url('dein verlauf von #FFFFF nach #000000') repeat-x bottom;">
Dein Inhalt....
</div>
Das hilft mir nich weiter, Manni. Würde bei dem Design ziemlich bescheiden aussehen. Außerdem wärs auf die Art gar nicht machbar, weil der Hintergrund zum Rand hin etwas dunkler wird. Ich kann also gar keine Hintergrundfarbe definieren, ohne auf diesen Effekt zu verzichten oder links und rechts nochmal extra Divs dranzukleben.
Bisher gefällt mir drunken monkeys Idee immer noch am besten. Wär nett, wenn mir schnell einer sagen würde, wie das genau geht.
Ich würd 2 Divs aufeinander positionieren:
<div id="menu" style="width:200px; height:300px; margin:20px; border:1px solid black;">
<img src="hintergrund.jpg" id="bgbild" style="position:absolute; width:200px; height:300px; z-index:1;"></div>
<div id="menuinhalt" style="position:absolute; width:200px; height:300px; z-index:2; padding:20px;">Menu<br>Menu<br>Menu<br></div>
Azusehen hier: http://www.lucleonhart.de/try/bgtest.html .. Sieht halt kacke aus gestreckt.. ^^
Danke, das hilft mir schon viel weiter.
Edit:
Funktioniert bei mir irgendwie nicht. Der Hintergrund passt zwar von der Größe her, aber der eigentliche Inhalt wird außerhalb dargestellt (Im IE rechts daneben, im Fuchs drunter), obwohl ich jeweils nen z-index gesetzt hab.
Hast denn auch das position: absolut gemacht? Ohne geht nämlich net.. Auch position:relative verarbeitet das z-index net
Hab ich.
Let me see your code please! *gg*
So, hab jetzt ein bisschen dran rumgebastelt mit folgendem Ergebnis:
Der Hintergrund ist mehr oder weniger gestreckt, aber sowohl im IE als auch im FF 100px nach rechts verschoben.
Mein Code:
Entsprechender Abschnitt in der CSS-Datei (Ursprünglicher Style)HTML-Code:<div style="width: 200px;">
<img src="images/navigation_body.png" style="position: absolute; width: 200px; height: 100%; z-index: 1;">
<div id="navigationbody" style="position: absolute; z-index: 2;">
<!-- Inhalt -->
</div>
</div>
Das ganze liegt noch mal in nem 200px breiten div mit Kopf- und Fußzeile. Höhe kann ich jeweils nicht angeben, die weiß ich ja nicht. Zeitweise is die Seite unter http://dfyx.isa-geek.net/radio verfügbar. Und ja, ich weiß, dass der Rest vom Design im Fuchs noch sehr zerschossen ist. Ich entwickel mit dem IE, weil es leichter ist, ne Seite, die der IE korrekt anzeigt, für den Fuchs umzusetzen, als umgekehrt.HTML-Code:#navigationbody {
/*background-image: url(images/navigation_body.png);*/
width: 180px; /* Fix für das falsche Verhalten des IE. Der Fuchs kriegt width: 200px in seine Datei */
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
Edit:
Ich seh grad, dass es in Opera an der richtigen Stelle ist, aber viel zu groß.