Frage zum Footer - allgemeines Erscheinungsbild

tobm_knows_best · 28. August 2012

Hey zusammen,

mich würde mal interessieren, wie mein Footer bei Euch so dargestellt wird. Ich habe versucht nen *Sticky Footer* zu erstellen und div. Tutorials durchgeackert... Aber jetzt scheint´s mir als würde der untere Grüne Balken des Footers nicht mit auf der Seite erscheinen (Zwar kann dieser bei größerem Content gerne verdeckt sein, aber solange der Inhalt kleiner ist, sollte der Footer doch ganz auf der Seite ersichtlich sein...

Hier mal das CSS:

CSS:

@charset "UTF-8";
/**Basic CSS Start**/
html {
	height: 100%;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
 	background-image: url(../images/bg_main.png);
	height: 100%;
}
/*Links Regular Start*/
a {
	font-family: Arial, Helvetica, sans-serif;
	color: #0070b3;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #0070b3;
}
a:hover {
	text-decoration: underline;
	color: #0070b3;
}
a:active {
	text-decoration: none;
	color: #0070b3;
}
/*Links Regular Ende*/
/**Basic CSS Ende**/
/*Navigation Start*/
ul#green { 
	margin:0; 
	padding:0; 
	list-style-type:none; 
}
ul#green li { 
	position:relative; 
	float:left; border-top:4px solid #fff; 
	margin-right: 30px; 
	padding-right: 20px; 
	padding-top: 5px;
}
ul#green .current { 
	border-top:4px solid #c7d725;
	}
