Thema: [HILFE]HEADER und FOOTER immer sichtbar...Machbar?

Hallo,

wie stelle ich es an das ich auf meiner Seite OBEN immer ein Menü stehen habe egal wie "Lang" die Seite ist und ich runter scrolle.
Genauso soll unten ein footer immer zu sehen sein

Also im prinzip so

MENU feststehend
Inhalt scrollbar
Footer feststehend


thx im vorraus für anregungen, Hilfe und Tips..

mfg DeViL

Erstmal danke, ich bin zwar nicht der op, aber ich konnte das trotzdem gut gebrauchen.
Ich habe das auch alles hinbekommen, aber leider klappts nur mit allen Mozilla-Derivaten.
Beim IE wird zwischen Header und "Rest" (Content, leftnav) ein Bereich eingefügt, der genauso hoch ist wie der header. Ich habe nun schon mehrfach gelesen, dass die darstellung IE/FF sich teilweise unterschieden kann, aber jetzt stolpere ich selber zum ersten mal drüber.

Gibt es da einen Work-Around?! kann man css definieren, welches nur für einen der Browser gilt ?!

Ich hänge sicherheitshalber mal meine css an...

Grüße,

Alec.

Code:

BODY 

{
	margin-left: 60px;
	margin-top: 0px;
	margin-right: 60px;
	margin-bottom: 0px;
	background-color:#767676;
	/*scrollbar-base-color: #0000FF;*/
	text-align:center;
}
/*Hier wird der Haupttext formatiert*/

body,td,th, tr, p, div {
	font-family: Arial, sans-serif;
	font-size: 11px;
	color: #666666;
	line-height: 16px;

}


/* LAYOUT AND POSITIONING */

#wrap {
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	/*Umrandung des Textes*/
	padding:0px;
	width:auto;
	text-align:left;
	background-color:#767676;
	}

#wrap-faux-l {
position:relative;
font-size:small; }

.wrap-floats {
margin-left:200px; }

/*Haupttextfeld*/
.content {
float:right;
margin-top:90px;
width:100%;
background-color:#fff;
}

/*Menüposition verändern*/

.leftnav {
position:fixed;
float:left;
margin-top:90px;
width:200px;
background-color:#FFF;
margin-left:-200px;}

.header {
position:fixed;
width:90%;

height:90px;
background-image:url(../images/header.jpg);
background-repeat:no-repeat;
background-position: left top;
background-color:#FFF;}


.headerlogo {
	width:214px;
	padding-top:18px;
	padding-left:12px;}

.headermenu {
float:right;
padding-top:0px;
padding-right:6px;
	}

.footer {
clear:both;
position:relative;
width:00%;
height:65px;
/*background-image:url(../images/footer.jpg);*/
background-repeat:no-repeat;
background-position: left bottom; }

.frontpage {
clear:both;
position:relative;
width:100%;
}

#frontleft {
	width:390px;
	padding-top:0px;
	margin-left:10px;
	margin-right:5px;
	height:140px;
	background-color:#F2F7FA; 
	background-image:url(../images/frontleftbg.jpg);
	background-repeat:no-repeat;
	background-position: bottom;	
	}

#frontright {
width:250px;
float:right;
padding-top:0px;
margin-right:15px;
height:145px; 
background-color:#DFEDF8;
background-image:url(../images/frontrightbg.jpg);
background-repeat:no-repeat;
background-position: bottom;}

img {
max-width:100%;} 

/* \*/
* html #wrap-faux-l,
* html .wrap-floats
{height:1%;}
/*  */

.brclear {
clear:both;
height:0;
margin:0;
font-size:1px;}


#contentmain {
	padding-left:50px;
	padding-right:6px;
	border-left:1px solid #8FB0E0;  }

#footercontent {
	margin-left:10px;
	margin-right:10px;
	margin-top:10px;
	padding-top:10px;
	text-align:center;
	border-top:1px solid #8FB0E0
	}

/* OTHER TAGS */

hr  {

	color: #ccc;
	background-color: #0000FF;
	height: 1px;
	width: 100%;
	}

a:link   {

	text-decoration: none;
	color: #0000FF;
}

/*Besuchte Sublevel-Links*/
a:hover {

	text-decoration: none;
	color:#0000AA;
	}

a:visited {
	text-decoration: none;
	color:#0000AA;
	}

a.category:link, a.category:visited
 {
  color: #E64500;
	}

a.category:hover {
color: #AA3300;
text-decoration: underline; }

a.latestnews:link, a.latestnews:visited {
color: #4D73AC;
text-decoration: underline; }

a.latestnews:hover {
color: #395682;
text-decoration: underline;  }

.headermenu ul {
    margin:0;
    padding:0;
    list-style:none;
    }
 .headermenu li {
    float:right;
    margin:2px;
    padding:0;
    list-style:none;
	height:35px;	}

.headermenu a.mainlevel-nav {
    display:block;
    padding:5px 10px;
	line-height:35px;
	padding-bottom:0px;
	font-family: Arial;
	font-size: 13px;
	color: #5A7EB6;
	text-decoration:none;}

#mainlevel-nav li:hover, li.over {
    background:url("../images/menuright.gif") no-repeat right top;
	}

a.mainlevel-nav:hover {
	background:url("../images/menuleft.gif") no-repeat left top;
	color:white;
	}
