✔ CSS Design mit feststehendem header und footer

Status
Nicht offen für weitere Antworten.
G

Giggles91

Grünschnabel
Hallo Leute

Ich habe wirklich die Such-Funktion benutzt aber die Lösung nicht gefunden.

Ich habe eine seite mit divs gebastelt, (man könnte auch sagen ich habe eine Vorlage leicht modifiziert und die css datei erweitert... :rolleyes: ) auf jeden fall sieht es so aus, dass ich einen feststehenden header und auch einen feststehenden footer habe.

Im Firefox wird das ganze perfekt angezeigt aber wenn ich die seite dann mit dem IE 6 oder 7 teste: ! der Footer klebt dann ganz oben beim header. Ich habe eigentlich extra positionierungen per star hack eingebunden aber wohl falsch. Ich muss das Div doch absolut positionieren?



Hier mal der CSS-Code: (ich weiss, nicht gerade profimässig...:rolleyes: )

Code: 
		body
		{ 
			position:absolute;
			background:#ffffff;
		}
		html, body
		{ 
			top:0; left:0; right:0;
			min-height:100%;
			margin:0;
			padding:0;
			width:100%;
		}		
		/* Überschrift der Titel */
		h1		
		{
			text-align:left;
			font-family:Comic Sans MS;
			margin:0;
			padding-top:0.5em;
			padding-left:0em;
			padding-bottom:0em;
		}

		h2
		{
			text-align:left;
			font-family:Comic Sans MS;
			margin:0;
			padding-top:1em;
			padding-left:0em;
			padding-bottom:0em;
		}
		/* Überschrift der Untertitel*/
		h3
		{
			text-align:left;
			font-family:Comic Sans MS;
			margin:0;
			padding-top:0.5em;
			padding-left:0em;
			padding-bottom:0.4em;
		}
		#headercontainer 
		{
			position:fixed;
			font-family:Comic Sans MS;
			background:#FF9900;
			top:0; left:0; right:0;
			text-align:center;
			margin:0;
			height:3em;
			z-index:3;
		}
		#header 
		{
			position:absolute;
			top:0; left:0; right:0; bottom:0;
			border-bottom: 1px solid black;
			height:100%;
			background:#FF9900;
			text-align:center;
			z-index:3;
			margin:0;
			padding:0.2em;
		}
		#menu
		{
			position:fixed;
			top:4em;
			left:.5em;
			width:9em;
			padding:.5em;
		}
		#content 
		{
			font-family:Comic Sans MS;
			margin:0;
			padding-top:4.85em;
			padding-left:12em;
			padding-bottom:3em;
			padding-right:4em;
			z-index:2;
		}
		#footercontainer
		{
			position:fixed;
			font-style:normal;
			font-family:Comic Sans MS;
			bottom:0; left:0px; right:0;
			vertical-align:bottom;
			border-top: 1px solid black;
			background:#FF9900;
			text-align:center;
			margin:0;
			height:2em;
			z-index:3;
		}
		#footer 
		{
			position:absolute;
			top:0; left:0; right:0; bottom:0;
			background:#FF9900;
			z-index:3;
		}
		/* Nun für den MSIE */
		* html, * html body 
		{
			overflow:hidden;
			bottom:0;
			height:100%;
		}
		* html #header 
		{
			position:absolute;
			top:0; left:0; right:0; bottom:0;
			border-bottom: 0px solid black;
			height:100%;
			background:#FF9900;
			z-index:3;
			margin:0;
			padding:0.2em;
		}
		* html #headercontainer
		{
			border-bottom: 1px solid black;
			position:absolute;
			width:100%;
			padding-right:16px;
			background-color: #FF9900;
		}
		* html #footercontainer
		{
			border-bottom: 0px solid black;
			position:absolute;
			width:100%;
			padding-right:16px;
			top: 0px;
		}
		* html #menu
		{
			position:absolute;
		}
		* html #header,* html #footer
		{
			height:100%;
			position:static;
		}
		* html #content 
		{
			position:absolute;
			top:0;
			bottom:0;
			left:0;
			right:0;
			height:100%;
			width:100%;
			margin:0;
			visibility: hidden;
		}
		#menu li
		{
			font-family:Comic Sans MS;
			font-size:14px;
			font-weight:bold;
			text-align: center;
			list-style: none;
			display:block;
			background:#FFFFFF;
			border: 0px solid black;
			color:black;
			text-decoration:none;
			margin: 0em; padding: 0.1em;
		}
		#menu a:link
		{
			display:block;
			font-weight:bold;
			font-size:14px;
			background:#FF9900;
			border: 1px solid black;
			color:black;
			text-decoration:none;
			margin: 0.2em; 
			padding-top: 0.2em;
			padding-bottom:0.2em;
		}
		#menu a:visited
		{
			display:block;
			font-weight:bold;
			font-size:14px;
			background:#FF9900;
			border: 1px solid black;
			color:black;
			text-decoration:none;
			margin: 0.2em; padding: 0.2em;
		}
		#menu a:hover
		{
			cursor:pointer;
			font-size:14px;
			font-weight:bold;
			display:block;
			background:#FFCC66;
			border: 1px inset black;
			color:black;
			text-decoration:none;
			margin: 0.2em; padding: 0.2em;
		}
		#menu a:active
		{
			display:block;
			font-size:14px;
			font-weight:bold;
			background:#FFCC99;
			border: 1px solid black;
			color:black;
			text-decoration:none;
			margin: 0.2em; padding: 0.2em;
		}
		#menu a:focus
		{
			display:block;
			font-weight:bold;
			font-size:14px;
			background:#FF9900;
			border: 1px inset black;
			color:black;
			text-decoration:none;
			margin: 0.2em; padding: 0.2em;
		}
		#content a:link 
		{ 
			font-colour:#0099FF; text-decoration:none;
		}		
		#content a:visited 
		{
			font-colour:#0099FF; text-decoration:none;
		}		
		#content a:hover 
		{ 
			font-colour:#0099FF; text-decoration:underline;
		}		
		#content a:active 
		{
			font-colour:#00FF66; text-decoration:underline;
		}
		* html #menu
		{
			margin:0;
			width:10.5em;    /* Der IE soll das Element breiter darstellen, da margin und padding hier von 
							    der Breite abgezogen wird! */
		}

