zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV: Höhe soll sich automatisch anderen DIV anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.09.2006, 20:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.09.2006
Beiträge: 2
OnTheRun befindet sich auf einem aufstrebenden Ast
Standard DIV: Höhe soll sich automatisch anderen DIV anpassen

Hallo allerseits,
ich habe folgendes Problem mit einem CSS-Layout:

Anschauen könnt ihr euch das Problem hier:
Seite: http://www.quarz.cc/TEST/
CSS: http://www.quarz.cc/TEST/main.css

Ich hätte gerne, dass sich die Höhe des DIV-Tags "container" (weiss) dem höchsten darin enthaltenen Element anpasst. In diesem Falle wäre dies das DIV "content".
Dem DIV "bottom_right" habe ich als height-attribut 100% zugewiesen und hätte erwartet, dass es sich dem container-tag anpasst, da es ja von diesem umschlossen wird, doch dies scheint nicht der Fall zu sein.
Sind meine "Anforderungen" überhaupt möglich? Falls ja, wie erreiche ich das oben Gewünschte?

Gruss und Vielen Dank

Geändert von OnTheRun (24.09.2006 um 20:52 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.09.2006, 01:22
Benutzerbild von dr4g0n
dr4gonstyle
XHTMLforum-Mitglied
 
Registriert seit: 17.05.2006
Ort: Wesel NRW
Beiträge: 144
dr4g0n befindet sich auf einem aufstrebenden Ast
Standard

steht in den faq im css bereich !
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.09.2006, 11:34
Benutzerbild von Siegfried
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.08.2006
Beiträge: 465
Siegfried befindet sich auf einem aufstrebenden Ast
Standard

Hi,

das problem hierbei ist das float, das nimmt den so formatierten Container aus dem Textfluss heraus. Damit hat der umgebende Container eine Höhe von Null, da er ja Nichts mehr enthält.

Das ist allerdings ein etwas kniffliges Problem. Du könntest beispielsweise einen weiteren Container unten drunter positionieren, ohne float, aber mit clear:both. Allerdings würde dieser Hilfscontainer, der ja keinen Inhalt hat, dem "semantic markup" widersprechen. Möglicherweise kannst Du auch den umgebenden Contaier ebenfalls floaten. Habe ich allerdings noch nie gemacht und bin daher auf das angewiesen, was ich irgendwo aufgeschnappt habe
Mit Zitat antworten
  #4 (permalink)  
Alt 25.09.2006, 13:48
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Steht auch alles im FAQ ...
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #5 (permalink)  
Alt 25.09.2006, 14:35
Benutzerbild von Siegfried
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.08.2006
Beiträge: 465
Siegfried befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Boris
Steht auch alles im FAQ ...
Ganz bestimmt. Nur ist es für Neulinge leichter, wenn sie die Antwort direkt bekommen, anstatt erst lange in der FAQ suchen zu müssen.
Mit Zitat antworten
  #6 (permalink)  
Alt 25.09.2006, 16:08
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Nun rate mal, wozu das FAQ bei uns hier eingerichtet wurde?
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #7 (permalink)  
Alt 25.09.2006, 16:40
Benutzerbild von Siegfried
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 11.08.2006
Beiträge: 465
Siegfried befindet sich auf einem aufstrebenden Ast
Standard

...um Diejenigen, die schon länger hier im Forum sind, und die wissen, wo hier was gesucht werden muß, mit den nötigen Informationen zu versorgen?
Mit Zitat antworten
  #8 (permalink)  
Alt 25.09.2006, 16:56
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

... oder um nicht ständig auf die gleichen Fragen antworten zu müssen?
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #9 (permalink)  
Alt 25.09.2006, 19:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.09.2006
Beiträge: 2
OnTheRun befindet sich auf einem aufstrebenden Ast
Frage

Hallo,
vielen Dank für eure Antworten

EDIT2: Ok, ich habe nun durch Weglassen des height-Attributes bei container und container-right, so wie der Verwendung von min-height das gewünschte Resultat erhalten. Nun fehlt nur noch eines und zwar, dass sich middle_right_02 container_right anpasst.
Dies tut es aber nicht. Container_right sieht wie folgt aus:
Code:
#container_right {
	background-color: #00FF00;
	
	width: 624px;
	min-height: 400px;
	
	float: left;
}
somit passt er sich content an. Middle_right_02 sieht so aus:
Code:
#middle_right_02 {
	background-color: #006666;
	
	width: 200px;
	height: 100%;
	
	float: right;
}
dieser sollte sich ja nun eigentlich der Höhe von container_right (welche ja nach content variiert) anpassen oder liege ich hier falsch?