/*Folgend die Formattierung der linken Menüeinträge, alle */
a.mainlevel:link, a.mainlevel:visited {
	font-family: Arial;
	font-size: 13px;
	color: #666;
	text-align: left;
	padding-right:1px;
	padding-left:20px;
	margin-left:2px;
	margin-right:2px;
	margin-top:6px;
/*Zeilenabstand der Hauptmenüeinträhge*/
	padding-bottom:6px;
	display:block;
	width:150px;
	text-decoration: none;
	background-image:url(../images/topbullet.png);
	background-repeat:no-repeat;
	background-position:left 30%;}
/*Folgend die Formattierung der linken Menüeinträge, aktiviert*/
a.mainlevel:hover  {
	color:#E64500;
	background:none;
	background-image:url(../images/topbullet-on.png);
	background-repeat:no-repeat;
	background-position:left 30%;}

/*Aktivierter Menüstil*/



/*Submenü formatieren*/
a.sublevel:link, a.sublevel:visited {

font-family: Arial, sans-serif;
/*display: block;*/
color: #000000;
font-weight: normal;
vertical-align: middle;
padding : 0px 0px 10px 10px;
line-height: 100%;

text-decoration : none;

}

a.sublevel:hover {
color: #EE1212;
text-decoration: none;
}













#active_menu a.mainlevel:link, #active_menu a.mainlevel:visited, a#active_menu:link, a#active_menu:visited {
	color:#000;	
	/*background-image:url(../images/topbullet-on.png);*/
	background-repeat:no-repeat;
	background-position:left 30%;}


table.moduletable {
	width: 95%;
	margin-bottom:5px;
	font-weight: normal;  }

.frontpage table.moduletable {
	width:100%;
	}

.headermenu table.moduletable {
	width:460px;
	text-align:right;
	margin-bottom:0px;
	margin:0px;
	padding:0px;}

#left { }

#left table.moduletable {
	width:90%;
	text-align:left;
	margin-left:10px;
	padding-top:2px;
	padding-bottom:5px;
	padding-left:0px;}

#left table.moduletable th {
	text-align:left;
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #5A7EB6;
	padding-top:0px;
	padding-bottom:3px;
	border-bottom:1px solid #8FB0E0;  }

#frontright table.moduletable th, #frontleft table.moduletable th {
	text-align:left;
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #5A7EB6;
	padding-top:5px;
	padding-bottom:6px;
	border-bottom:1px solid #8FB0E0;
	background-color:white;}

#frontright ul {
	padding-top:10px; }

#frontright li {
	padding-bottom:4px; }


#contentmain table.moduletable th {
	text-align:left;
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #E64500;
	padding-top:5px;
	padding-bottom:3px;  }

#contentmain table.moduletable, #contentmain table.contentpane, #contentmain table.contentpaneopen {
	width:96%;
	text-align:left;
	margin:0px;
	padding:0px;}

.newsflash {
  font-family: Arial, sans-serif;
  font-size: 11px;  }

.frameheader {
  font-family: Arial, sans-serif;
  font-size: 11px;   }

a.readon  {
	background-image:url(../images/arrow2.png);
	background-repeat:no-repeat;
	background-position:right;
	padding-right:12px;
	text-transform: lowercase;
	display:block;
	float:right; }


.contentpane {
padding-left: 0px;
padding-right: 0px; }


#contentmain img {
	margin:4px; }

 .button {}

.contentpaneopen  {
	color: #E64500;
	width:100%;
	margin: 0px;
	padding: 0px;
	border: none;}

.buttonheading {
vertical-align:top;}

/*Überschrift der statischen Inhalte*/

.componentheading, .contentheading {
	font-family: Arial, sans-serif;
	font-size: 20px;
	color: #0000FF;
	line-height:24px; }

.contentdescription {
	text-align:left;  }

.category {}

.sectiontableheader {
  font-weight: bold;   }

.sectiontablefooter {}

.sectiontableentry1 {
	background-color : #F2F5F9;  }

.sectiontableentry2 {}

.small {
  font-size        : 10px;
  color : #879DA5;
  text-decoration  : none;
  font-weight: normal;   }

li {	
	list-style-image: url(../images/arrow.png);
	padding-left:5px;
	line-height:160%;	}

/*Brotkrumenformat*/
a.mainlevel-bottom:link, a.mainlevel-bottom:visited, a.pathway:link,  a.pathway:visited, a.pathway:hover {
	font-family: Arial,  sans-serif;
	font-size: 11px;
	color: #999999;
	text-decoration: underline;
	padding-left:6px;
	padding-right:6px;  }

a.mainlevel-bottom:hover {
	color: #666666;  }

.pathway {
padding-left:2px; }


.searchfield, {
	border: 1px solid #AAC2E8;
	font-family: Arial, sans-serif;
	font-size: 11px;
	text-indent: 2px;
	margin-top:6px;
	background-color:#F2F5F9;
	}

.inputbox {
	padding:2px;
	border: 1px solid #AAC2E8;
	font-family: Arial, sans-serif;
	font-size: 11px;
	text-indent: 2px;
	margin-top:4px;
	color:#666666;
	background-color:#F2F5F9;
	}

#search {
	padding-top:0px;
	text-align:right;
	margin-top:0px;
	width:450px;
	}

img, img a  {
	border:none;
	}

Zitat von alecsander

Gibt es da einen Work-Around?! kann man css definieren, welches nur für einen der Browser gilt ?!

Ja kann man, schau dich mal unter den oben genannten link um...oder lade dir SelfHTML auf den Rechner.

mfg DeViL

Hi,

ich habe tatsächlich was gefunden. Für alle, die die SuFu später mal in diesen Thread verschlägt:
Man kann den IE gesondert behandeln, wenn man * html vor das Element setzt das man ändern möchte.
Also bsp

Code:

* html .content {

um nur für den IE etwas im Content - Element zu verändern.

Grüße,

A.