und Der Html: (ist wohl auch nicht ganz sauber... :rolleyes: )

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>Klassenpage der 1L - Kollegium Spiritus Sanctus</title>
</head>
<link rel="stylesheet" href="../CSS/style_1l.css" type="text/css">
<div id="headercontainer"> 
  <h1 class=titel id="header" style="">Die Klassenpage der 1L</h1>
</div>
<ul id="menu">
  <li>
  	<div align="center"><a href="1l_start.htm">Home</a></div> 
  </li>
  <li>
  	<div align="center"><a href="1l_stundenplan.htm">Stundenplan</a></div> 
  </li>
  <li>
  	<div align="center"><a href="1l_agenda.htm">Agenda</a></div> 
  </li>
  <li>
  	<div align="center"><a href="1l_schueler.htm">Schüler</a></div> 
  </li>
  <li>
  	<div align="center"><a href="1l_lehrer.htm">Lehrer</a></div> 
  </li>
  <li>
  	<div align="center"><a href="1l_links.htm">Links</a></div> 
  </li>
  <li>
  	<div align="center"><a href="1l_forum.htm">Forum, Gästebuch</a></div> 
  </li>
  <div align="center"><br>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="100" align="middle">
      <param name=movie value="../Material/Flash/relog.swf">
      <param name=quality value=high>
      <param name="BGCOLOR" value="#FFFFFF">
      <embed src="../Material/Flash/relog.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="100" bgcolor="#FFFFFF" align="middle"> </embed>
    </object> 
    </div>
  <br />
</ul>
<div id="content"> 
  <h1>Titel</h1>
  <h3>Untertitel</h3>
  <p>Text</p>
</div>
<div id="footercontainer"> 
  <div id="footer"><b>Optimiert für: Mozilla Firefox, 1024 x 768</a> </b> 
  </div>
</div>
</body>
</html>

Ich arbeite mit dreamweaver mx 2004.
 
Giggles91 hat gesagt.:
[...] wenn ich die seite dann mit dem IE 6 oder 7 teste: ! der Footer klebt dann ganz oben beim header. [...]
Zum Vergrößern anklicken....
Dann überprüf mal, wo Du den Footer positioniert hast :

Code: 
* html #footercontainer
		{
			border-bottom: 0px solid black;
			position:absolute;
			width:100%;
			padding-right:16px;
			top: 0px; 
		}
Desweiteren solltest Du im CSS-Selektor * html #content die visibility:hidden-Eigenschaft entfernen, da sonst im IE das Element, respektive sein Inhalt nicht angezeigt wird.
 
Juhuuu Ich liebe dich... :p

Ich hab jetzt seit 2 stunden das problem gesucht aber das es so was blödes ist... Ich frag mich bloss wie dieses top:0px; da reingekommen ist, in der Original css ist das nicht drin. Auf jeden fall vielen dank. wahrscheinlich werd ich sowieso noch auf mehr Probleme stossen aber ich weiss ja jetzt an wen ich mich wenden kann ;-)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück