zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div auf max Höhe bringen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.04.2007, 23:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2007
Beiträge: 7
McCoRmIcK befindet sich auf einem aufstrebenden Ast
Standard Div auf max Höhe bringen?

Hallo

Suche jetzt schon ewig nach ner Lösung aber finde keine die mich weiter bringt.

Hab folgenden Code oder hier klicken zum angucken.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title><? echo $dyntitle; ?></title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
	<!--
		@charset "utf-8";
		* {
        	margin: 0;
        	padding: 0;
        	border-collapse: collapse;
        	border-spacing: 0;
		}
		html, body {
        	color: #ccc;
        	background: #303030;
        	line-height: 1.45;
		}
		body {
			width:983px;
			margin:10px auto;
			text-align:center;
			font:12px Verdana, Sans-Serif;
		}
		#body2 {
			height:100%;
			border:1px solid #ff0000;
			padding:2px;
		}
		#header {
			width: 983px;
			height: 95px;
			border:1px solid #ff0000;
		}
		#left {
			float:left;
			width:179px;
			clear:right;
			border:1px solid #ff0000;
		}
		#right {
			float:right;
			width:153px;
			padding:6px 0px 6px 0px;
			border:1px solid #ff0000;
		}
		#content {
			margin:0px 0px 0px 179px;
			width:651px;
			position:absolute;
			border:1px solid #ff0000;
		}
		#footer {
			clear: both;
			color : #fff;
			font-size : 9px;
			text-align: center;
			line-height:25px;
			border:1px solid #ff0000;
		}
	-->
	</style>
</head>
<body class="">

<div id="body2">

	<div id="header">
		#header - > Hier stehen paar Links und ein Logo
	</div>

	<div id="left">
		#left - > Hier ist ein Menü und Blöcke die weiter runter gehen. Runter gehts mit BRBRBR<br /><br /><br /><br /><br /><br />BRBR
	</div>

	<div id="right">
		#right - > Hier ist ein Warenkorb und Kram der toll aussieht und auch weiter runter geht. Runter gehts mit BRBRBR<br /><br /><br /><br /><br /><br />BRBR
	</div>

	<div id="content">
		#content - > Hier steht total viel, manchmal auch Inhalt
	</div>

	<div id="footer">
		#footer - > Hier stehen paar Links
	</div>

</div>

</body>
</html>
So ich möchte das, dass DIV #content immer auf max Größe ist. D.h. immer so groß wie #left oder #right. Je nach dem was halt durch den Inhalt größer wird. Das DIV #content muss so groß werden weil darin mehrere Divs kommen die eine Box mit verschiedenen Hintergrundgrafiken bilden.
Faux Coloumns hab ich schon gelesen aber nicht 100% verstanden ob ich damit das Problem löse.
Wenn ich dem #content height:100%; gebe wird er zu groß. Also 100% vom Viewport glaube ich.

Für Hilfestellung wäre ich dankbar.


PS: Code ist abgespeckt und jedes Div hat nen Border zum besseren gucken.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.04.2007, 23:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.789
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 McCoRmIcK Beitrag anzeigen
Das DIV #content muss so groß werden weil darin mehrere Divs kommen die eine Box mit verschiedenen Hintergrundgrafiken bilden.
Das verstehe ich nicht.
Ich sehe überhaupt keine Hintergrundgrafiken in deinem Code.
Warum hast du #content absolut positioniert?

Zitat:
Faux Coloumns hab ich schon gelesen aber nicht 100% verstanden ob ich damit das Problem löse.
Und ich habe leider nicht verstanden, *welches* Problem du lösen willst.
Faux Columns setzt man ein, um optisch gleichlange Spalten zu erzeugen.
Wenn du keine unterschiedlichen Hintergrundfarben/-bilder bei den Spalten willst, dann brauchst du auch keine Faux Columns.

Zitat:
PS: Code ist abgespeckt und jedes Div hat nen Border zum besseren gucken.
Die border willst du eigentlich gar nicht haben?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.04.2007, 00:21
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.850
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Ach so, Du willst, wenn z.B.: #left 300px hoch ist - verursacht durch seinen Inhalt - das auch #content 300px hoch ist? Gib #content einfach 100% an Höhe, würde ich sagen, dann richtet es sich immer an der Höhe des Elternelements aus.

Und body2 height:auto;
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #4 (permalink)  
Alt 13.04.2007, 08:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2007
Beiträge: 7
McCoRmIcK befindet sich auf einem aufstrebenden Ast
Standard

ArcVieh hats genau erkannt.

Man sieht keine Grafiken weil der Code sonst viel zu aufgeblasen wäre.

Also ich hab mal body2 auf height:auto; gesetzt und bei content height:100%; und position raus genommen.

Leider macht er dann nicht #content auch nur so groß wie der Inhalt es braucht.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.04.2007, 09:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.789
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 McCoRmIcK Beitrag anzeigen
ArcVieh hats genau erkannt.
Meinst du?

