XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Mitwachsende DIV Container (http://xhtmlforum.de/showthread.php?t=36271)

Myjestic 26.07.2005 21:45

Mitwachsende DIV Container
 
Liste der Anhänge anzeigen (Anzahl: 1)
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.

lomtas 26.07.2005 23:01

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...

Myjestic 26.07.2005 23:31

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>

CSS:

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;
}


fricca 26.07.2005 23:54

Zitat:

Zitat von Myjestic
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.

Hm. Meinst du sowas?

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>

Hab's nur kurz im IE6 und FF getestet...

Grüße
fricca

Myjestic 27.07.2005 00:06

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.

fricca 27.07.2005 00:14

Zitat:

Zitat von Myjestic
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.

Das ist doch nicht schlimm...
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

Myjestic 27.07.2005 00:22

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?

Myjestic 27.07.2005 00:29

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(*)?

fricca 27.07.2005 00:34

Zitat:

Zitat von Myjestic
Kleine Frage hätte ich noch - Warum sind in deinem CSS Sternchen(*)?

* {margin:0; padding:0}
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.

Myjestic 27.07.2005 18:37

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?


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:24 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023