ul#green li:hover { 
	border-top:4px solid #c7d725;
}
ul#green li a { 
	padding:2px 2px; 
	text-decoration:none; 
	font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#c7d725;
}
ul#green li a:hover {
	color:c7d725;
	border:none;
}
ul#green li span { 
	display:none; 
	position:absolute; 
	top:20px; 
	left:2px; 
	width:160px; 
	font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif;  line-height: 15px;
}
ul#green li a:hover span {
/*	border-left: 1px dotted white;
	padding-left: 5px; */
	margin-top: 7px; 
	display:block; 
	color: #fff;
}
/*Navigation Ende*/
.header {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #666;
	padding: 10px;
	box-shadow: 0px 3px 5px black;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid #fff;
	border-bottom: 1px solid white;
	background-image: url(../images/bg_header.png);
}
/*Stylish Box Start*/
	#tiltshadows { 
	padding-top: 20px;
	width: 960px; 
	margin: 1em auto; 
	position: relative;  
	z-index: 3;  
	text-align: left; 
}  
	article {
	/**  CSS Gradient  **/
  	/* Chrome 1-9 and Safari 4-5.0 */
  	background-image: -webkit-gradient(linear, left top, left bottom,
    color-stop( 0.0, #FFFFFF ),
    color-stop( 1.0, #E6E5E5 ));
	/* Chrome 10+ Safari 5.1+ Mobile Safari */
  	background-image: -webkit-linear-gradient(top, #FFFFFF, #E6E5E5 );
	/* Firefox 3.6+ */
  	background-image: -moz-linear-gradient(top, #FFFFFF, #E6E5E5 );
	/* IE 10+ */
  	background-image: -ms-linear-gradient(top, #FFFFFF, #E6E5E5 );
	/* Opera 11.10+ */
  	background-image: -o-linear-gradient(top, #FFFFFF, #E6E5E5 );
	/* W3C */
  	background-image: linear-gradient(top, #FFFFFF, #E6E5E5 );
	/**CSS Gradient Ende**/
	border: 1px solid #eee;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	padding: 20px;
	text-shadow: 0 1px 0 #ffffff;
	line-height: 1.7em;
	text-align: center;
	display: block;
	background-color: white;
	text-align: left;
}
	article:before, article:after { 
	-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);  
	-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);	
	box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);	
	position: absolute;  bottom: 15px;  
	z-index: -1;  
	width: 50%;  
	height: 20%;  
	content: "";  
	background: rgba(0, 0, 0, 0.7); 
}
	article:after { 
	-webkit-transform: rotate(2deg);  
	-moz-transform: rotate(2deg);   
	-o-transform: rotate(2deg);  
	right: 10px;  
	left: auto; 
}
	article:before { 
	-webkit-transform: rotate(-2deg);   
	-moz-transform: rotate(-2deg);  
	-o-transform: rotate(-2deg);  
	right: auto;  
	left: 10px; 
}
/*.footer {
	position: relative;
	margin-top: -150px;
	height: 150px; 
	clear:both;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #666;
	padding: 10px;
	box-shadow: 0px -3px 5px black;
	margin-left: auto;
	border-bottom: 5px solid #c7d725;
	border-top: 1px solid white;
	background-image: url(../images/bg_footer.png);				margin-right: auto;

}*/
.navigation {
	padding-top: 5px;
	margin-left: auto;
	margin-right: auto;
	height: 80px;
	width: 960px;
}
/*Sticky Footer Start*/
* {
	margin: 0;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer {
	height: 115px;
	border-bottom: 5px solid #c7d725;
	border-top: 1px solid white;
	background-image: url(../images/bg_header.png);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #666;
	padding: 10px;
	box-shadow: 0px -3px 5px black;
	}
.push {
	height: -115px; /* .push must be the same height as .footer */
}
/*Sticky Footer Ende*/

Und hier der zugehörige HTML-Code:

HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>kA</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
	position:absolute;
	top:100px;
	width:182px;
	height:100px;
	z-index:4;
	background-image: url(images/Farbklecks.png);
	background-repeat: no-repeat;
	right: 15px;
}
</style>
</head>
<body>
<!--Footer Wrapper Start-->
<div class="wrapper">
<div id="apDiv1"></div>
<div class="header">
<div class="navigation">
<ul id="green">
	<li class="current"><a href="#" title="">Start<span>This takes you to the welcome page of the website - the starting point for everything.</span></a></li>
	<li><a href="#" title="">Leistungen<span>We are a great team of people, with lots of fantastic things to offer.</span></a></li>
	<li><a href="#" title="">Referenzen<span>Our portfolio showcases all the work that we've done for the past few weeks.</span></a></li>
	<li><a href="#" title="">Kontakt<span>We also love to listen to some tunes while we work. Here we're sharing them with you all!</span></a></li>
	<li><a href="#" title="">Impressum<span>If you would like to get in touch with us, you can do so here via email or telephone.</span></a></li>
</ul>
</div>
</div>
<!--Stylish Box Start-->
<div id="tiltshadows">
<article> 
<h2>Topic</h2> 
<p>Claim<br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
<br />
  <br />
  <br />
  <br />
  <br />
  .</p>  
</article>		               
</div>
<!--Stylish Box Ende-->
</div>
<!--Footer Push Start-->
<div class="push"></div>
<!--Footer Push Ende-->
</div>
<!--Footer Wrapper Ende-->
</body>
<!--Footer Start-->
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
<!--Footer Ende-->
</html>

Vielleicht weiss der ein oder andere unter euch doch Rat... ?

Vielen Dank schon mal im Voraus

VG
Tobm

para_noid · 30. August 2012

Hey,

also im Firefox hab ich den grünen Balken, im Chromium nicht. Das liegt scheinbar am push-div, weil Chromium die negative Höhe nicht annimmt (hab ich auch noch nie gesehen und ist im Standard ausgeschlossen). Das führt dann dazu dass du über die 100% Gesamthöhe hinaus kommst.

BTW gehört auch das Footer-Div innerhalb des Body-Tags.

djheke · 30. August 2012

Dein #footer mus innerhalb von <body> stehen und nicht außerhalb.

Frage zum Footer - allgemeines Erscheinungsbild

tobm_knows_best

Erfahrenes Mitglied

para_noid

hirnrissig

djheke

Erfahrenes Mitglied

Neue Beiträge