EDIT: Ich bin noch auf ein weiteres Problem gestossen: Ich habe content mal eine Höhe von 800px zugwiesen, somit ist er grösser als container. Dies wäre ok, nur sollte sich container ausdehnen und somit gleichhoch werden wie content (oben genanntes Problem). Das zweite Problem ist, dass wenn ich container_right keine Höhe gebe, dehnt er sich und passt sich der Höhe von content an. Dies ist ok so.
Nun hätte ich aber gerne dass middle_right_02 (content, middle_right_01 und middle_right_02 liegen alle in container_right) sich dem container_right anpasst (und somit content). Ich habe dies per height: 100% versucht, doch dies nützt nichts, da ja der übergeordnete Container (container_right) keine Höhenangabe hat und sich der Höhe von content anpasst. Somit ist middle_right_02 so hoch wie sein Inhalt (momentan &nbsp. Er sollte sich aber per height 100% dem übergeordneten Container in der Höhe (und somit content) anpassen. Wie bewerkstellige ich dies?

Ich habe vorher (recht ausgiebig) bei Google und hier im Forum (wenig ausgiebig ) gesucht und bin auf die im FAQ genannte Seite schon gestossen. Ich habe dies mit dem clearfix bereits probiert, leider ohne Erfolg.
Im besagten Artikel wird ja auch beschrieben, dass die "alte" Variante ein
Code:
<div style="clear: both;"></div>
ist. Dies hat bei mir jedoch auch nichts genützt.
Ich habe heute ein wenig daran rumgebastelt und das Layout sieht nun so aus:

Seite: http://www.quarz.cc/TEST/
CSS: http://www.quarz.cc/TEST/main.css

Was ich nicht ganz verstehe ist Folgendes:

Ich habe beispielsweise jetzt einen zusätzlichen Container (container_right) eingebaut. Dieser hat height 100%. Firefox interpretiert dies korrekt und macht mir eine Höhe von 768px daraus, da der übergeordnete Container (container) eine solche Höhe besitzt. Was mich allerdings stört ist, dass container_right über den Rand von container herausragt. Ich hätte gern, dass die Höhe von container_right im Prinzip 100%(768px) - top3.height (200px) beträgt, dann wäre das wiederum korrekt. Die andere Lösung wäre eben, wie schon erwähnt der Clearfix. IE 6 macht (fälschlicherweise) das von mir gewünschte Ergebnis, er stretcht container auf die Gesamthöhe (container_right + top3), also 968px. Wie kriege ich dies hin?
Ich habe es wie gesagt mit clearfix und clear: both probiert:

Code:
<div id="container">
		<div id="top1">&nbsp;</div>
		<div id="top2">&nbsp;</div>
		<div id="top3">&nbsp;</div>
		<div id="menu">&nbsp;</div>
		<div id="container_right">
			<div id="content">&nbsp;</div>
			<div id="middle_right_01">&nbsp;</div>
			<div id="middle_right_02">&nbsp;</div>
		</div>
		<div id="bottom_left">&nbsp;</div>
		<div id="bottom_right">&nbsp;</div>
		<div style="clear: both">&nbsp;</div>
	</div>
bzw.

Code:
<div id="container" class="clearfix">
		<div id="top1">&nbsp;</div>
		<div id="top2">&nbsp;</div>
		<div id="top3">&nbsp;</div>
		<div id="menu">&nbsp;</div>
		<div id="container_right">
			<div id="content">&nbsp;</div>
			<div id="middle_right_01">&nbsp;</div>
			<div id="middle_right_02">&nbsp;</div>
		</div>
		<div id="bottom_left">&nbsp;</div>
		<div id="bottom_right">&nbsp;</div>
	</div>
und im CSS:
Code:
<style>
.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
  
 .clearfix {
display: inline-block;
}  

/* Holly Hack Targets IE Win only \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End Holly Hack */
</style>
Hat jemand eine Idee, wo mein (Denk-)Fehler liegt?

Vielen Dank und Gruss

Geändert von OnTheRun (25.09.2006 um 20:00 Uhr)
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
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
IE soll width von div bei übergroßem inhalt NICHT automatisch anpassen. Wie? *vivian CSS 4 15.09.2008 01:42
Div in der Höhe anpassen cb01 CSS 2 15.03.2007 04:41
div höhe anpassen Dgx CSS 3 02.03.2007 19:02
DIV Länge automatisch anpassen judicious CSS 10 08.05.2006 17:30


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:31 Uhr.