zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit DIV im DIV (height: 100%)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.01.2006, 02:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.01.2006
Beiträge: 21
code_pilot befindet sich auf einem aufstrebenden Ast
Standard Problem mit DIV im DIV (height: 100%)

Hallo liebe XHTML-Forengemeinde,

so ich versuche auch mal meine first steps in CSS. Kenne zwar schon viele CSS Attribute, will mich aber jetzt endlich an komplette Layouts gewöhnen.

Naja und da hab ich auch schon mein erstes Problem. Folgendes: Ich habe eine Website, die eine feste Breite von 900px hat und eine min-höhe von 730px. Diese Maße habe ich in einem DIV definiert, welches die anderen DIVs, und zwar eines für einen Kopfbereich, dann ein Menü (links) und rechts einen Content-Bereich (den hab ich aber hier erstmal rausgenommen) umschließt.

Das Menü ist nun der Punkt, der mir schwierigkeiten macht: Ich möchte dass das Menü stets immer die Höhe des äussersten DIVs annimmt (das "border" div). Setze ich die höhe des DIVs auf 100%, so wird es im IE richtig angezeigt, aber leider nicht im Firefox. Daher würde ich gerne wissen, was ich falsch mache.

Naja hier mal ein bisschen Code (unwichtiges hab ich entfernt):

CSS:
Code:
/*
	GENERAL STYLES
*/

html
{
	font-family: Verdana, Helvetica, Arial, Sans-Serif;
	font-size: 18px;
	text-decoration: none;
	
	padding:0; 
	margin:0; 
	border:0; 
}

body
{
	background: #FFFFF;

	padding:0;
	
	margin: auto;
	text-align: center;
}

/*
	PAGE DESIGN ELEMENTS
*/

#border
{
	width: 900px;
	height: 730px;
	
	border: 0px;
	
	text-align: left;
	
	padding: 10px 0px 10px 0px;

	margin: 10px auto 20px auto;
	border: 1px solid red;
}

#top
{
	width: 100%;
	height: 81px;
	
	background-image: url("images/top.png");
	background-repeat: no-repeat;

	text-align: center;
	
	padding: 0px;
}

#menu
{
	width: 220px;
	height: 100%;
	
	background-image: url("images/menu.png");
	background-repeat: repeat-y;
	
	float: left;
		
	margin: 0;
	padding: 0;
}
INDEX.HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>entwurf</title>
		<link rel="stylesheet" href="main_styles.css" type="text/css" />
	</head>
	<body>
		<div id="border">
			<div id="top">
				
			</div>
			<div id="menu">
				
			</div>
			<!--
			<div id="content">
		
			</div>
                        -->		
		</div>
	</body>
</html>
Das Problem ist, das im Firefox, der ja richtiges CSS kann, das Menü einfach über das umschließende DIV hinausschießt. Anders im IE: Hier wird die Grenze des umschließenden DIVs eingehalten, so wie es sein soll.

Ich danke Euch schon mal für Eure Hilfe!

~code_pilot
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.01.2006, 03:26
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.01.2006
Beiträge: 152
Achereto befindet sich auf einem aufstrebenden Ast
Standard

Wenn der umschließende div-layer eine dynamische Höhe hat, kannst du darin keine 2 div-layer definieren, die immer genau gleich hoch sind. Stattdessen sorgt man nur dafür, dass es so aussieht, als seien sie gleich lang. Dieser Trick nennt sich faux columns. Dazu findest du einen guten Artikel auf www.alistapart.com und auch in der Suche des Forums.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.02.2006, 20:33
Neuer Benutzer
neuer user
 
Registriert seit: 20.02.2006
Beiträge: 1
TarAiym befindet sich auf einem aufstrebenden Ast
Standard

Hallo,
bin neu hier und grad am Einsteigen in html/css...

Bin schon seit gestern auf der Suche nach ner Lösung für ein ähnliches " 'height: 100%;' funktioniert nicht richtig" - Problem. Und beim Rumsuchen eben hier auf diesen thread gestoßen.
Du (Achereto) schreibst, dass wenn ein umschließender div-layer eine dynamische höhe hat... usw. Aber ich bin den code durchgegangen und der umschließende div (in diesem Fall der #border - div) hat ja eben KEINE dynamische Höhe, sondern 'height: 730px;'.
Also wie ist das also gemeint?
Einfach nur für mein Verständnis...
Thanx,
TarAiym
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
z-index hoch, dennoch grafik nicht ganz oben bergg CSS 6 27.10.2010 17:02
problem div height TheBigGrin CSS 6 09.09.2008 12:04
Design Float IE6 Problem koknarr CSS 10 05.09.2008 19:05
div, float und clear - Problem - IE vs. FF jehmi CSS 11 10.06.2008 15:18
inneres div soll äußeres div nach untern überlagern (Problem im Internet Explorer) Waldgeist CSS 6 14.02.2007 20:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:57 Uhr.