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.
--
Geändert von DFYX (17.01.2006 um 22:56 Uhr)
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 human is a system for converting dust billions of years ago into dust billions of years from now via a roundabout process which involves checking email a lot.
Sicher nützt das was.Zitat von drunken monkey
einzelnes Bild:
[FONT="Courier New"]repeat[/FONT]:
usw.
einzelnes Bild:
[FONT="Courier New"]repeat[/FONT]:
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.
--A human is a system for converting dust billions of years ago into dust billions of years from now via a roundabout process which involves checking email a lot.
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.
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.
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.
--A human is a system for converting dust billions of years ago into dust billions of years from now via a roundabout process which involves checking email a lot.
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.Ja, sicher, hast recht.
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.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:
--
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.
--
Geändert von DFYX (21.01.2006 um 16:39 Uhr)
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)
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.
Edit:
Ich seh grad, dass es in Opera an der richtigen Stelle ist, aber viel zu groß.
--
Geändert von DFYX (24.01.2006 um 19:08 Uhr)
Berechtigungen
Zitieren
