zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem bei Anordnung- footer nach div mit variabler Höhe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.01.2010, 15:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.01.2010
Beiträge: 8
gombi befindet sich auf einem aufstrebenden Ast
Standard Problem bei Anordnung- footer nach div mit variabler Höhe

Hallo!

Hab wieder mal ein kleines Grundsatzproblem. Ich habe einen Menübalken, einen Container und einen footer. Die ersten beiden div's sind absolut zentriert positioniert. (die absolute Positionierung muss so bleiben, da ich ohne diese Probleme mit dem meinem drop down menü hatte) Die Höhe von "Container" ist variabel. Und genau hier liegt das Problem, denn der footer darunter will sich nicht unter dem div "Container" anordnen.

Ich bekomm das nicht hin. Natürlich klappt es wenn ich das div "footer" innerhalb des div's "Container" verwende, aber das ist keine elegante Lösung. Bin über euren Rat sehr dankbar!!

Hier das vereinfachte Beispiel:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">
	
	#menubalken {
	background-color: green;
	position: absolute;
	top: 0px;
	left: 50%;
	margin-left: -400px;
	width: 800px;
	z-index: 2;
	height: 80px;
	}
	
	#container { 
	width: 800px; 
	position: absolute;
	top: 80px;
	left: 50%;
        z-index: 1;
       margin-left: -400px;
       background-color: #ddf;
	}
	
	
	
	#footer{
	background-color: red;
	width: 800px;
	height: 45px;
	}

	
	
</style>


 	
 	</head>

<body>

	<div id="menubalken">
	</div>
	
	<div id="container">
	<p> Zuerst müssen html und body auf eine Höhe von 100% gebracht werden. Dies ist nötig, damit sich nachfolgende Prozent-Angaben an dieser Basis orientieren. Mittels Seite overflow:hidden verhindert man, dass der Browser Scrollbalken darstellt, welche nicht benötigt werden - so würde z.B. der Internet Explorer ausgegraute Scrollbalken darstellen. Sowohl margin als auch padding wurden auf 0 gesetzt, um Innen- und Außenabstände zu entfernen.

Für den content_container definiert man beispielsweise eine Höhe von 95% und weist ihm die CSS-Deklaration overflow:auto zu. Theoretisch könnte man auch overflow:scroll einsetzen, dann bieten aber die meisten Browser auch einen (unerwünschten) horizontalen Scrollbalken an.

Dem Footer muss nun lediglich noch die verbliebene Höhe zugewiesen werden, in diesem Beispiel sind es 5%.

         </p>
	 </div>
	
	<div id="footer">
	</div>
	

</body>
</html>
LG
Gombi
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.01.2010, 16:16
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 gombi Beitrag anzeigen
denn der footer darunter will sich nicht unter dem div "Container" anordnen.
Das liegt an der absoluten Positionierung.
Vielleicht solltest du lieber versuchen, das Problem mit deinem Dropdown-Menü anders zu lösen. Ich bin mir sicher, dass das auch anders geht.

Deine Zentriermethode lässt die Inhalte bei schmalem Viewport unerreichbar nach links verschwinden. Ein weiteres Problem der abs. Pos.

Geändert von fricca (18.01.2010 um 16:18 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.01.2010, 16:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.01.2010
Beiträge: 8
gombi befindet sich auf einem aufstrebenden Ast
Standard

Kann sein dass man das auch anders lösen kann. Aber wie?
Hier mal der Link zu meinem Problem mit dem drop down und warum ich absolute Positionierung verwende.

[Erledigt] CSS Drop Down Menü und IE Problem - php.de

Bin über Hinweise sehr dankbar!


LG und Danke für die Antwort!
Mit Zitat antworten
  #4 (permalink)  
Alt 18.01.2010, 16:41
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

Dann lies doch mal, was draco88 ganz unten schrieb.

Die Empfehlung des Suckerfish ist ebenfalls sinnvoll.

Und lies das: http://xhtmlforum.de/47790-cross-u-m...-sind-sie.html
Mit Zitat antworten
  #5 (permalink)  
Alt 18.01.2010, 16:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.01.2010
Beiträge: 8
gombi befindet sich auf einem aufstrebenden Ast
Standard

Tut mir leid! Bin neu in CSS und hab dieses Forum, welches mir sehr aktiv erscheint erst später gefunden.
Mit Zitat antworten
  #6 (permalink)  
Alt 18.01.2010, 18:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.01.2010
Beiträge: 8
gombi befindet sich auf einem aufstrebenden Ast
Standard

Ok, ich hab mal ein einfaches Beispiel mit dem Suckerfish Menü versucht.
Das scheint ja gut zu funtionieren, auch ohne absolute positionierung.

Aber warum zeigt der Firefox eine Abstand zwischen div "menubalken" und div "container"? Der IE macht das nicht!

Und was ich auch nicht verstehe; Warum wird alles schön zentriert im IE obwohl ich kein text-algin: center verwendet habe wie zB. hier beschrieben: Zentrieren mit CSS | XHTML-Akademie

Danke! Ich verzweifle noch an den Unterschieden der verschiedenen Browser!

Hier das Beispiel:

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

body {

	margin: auto;

	padding: 0px;

	background: #000000;
}



html{

	margin: 0px;
	padding: 0px;

}

	#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

	#nav a {
	display: block;
	width: 10em;

}

	#nav li {
	float: left;
	width: 10em;

}

	#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	background-color: white;

}

	#nav li:hover ul {
	left: auto;
}
	
	#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}

	#menubalken {
	background-color: green;	

	width: 800px;
	z-index: 2;
	height: 30px;
	margin: auto;
	}
	
	#container { 
	width: 800px;  	
   z-index: 1;
   background-color: #ddf;
   margin: auto;
	}
	
	
	
	#footer{
	background-color: red;

	width: 800px;
	height: 45px;
	margin: auto;
	}

	
	
</style>

	<script type='text/javascript'>
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
 	
 	</script>

 	
</head>

<body>

	<div id="menubalken">
	<ul id="nav">
	<li><a href="#">Percoidei</a>
		<ul>
			<li><a href="http://google.com">Remoras</a></li>
			<li><a href="#">Tileftext-algin: left;ishes</a></li>
			<li><a href="#">Bluefishes</a></li>
			<li><a href="#">Tigerfishes</a></li>
		</ul>
	</li>

	<li><a href="#">Anabantoidei</a>
		<ul>
			<li><a href="#">Climbing perches</a></li>
			<li><a href="#">Labyrinthfishes</a></li>
			<li><a href="#">Kissing gouramis</a></li>
			<li><a href="#">Pike-heads</a></li>
			<li><a href="#">Giant gouramis</a></li>
		</ul>
	</li>

	<!-- etc. -->

</ul>
	</div>
	
	<div id="container">
	<p> 
	Bla, bla
	</p>

	<div id="footer">
	</div>
	

</body>
</html>
LG
Mit Zitat antworten
  #7 (permalink)  
Alt 18.01.2010, 18:57
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 gombi Beitrag anzeigen
Aber warum zeigt der Firefox eine Abstand zwischen div "menubalken" und div "container"?
Weil p-Elemente per Default einen oberen Margin haben und dieser Margin mit dem umgebenden Element kollabiert ("Collapsing Margins).
[FAQ]FAQ[/FAQ], CSS-Prolog.

Zitat:
Und was ich auch nicht verstehe; Warum wird alles schön zentriert im IE obwohl ich kein text-algin: center verwendet habe
Weil du den IE nicht im Quirksmodus hast. Google "Doctype Switch"

Zitat:
Ich verzweifle noch an den Unterschieden der verschiedenen Browser!
Die Verzweiflung wird deutlich geringer ausfallen, wenn du systematisch lernst statt dir immer Bruchstücke von irgendwoher zusammenzusuchen.
Ich empfehle Little Boxes.
Mit Zitat antworten
  #8 (permalink)  
Alt 18.01.2010, 19:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.01.2010
Beiträge: 8
gombi befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für die Erklärung.

Zitat:
Die Verzweiflung wird deutlich geringer ausfallen, wenn du systematisch lernst statt dir immer Bruchstücke von irgendwoher zusammenzusuchen.
Ich empfehle Little Boxes.
Ok, du hast ja Recht. Wenn ich HTML, CSS, PHP usw. von Anfang an lernen würde, hätte ich diese Probleme nicht. Leider habe ich aber nur ein Leben zur Verfügung und hab nicht die Zeit das alles zu lernen um mir ne kleine private Seite zu bauen.

Ich bin Linux Sysadmin und wenn ein Webdesigner mich um Rat zur Rechteverwaltung, oder anderen Dingen unter Linux bittet, kann ich von ihm auch nicht verlangen dass er sich das alles selber aneignet.

Aber wie gesagt hast du natürlich Recht.

Ich hab ja bis jetzt alles gut hinbekommen und ich versuche mir alles selber zu erarbeiten, nur die Unterschiede zwischen den Browsern sind halt etwas nervig.

LG

Geändert von gombi (18.01.2010 um 20:04 Uhr)
Mit Zitat antworten
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
Footer Div verschwindet unter absolut positioniertem div pkipper CSS 6 01.03.2010 13:48
div mit overflow in der höhe maximieren aerothunder CSS 0 05.02.2010 00:14
Höhe von umgebendem DIV vistree CSS 2 02.08.2007 12:00
Problem mit div (float) Sp33dy G0nz4l3s CSS 2 29.05.2006 20:13
Footer Problem blub19 CSS 6 25.01.2005 12:46


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