|
|||
Mitwachsende DIV Container
Hallo folgender Seitenaufbau:
Ein kompletter DIV Container erstreckt sich über die Seite (1), auf diesen soll ein Container gelegt werden, in dem sich Schrift befindet (2). Dieser soll mit zunehmenden Textinhalt nach unten größer werden. (Der Container muss wie in der Skizze angeordnet sein.) Ist Container 2 jetzt so groß, das er bei Container 3 ankommt, soll dieser sich auch nach unten vergrößern. Bisher: Ich konnte das schon fast so machen wie ich es will. Ich habe den Container 2 in Container 3 gepackt und (alles relativ positioniert) und habe Container 2 dann etwa -300px nach oben positioniert. Problem an der Sache ist, dass sich Container 3 dann aber schon ausgedehnt hat, d.h. es steht noch nichts an dieser Stelle aber da Container 2 sich schon erweitert hat, tut dies Container 3 auch? Wie kann ich das Problem lösen? Hoffe mal das klingt nicht zu verwirrend Danke im Voraus. |
Sponsored Links |
|
|||
ja, ich glaube ich habe ungefähr verstanden was du möchtest, aber ich glaube, dass du es dir zu kompliziert denkst.
Wie wäre z.B. folgender Ansatz: <div id="oben"> <div id="text"></div> </div> <div id="unten"></div> nun gibst du der id unten und der id oben einen festen prozentsatz, also z.b. 80/20. wenn der text-div dann größer wird als die 80%, dann sollte der div sich automatisch ausdehnen. Ich habs nicht ausprobiert, aber es wäre vielleicht ein ansatz... |
Sponsored Links |
|
|||
Mhh, so richtig isses nicht das wonach ich suche, habe mir mal Dein Beispiel zusammengebaut. Also wenn ich text in das gründe Feld reinschmeiße wird dieses auch größer (weil height: auto das blaue und das rote sollen genau an dieser Position bleiben. Wenn das grüne nun in das rote ragt, soll sich das rote auch mit nach unten ausdehnen, dabei aber die Position behalten.
HTML: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>CSS Kram</title> <link href="/Style/test.css" rel="stylesheet" type="text/css"> </head> <body> <div id="oben"> <div id="text"> text</p> text</p> text</p> </div> </div> <div id="unten"></div> </body> </html> Code:
#oben { background-color: #009999; height: 200px; width: 200px; position: relative; } #text { background-color: #CCFF99; height: auto; width: 100px; top: 20px; position: relative; } #unten { background-color: #FF6666; height: 50px; width: 200px; top: 0px; position: relative; } |
|
|||
Zitat:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>xxx</title> <style type="text/css"> * { margin:0; padding:0; } #text { background-color:#cf9; width:100px; margin:-150px auto 0; position:relative; /* wegen Stapelreihenfolge in IE */ } #wrap { background-color:#f66; min-height:50px; width:200px; border-top:200px solid #099; } * html #wrap { height:50px; /* IE versteht kein min-height */ } </style> </head> <body> <div id="wrap"> <div id="text"> text</p> text</p> text</p> text</p> text</p> </div> </div> </body> </html> Grüße fricca |
|
|||
Von der Art her ist das perfekt, genau so soll es laufen.
LEIDER fällt diese Variante aus, da im blauen Container ein Hintergrundbild mit fester Größe sein soll, und jetzt das Schlimme - im roten Container soll auch ein Hintergrundbild sein welches sich in y widerholt. Trotzdem erstmal meine Idee Verstanden, Danke. |
|
|||
Zitat:
Dann müsstest statt meines 200px-border wieder ein Element einsetzen und diesem das Hintergrundbild geben. Dem Roten macht ein BG-Bild auch nichts aus. Du musst nur irgendwas unternehmen, um "collapsing margins" zu verhindern - z.B. dem Roten (#wrap) ein padding-top geben. Grüße fricca |
|
|||
mh kann ich mir grade gar nicht so richtig vorstellen, Du hast ja nur 2 Container erstellt. anstatt dem roten container ein sich wiederholendes bild einzusetzen funktioniert schon mal, wie bekomme ich aber statt dem blauen rand ein bild mit fester größe als hintergrund?
|
|
|||
JUHUJUHU, alles klar ich habe es, also einfach noch ein div Container vor den WRAP Container setzen und da das Bild reinhaun.
Den Rahmen des Wrap Container komplett wegnehmen! Ich danke Dir tausendfach!!!!!! Kleine Frage hätte ich noch - Warum sind in deinem CSS Sternchen(*)? |
|
|||
Zitat:
Setzt alle Randabstände auf Null (Universalselektor) * html #wrap Hack - liest nur der IE ein. Alle anderen Browser wissen, dass es vor dem html-Element kein weiteres mehr gibt... Alle anderen Sternchen gehören zu Kommentaren. |
Sponsored Links |
|
|||
alles klar, verstehe.
Also habe das Ganze jetzt auf meine Seite umgesetzt. Funktioniert auch in Opera und Netscape. Nochmal vielen Dank !!! Zu meinem Problem http://www.xhtmlforum.de/viewtopic.php?t=5007 hast du nicht zufällig ne Idee? |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hintergrundbild via css sprite dynamisch am Div Container anpassen. | BallaBalla07 | CSS | 2 | 04.06.2013 16:40 |
Linkverhalten im IE6 | ChOpSueY! | CSS | 19 | 19.05.2008 23:48 |
joomla template entschlüsseln | nieselfriem | CSS | 2 | 18.03.2008 14:12 |
div container verschachteln | blau | CSS | 2 | 05.12.2006 20:44 |
2 div container, 2. orientiert sich am 1. | kemai | CSS | 9 | 21.06.2005 15:28 |