Zitat:
Man sieht keine Grafiken weil der Code sonst viel zu aufgeblasen wäre.
Dem kann ich nicht folgen.
Nochmal: setz deine Grafiken ein, damit man sehen kann, was das werden soll. Deine Beschreibung ist unzureichend.
Und entferne die border, wenn du sie nicht wirklich willst. (Stichwort: Box Modell, Collapsing Margins). Wenn du deine Elemente unterscheidbar machen willst, dann nimm Hintergrundfarben.

Zitat:
Also ich hab mal body2 auf height:auto; gesetzt und bei content height:100%; und position raus genommen.

Leider macht er dann nicht #content auch nur so groß wie der Inhalt es braucht.
Ja, so ist das. height in Prozent bezieht sich auf den height-Wert des Elternelements. Das Elternelement hat keine explizite height-Angabe, somit hat #content die Höhe "auto".
Nachzulesen: Visual formatting model details

Wie du im Artikel zu Faux Columns bereits gelesen hast, gibt es gleich lange Spalten nicht einfach so. Damit man dir weiterhelfen kann, muss man wissen, was *genau* du erreichen willst.
Mit Zitat antworten
  #6 (permalink)  
Alt 13.04.2007, 10:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2007
Beiträge: 7
McCoRmIcK befindet sich auf einem aufstrebenden Ast
Standard

Ok hier mal der Code mit den Grafiken im #content

Oder hier klicken

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title><? echo $dyntitle; ?></title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
	<!--
		@charset "utf-8";
		* {
        	margin: 0;
        	padding: 0;
        	border-collapse: collapse;
        	border-spacing: 0;
		}
		html, body {
        	color: #000;
        	background: #303030;
        	line-height: 1.45;
		}
		body {
			width:983px;
			margin:10px auto;
			text-align:center;
			font:12px Verdana, Sans-Serif;
		}
		#body2 {
			height:auto;
			background: #00ff00;
			
		}
		#header {
			width: 983px;
			height: 95px;
			background: #ff0000;
		}
		#left {
			float:left;
			width:179px;
			clear:right;
			background: #0000ff;
		}
		#right {
			float:right;
			width:153px;
			padding:6px 0px 6px 0px;
			background: #f0f000;
		}
		#content {
			margin:0px 0px 0px 179px;
			width:651px;
			background: #f000f0;
			position:absolute;
		}
		#footer {
			clear: both;
			color : #000;
			font-size : 9px;
			text-align: center;
			line-height:25px;
			background: #00f0f0;
		}
	-->
	</style>
</head>
<body class="">


<div id="body2">
	<div id="header">
		#header - > Hier stehen paar Links und ein Logo
	</div>
	<div id="left">
		#left - > Hier ist ein Menü und Blöcke die weiter runter gehen. Runter gehts mit BRBRBR<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />BRBR
	</div>

	<div id="right">
		#right - > Hier ist ein Warenkorb und Kram der toll aussieht und auch weiter runter geht. Runter gehts mit BRBRBR<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />BRBR
	</div>

	<div id="content">
		<div style="z-index:1;background-image: url('../img/rand_links.gif');background-repeat: repeat-y;position:absolute;left:0px;top:0px;width:597px;height:100%;"></div>
		<div style="z-index:1;background-image: url('../img/rand_rechts_mitte.gif');background-repeat: repeat-y;position:absolute;right:0px;top:0px;width:54px;height:100%;"></div>

		<div style="z-index:2;background-image: url('../img/rand_oben.gif');background-repeat: no-repeat;position:absolute;left:0px;top:0px;width:597px;height:2px;"></div>
		<div style="z-index:2;background-image: url('../img/rand_rechts_oben.gif');background-repeat: no-repeat;position:absolute;right:0px;top:0px;width:54px;height:352px;"></div>

		<div style="z-index:2;background-image: url('../img/rand_rechts_unten.gif');background-repeat: no-repeat;position:absolute;right:0px;bottom:0px;width:54px;height:31px;"></div>
		<div style="z-index:2;background-image: url('../img/rand_unten.gif');background-repeat: no-repeat;position:absolute;left:0px;bottom:0px;width:597px;height:6px;"></div>

		<div style="z-index:3;position:relative;left:0px;top:0px;width:597px;padding:8px;">
			#content - > Hier steht total viel, manchmal auch Inhalt<br /><br />paar brrr
		</div>
	</div>
	
	<div id="footer">
		#footer - > Hier stehen paar Links
	</div>
</div>


</body>
</html>
Die #content Box muss immer so min. groß sein wie die Linke oder Rechte Spalte darf aber auch durch Inhalt größer werden.
1. damit es Layout passt
2. damit die Hintergrundgrafiken an den richtigen Plätzen stehen.

