DIV lässt sich nicht im Firefox UND Internet Explorer korrekt positionieren

Status
Nicht offen für weitere Antworten.

Rayne

Erfahrenes Mitglied
Ich bin grad dabei, meine Website umzubauen. Nun komme ich an einer Stelle partout nicht weiter und hoffe, ihr könnt mir helfen.

Die Website besteht aus einer Ebene #Huelle, darin befindet sich quasi der gesamte Inhalt. In dieser Ebene #Huelle befindet sich die Ebene #Rand-oben, die einen kleinen, weißen Rand darstellt. Darunter kommt die Ebene #Header mit einem Hintergrundbild. So weit ganz einfach.

Unter dem Header soll die Navigation und der Inhalt und jeweils einer Ebene kommen. Ich habe das Ganze erstmal mit einer Ebene ausprobiert und an dieser Stelle gehts nicht weiter.

Und zwar soll die Ebene #Content entsprechend dem Inhalt das gesamte Konstrukt nach unten hin ausweiten, also die Ebene #Huelle. Irgendwie bekomme ich das schon hin, aber der IE7 macht mir Probleme.

Mit diesem Code klappts im FF prima, aber im IE7 gar nicht, da der anscheinend kein margin-top kennt. Jedenfalls klatscht die Ebene #Content ganz oben und verschiebt zudem noch den Header:

Code:
#Content { 
position: relative;
margin-top: 370px;
margin-left: 200px;
margin-bottom: 60px;
width: 550px;
height: auto;
background-color: #FFFFFF;							
}

Mit "position:absolute" stimmt zwar die Positionierung im FF UND IE7, aber es weitet sich nur die Ebene #Content nach unten hin aus, aber nicht das Gesamtgerüst.
Ganz ohne "position:..." genau das selbe wie oben - im FF gehts, im IE7 hängt #Content am oberen Broswerrand und verschiebt alles.

Ich weiß jetzt absolut nicht, wie ich das umschreiben muss, damits auch im IE und weiterhin im FF klappt :ka:

Hier nochmal das gesamte Stylesheet:

Code:
html { height: 100%;   }

Body {
background: #FFFFFF  url(Bilder/Schatten.gif) repeat-y 50% 0;
color: #3E62B0;

margin: 0px;
height:  100%;

}

#Huelle {
position:absolute;
left:50%;
margin-left: -390px; 
width: 780px;
height: 100%;           
background:  url(Bilder/Verlauf.gif) repeat-x #5F9DDC;  
}	
	   
html>body #Huelle {
height: auto;       
min-height: 100%;	
 		   
}

#Rand-oben { 
position: absolute;
width: 780px;
height: 8px;
background-color: #FFFFFF;

}	

#Header {
position: absolute;
width: 771px;
height: 307px;
margin-top: 20px;
background: url(Bilder/Header.png) no-repeat;
		  
}	 

#Content { 
position: relative;
margin-top: 370px;
margin-left: 200px;
margin-bottom: 60px;
width: 550px;
height: auto;
background-color: #FFFFFF;	
						
}

#Footer { 
position: absolute;
width: 780px;
height: 25px;
background-color: #FFFFFF;
bottom: 0px;			  
}

Und hier das HTML-Dokument:

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>
<link rel="stylesheet" type="text/css" href="styles2.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>

<body>
<div id="Huelle">
  <div id="Rand-oben"></div>
  <div id="Header"></div>   
  <div id="Content">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>  
    <p>&nbsp;</p>
    <p>&nbsp;</p>  
    <p>&nbsp;</p>
    <p>&nbsp;</p>  
    <p>&nbsp;</p>
    <p>&nbsp;</p>  
    <p>&nbsp;</p>
    <p>&nbsp;</p>  
  </div>
  <div id="Footer"></div>   
</div>
</body>
</html>


Hier der Link zur Seite, damit es besser verständlich ist. Im FF siehts ganz normal aus, im IE ist alles im Eimer.
http://www.sky-divezone.de/Other/Problem/Problem.htm

Ich hoffe, das Problem ist lösbar ;)

Bin euch sehr dankbar!
 
Hi,

versuch es mal hiermit:

Code:
#Huelle {  
position:relative;
left:50%;
margin-left:-390px;
width:780px;
height:100%;
background:url(Bilder/Verlauf.gif) repeat-x #5F9DDC;   /*Farbverlauf*/
}

#Rand-oben {
width:780px;
height:8px;
background-color:#FFFFFF;
}

#Header {
width:771px;
height:307px;
margin-top:10px;
background:url(Bilder/Header.png) no-repeat;
}

#Content { 
position:relative;
margin-top:40px;
margin-left:200px;
margin-bottom:60px;
width:550px;
height:auto;
background-color: #FFFFFF;
}
 
Oh ja, das geht! Ich bin daran echt verzweifelt!

Kannst du mir die Lösung bitte erklären? Wieso wird #Huelle auf "relative" gesetzt?

Aber auf jeden Fall danke ich dir sehr für deine Hilfe! :)
 
#Huelle wird relativ positioniert, damit sich darin der Footer am unteren Elementrand absolut positionieren lässt und bei zunehmenden Inhalt auch nach unten rückt.
 
Nun gibt es ein neues Problem :(
Ich habe links neben #Content eine neue Ebene #Navi hinzugefügt.

Solange #Content länger ist als #Navi, ist alles in Ordnung. Ansonsten schiebt sich #Navi nach unten und alles andere bleibt oben "hängen".

Code:
#Huelle {
position:relative;
left: 50%;
margin-left: -390px; 
width: 780px;
height: 100%;           
background: url(Bilder/Verlauf.gif) repeat-x #5F9DDC;   /*Farbverlauf*/  	 
}	
	   
html>body #Huelle {
height: auto;         
min-height: 100%;	 		   
}

#Rand-oben { 
width:780px;
height 8px;
background-color: #FFFFFF;
}			 

#Header { 
width: 771px;
height 307px;
margin-top: 20px;
background: url(Bilder/Header.png) no-repeat;		  
}	

#Navi { 
position: relative;
margin-top: 30px;
margin-left:10px;			
width: 150px;
height: auto;
background-color: #FFFFFF;	
float: left;     
display: inline; 
}

#Content { 
position:relative;
margin-top: 30px;
margin-left: 200px;			
width: 550px;
height: auto;
background-color: #FFFFFF;										
}

#Footer {
position: absolute;
width: 780px;
height: 25px;
background-color: #FFFFFF;
bottom: 0px;		  	  
}

Wo liegt da der Fehler versteckt?
 
Die eingerichtete Floatumgebung muss zum Abschluss "gecleart" werden, damit die Spalte #Navi die umschliessende Box #Huelle am unteren Elementrand nicht "überlappt" - siehe hierzu auch http://positioniseverything.net/easyclearing.html.

Daraus das Stylesheet:

Code:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Die Klasse .clearfix wird dann zusätzlich im DIV #Huelle aufgerufen:

Code:
<div id="Huelle" class="clearfix"> ... </div>

Der IE benötigt für das DIV #Footer die clear:left-Deklaration:

Code:
#Footer {
clear:left;
position: absolute;
width: 780px;
height: 25px;
background-color: #FFFFFF;
bottom: 0px;
}
Achja, in den Selektoren #Rand-oben und #Header fehlt plötzlich jeweils nach der height-Eigenschaft der Doppelpunkt.
 
Ich habe den gesamten ersten Code einfach kopiert, unter #Navi eingefügt und zusätzlich zu #Huelle "class:clearfix" gesetzt. Doch im FF tut sich nichts.

Beim IE7 reicht einfach das "clear:left".

Die Doppelpunkte muss ich leider beim Einfügen gelöscht haben, in Echt sind sie noch da.

Muss ich da noch etwas anderes beachten?

EDIT: Ich glaub, ich habs jetzt. Ich habe einfach unter #Navi und unter #Content eine weitere Ebene eingefügt:

Code:
#Abschluss {
width: 100%;
clear: both;
height: 40px;
}

Damit gehts im IE6 + 7 und im FF. Oder gibt es einen Haken an dieser Lösung?
 
Zuletzt bearbeitet:
Bei mir funktioniert es u.a. im Firefox tadellos :confused:
 

Anhänge

  • demo_Rayne.zip
    1,4 KB · Aufrufe: 52
Du hast Recht, ich habe einen Fehler gemacht. Ich habe #Header das clearfix zugewiesen und nicht #Huelle :rolleyes:
Nun geht diese Variante bei mir auch.

Aber geht denn meine oben genannte Lösung tatsächlich (überall), oder ist diese nicht zu empfehlen? Denn, irgendwie ist die schon übersichtlicher und (aus meiner Sicht) einfacher zu verstehen.
Mir geht es nämlich nicht nur darum, dass es geht. Ich möchte auch verstehen, warum etwas wie genau funktioniert.
 
Selbstverständlich funktioniert auch die Variante mit dem "clearing"-DIV, aber wozu ein inhaltsleeres Element in das Markup einbetten, wenn CSS das handeln kann. ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück