nicht angemeldet
dynamischer / flexibler Farbverlauf
So ich hatte schon gestern mal einen thread aufgemacht wo ich nach nem 3 Spalten Layout gefragt habe , weil ich gedacht habe ich wäre zu blöd ein "dynamisch , fest , dynamisch"-Layout hinzubekommen. Naja ich werde euch mal das eigentlich Problem schildern was aber von dem Problem des Layouts abweicht und ich deswegen einen neuen Thread aufmache.
Also ich möchte einen Festen Inhaltsbereich haben der in der mitte der Seite sitzt haben. Den Inhaltsbereich in der mitte zu positionieren ist kein Problem. Dann habe ich vor links und rechts einen Farbverlauf zu realisieren der von einer Farbe X in eine Farbe Y übergehen soll .
Bis jetzt wollte ich das mit zwei Grafiken ( breite 750px , höhe 1px ) realisieren die als Hintergrund in der jeweiligen div Box Platz finden sollten. Bsp. hier http://www.pad8626.de/test/
Ich weiß nicht ob es überhaupt möglich ist eine dynamische Box links und eine rechts zu platzieren die wirklich nur bis zu dem Punkt gehen wo die Center Box dann anfängt. Und diese linke und rechte Box dann mit einem Fabrverlauf zu füllen der dann je nach Fenstergröße sich dynamisch anpasst.
Wenn es möglich ist wie? Also ich habs jetzt auch mal mit ner Tabelle versucht da klappt es auch nicht so wie ich das gern hätte. Ich hab langsam das Gefühl das es gar nicht geht
-
Hi
Also zunächstmal hab ich gelernt dass am Computer prinzipiell alles möglich ist -- es ist nur eine Frage des Aufwandes und der kompatibilität (konkret: in welchen Browsern funktioniert es dann)..Zu deinem Problem:
Geb dem body den linken Verlauf als hintergrund, repeat-y, position left. Darein ein div mit dem rechten verlaufals hintergrund, repeat-y, position right. darein dann dein container.
Noch zwei Tips: Um den Banner oben darzustellen kannst du ein <h1> mit einer image-replacement-technik [http://meiert.com/de/publications/articles/20050513/] verwenden. Der vorteil ist, dass du z.B. b4eim Drucken statt des Banners den Titel anzeigen lassen kannst.
Um den container auf volle höhe zu bringen, musst du html, body und dem container jeweils eine höhe von 100% spendieren.Wenn du das alles zusammenbaust sieht das dann so aus:
- HTML -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> <title>Titel</title> </head> <body> <div id="box"> <div id="container"> <h1>Titel</h1> blup <div class="center" ></div> <div class="footer" ></div> </div> </div> </body> </html>- CSS -
* { padding:0px; margin:0px; } html { height: 100%; } body { text-align: center; background: url(images/verlauf_links.png) repeat-y left; height: 100%; } #box { background: url(images/verlauf_rechts.png) repeat-y right; height: 100%; } #container { text-align: lefT; width:759px; margin: 0px auto; background-color:#C0C0C0; height:100%; } h1 { background: url(images/banner_test_2.jpg) no-repeat; width: 760px; height: 130px; font-size: 1px; color: black; }Beachte auch die media-angabe bei der einbindung des Stylesheet. Dadurch gilt das CSS nicht in der druckansicht und der Titel wird dort wieder normalgroß dargestellt.
Gruß, Peter
-
So bzw ähnlich hatte ich das schon. Das ist aber nicht das was ich will. Ich will das "links | Center | rechts " dargestellt wird so das links Farbe X - Y und rechts Farbe Y - X zu sehen ist und nicht hinter dem Container verschwindet. Also der Verlauf soll komplett zu sehen sein sowohl in kleinen als auch großen Fenstern , aus dem Grund hab ich erst mal 750px große Grafiken gewählt.
Aber danke erst mal.
-
Ich weiß nicht ob es überhaupt möglich ist eine dynamische Box links und eine rechts zu platzieren die wirklich nur bis zu dem Punkt gehen wo die Center Box dann anfängt. Und diese linke und rechte Box dann mit einem Fabrverlauf zu füllen der dann je nach Fenstergröße sich dynamisch anpasst.
Kleiner Hinweis:
background-images sind nicht skalierbar. Soll heissen, dass sich der Farbverlauf links und rechts nicht dynamisch zur Fenstergrösse anpassen wird (sondern einfach der sichtbare Ausschnitt kleiner wird).
Ansonsten wärs mit meiner Lösung (https://forum.selfhtml.org/?t=148417&m=962974) realisierbar gewesen indem den divs links_inhalt und rechts_inhalt den jeweiligen farbverlauf als hintergrund zugewiesen hättest. Denn diese (bzw. deren Inhalt) geht nur bis zur "Center Box".
Kurz: Der Inhalt (bzw. die äusseren DIV) kann sich der Fenstergrösse anpassen und geht nur bis zur Center Box, der Hintergrund nicht.
Gruss
Tinu-
Hm ja aber selbst das mit den links und rechts wenn ich da das als Hintergrund einfüge schneidet er es ja ab. Also geht es schon mal 100% nicht als Hintergrundgrafik. Aber kann es irgendwie anders gehen?
Kann ich mit den Grafiken evtl die Div Boxen ausfüllen so das sie sich dann je nach dem skalieren??
-
Hm ja aber selbst das mit den links und rechts wenn ich da das als Hintergrund einfüge schneidet er es ja ab. Also geht es schon mal 100% nicht als Hintergrundgrafik.
sag ich doch :D
Kann ich mit den Grafiken evtl die Div Boxen ausfüllen so das sie sich dann je nach dem skalieren??
Theoretisch schon. Du kannst die Farbverläufe (Bilder) in den DIV Boxen einfügen und mit style="width:100%; height:100%;" versehen. Achtung: Dann musst aber auch in den CSS-Angaben der beiden DIV-Boxen height:100%; schreiben und padding auf 0 setzen.
Allerdings hab ichs nicht getestet und kann mir vorstellen, dass da der eine oder andere Browser nicht das gewünschte ausgeben wird. So oder so ists nicht ne sonderlich schöne Lösung. Anders gehts mit den Farbverläufen meines Wissens aber nicht.
greetz
tattergreis-
Funktioniert super :-) . Naja manchaml sieht man den Wald vor lauter Bäumen nicht. Ich muss es nur noch in den Griff bekommen das der IE das in irgend einer Weise auch frisst, weil das Problem mit dem dynamischen Layout ja weiter besteht ;-) . Danke
-
Hi
Was mir da noch einfällt: http://olaf-bosch.de/bugs/scalieren.htmlGruß, Peter
-
Funktioniert super :-) . Naja manchaml sieht man den Wald vor lauter Bäumen nicht. Ich muss es nur noch in den Griff bekommen das der IE das in irgend einer Weise auch frisst, weil das Problem mit dem dynamischen Layout ja weiter besteht ;-) . Danke
Bitte. Beim IE problem kann ich Dir nicht gross helfen, da ich nur die alte Version drauf hab (und auch die nur weil ich zu faul bin um sie zu deinstallieren *lol*).
Wenn Dir hier keiner helfen kann, google einfach mal nach CSS-Hacks für IE zum Thema horizontal zentrieren. Findest sicher was. Ich glaub ich hab mal was gelesen dass beim IE das Vorfahrenelement des divs welches man zentrieren möchte mit text-align:center; formatiert (und das div selbst dann wieder mit text-align:left;..je nach gewünschtem Textfluss halt). Bei meiner Vorlage wäre dann wohl der body das "Vorfahrenelement". Ziemlich umständlich. Aber findest sicher sowas.greetz
tattergreis-
Ich hab hinbekommen es mal wieder ein IE genauigkeits problem ich hab links 50% width und rechts 49% und dann funktioniert es einwandfrei beim IE7 ich hoff mal das es in anderen browsern auch funktioniert.
danke danke danke
-
-
-
-
-
-