Geändert von McCoRmIcK (13.04.2007 um 10:14 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 13.04.2007, 10:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2007
Beiträge: 7
McCoRmIcK befindet sich auf einem aufstrebenden Ast
Standard

Hab noch ne zweite Seite gemacht wo ich die Sache anders angegangen bin.
hier klicken

Da funktioniert es jetzt im FF aber im IE net.

Die Frage: Ist der Lösungsweg so in Ordnung oder gibt es eine schönere Lösung die direkt im IE funktioniert. Oder ist es angebracht für den IE nen Fix zu schreiben?


Hier der Code zum angucken ...

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title><? echo $dyntitle; ?></title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
	<!--
		@charset "utf-8";
		* {
        	margin: 0;
        	padding: 0;
        	border-collapse: collapse;
        	border-spacing: 0;
		}
		html, body {
        	color: #000;
        	background: #303030;
        	line-height: 1.45;
		}
		body {
			font:12px Verdana, Sans-Serif;
		}
		.body2 {
			position:relative;
			width:983px;
			background: #00ff00;
			margin:auto;
		}
		#header {
			width: 983px;
			height: 95px;
			background: #ff0000;
		}
		#left {
			float:left;
			width:179px;
			clear:right;
			background: #0000ff;
		}
		#right {
			float:right;
			width:153px;
			padding:6px 0px 6px 0px;
			background: #f0f000;
		}
		#content {
			margin:0px 0px 0px 179px;
			width:651px;
			background: #f000f0;
			position:absolute;
			height:100%;			
		}
		#footer {
			color : #000;
			font-size : 9px;
			text-align: center;
			line-height:25px;
			background: #00f0f0;
			width: 983px;
		}
	-->
	</style>
</head>
<body class="">


<div class="body2">
	<div id="header">
		#header - > Hier stehen paar Links und ein Logo
	</div>
</div>
<div class="body2">
	<div id="left">
		#left - > Hier ist ein Menü und Blöcke die weiter runter gehen. Runter gehts mit BRBRBR<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />BRBR
	</div>

	<div id="right">
		#right - > Hier ist ein Warenkorb und Kram der toll aussieht und auch weiter runter geht. Runter gehts mit BRBRBR<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />BRBR
	</div>

	<div id="content">
		<div style="z-index:1;background-image: url('../img/rand_links.gif');background-repeat: repeat-y;position:absolute;left:0px;top:0px;width:597px;height:100%;"></div>
		<div style="z-index:1;background-image: url('../img/rand_rechts_mitte.gif');background-repeat: repeat-y;position:absolute;right:0px;top:0px;width:54px;height:100%;"></div>

		<div style="z-index:2;background-image: url('../img/rand_oben.gif');background-repeat: no-repeat;position:absolute;left:0px;top:0px;width:597px;height:2px;"></div>
		<div style="z-index:2;background-image: url('../img/rand_rechts_oben.gif');background-repeat: no-repeat;position:absolute;right:0px;top:0px;width:54px;height:352px;"></div>

		<div style="z-index:2;background-image: url('../img/rand_rechts_unten.gif');background-repeat: no-repeat;position:absolute;right:0px;bottom:0px;width:54px;height:31px;"></div>
		<div style="z-index:2;background-image: url('../img/rand_unten.gif');background-repeat: no-repeat;position:absolute;left:0px;bottom:0px;width:597px;height:6px;"></div>

		<div style="z-index:3;position:relative;left:0px;top:0px;width:597px;padding:8px;">
			#content - > Hier steht total viel, manchmal auch Inhalt<br /><br />paar brrr
		</div>
	</div>
	<div style="clear:both;"></div>
</div>
<div class="body2">
	<div id="footer">
		#footer - > Hier stehen paar Links
	</div>
</div>


</body>
</html>
Mit Zitat antworten
  #8 (permalink)  
Alt 13.04.2007, 11:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.789
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

Es ist für IE so (abs. Pos.) nicht lösbar.
Außerdem ist dein Code sehr unschön. Entferne bitte die leeren DIVs, die du nur für die Hintergrundbilder verwendest.
Mein Ansatz wäre: den Teil des Hintergrundes, der sich wiederholt in den umgebenden Container.
Den oberen Teil des Hintergrundes in #content.
Den unteren Teil in den Footer (mit negativem margin nach oben ziehen).
Mit Zitat antworten
  #9 (permalink)  
Alt 13.04.2007, 11:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2007
Beiträge: 7
McCoRmIcK befindet sich auf einem aufstrebenden Ast
Standard

Die zweite Lösung ist schon wieder hinfällig
Dabei wird #content nicht größer wenn der Inhalt größer wird

Mit dem Hintergrund aufteilen muss ich jetzt erst mal testen.

Denke mal dafür muss ich paar Grafiken zusammen packen.
Die #content Box besteht aus 6 Grafiken wovon sich nur 2 wiederholen.



Also ist es generel schlecht Leere Divs zu benutzen?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.04.2007, 12:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.789
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 McCoRmIcK Beitrag anzeigen
Also ist es generel schlecht Leere Divs zu benutzen?
Ja, genau. Man braucht sie auch so gut wie nie.
Elemente sollen Inhalt auszeichnen. Wenn es keinen Inhalt gibt, braucht es auch kein Element (Hintergrundbilder sind kein Inhalt, nur Darstellung).
Lies mal was zu semantischem Markup:
Vorsprung durch Webstandards | Retro-Coding: Semantischer Code ist der Anfang von gutem Design
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
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 16:53
Header entfernen tripple CSS 17 15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 10:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 19:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:50 Uhr.