zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Mitwachsende DIV Container

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.07.2005, 21:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2005
Beiträge: 8
Myjestic befindet sich auf einem aufstrebenden Ast
Standard 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.
Angehängte Grafiken
Dateityp: gif layout_120.gif (12,4 KB, 347x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.07.2005, 23:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.11.2004
Beiträge: 547
lomtas befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.07.2005, 23:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2005
Beiträge: 8
Myjestic befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Mit Zitat antworten
  #4 (permalink)  
Alt 26.07.2005, 23:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 27.07.2005, 00:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2005
Beiträge: 8
Myjestic befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 27.07.2005, 00:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 27.07.2005, 00:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2005
Beiträge: 8
Myjestic befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #8 (permalink)  
Alt 27.07.2005, 00:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2005
Beiträge: 8
Myjestic befindet sich auf einem aufstrebenden Ast
Standard

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(*)?
Mit Zitat antworten
  #9 (permalink)  
Alt 27.07.2005, 00:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 27.07.2005, 18:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2005
Beiträge: 8
Myjestic befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:08 Uhr.