Sticky Footer will einfach nicht funktionieren!

Penzoil

Hallo Leute,

unterstehend habe ich euch mein Problem gepostet. Fragt nicht wieviele Webseiten und STicky Footer Lösungen ich schon ausprobiert habe... ...es will einfach nicht funktionieren und ich krieg bald nen Vogel. Mit meinem Latein bin ich am Ende gut .. mein Latein ist auch nicht das Beste aber anyway, ich gebe mein bestes um ein barrierefreies Webdesign zu schaffen also habt Nachsicht.

Kurze Beschreibung:

Mein letzter Versuch die Fußzeile unten zu fixieren ist auf das Sticky Footer Model zurückzuführen das ihr hier findet. http://www.cssstickyfooter.com/de/ nur mit einem kleinen Unterschied das #wrap bei mir #root heißt. Die Seite hat das Hauptmenü bestehend aus vier Buttons, einen Homelink und Follow me links im Footer integriert. Ich weiß nicht ob die zwei Listen die die Buttons darstellen verantwortlich sind für den Fehler aber die sind ja im Footer DIV integriert und sollten keinen Stress machen? K.A. aber alles andere ist identisch zu dem auf der http://www.cssstickyfooter.com/de/ Seite beschriebenen Problemlösung.. ..oder habe ich etwas übersehen?

Ich weiß einfach nicht mehr weiter und bin über jede Hilfe dankbar!

HTML:

Code

<body>




<div id="root">
    <div id="header" class="logo"></div>
    <div id="main" class="clearfix"></div>
</div>




<div id="footer">
          <div class="h3"><a href="index.htm">HOME</a></div>

      <div>
          <ul id="navi">
               <li><a href="#" class="about"></a></li>
              <li><a href="#" class="galleria"></a></li>
            <li><a href="#" class="service"></a></li>
            <li><a href="#" class="contact"></a></li>
        </ul>
      </div>

      <div>
          <ul id="follow">
               <li><a href="#" class="sh2"></a></li>
            <li><a href="#" class="sh1"></a></li>
        </ul>
     </div>

</div>

Alles anzeigen

CSS

html {
    background-image: url(../img/back_left.gif);
    background-repeat:no-repeat;
    background-position:left top;
    height:100%;
}    
body {
    background-image: url(../img/back_right.gif);
    background-repeat:no-repeat;
    background-position:right top;
    height:auto;
    min-height:100%;
    overflow-x: hidden;
    overflow-y: hidden;
}    




a:link {color:#FFFFFF; text-decoration:none}
a:visited {color:#FFFFFF; text-decoration:none}
a:active {color:#FFFFFF; text-decoration:none}
a:hover {color:#FFB317; text-decoration:none}




* {margin:0;padding:0;} 




#main {
    padding-bottom: 95px;
} 




div#root {
    height: auto;
    min-height:100%;
    width:100%;
}
 
div#header {
    height:90px;
    clear:both;
} 
 
div#footer {
    position:relative;
    bottom:0px !important;
    height: 95px;
    width: 100%;
    margin-top: -95px;
    clear: both;
    background-image: url(../img/bar.png);
    background-repeat:repeat-x;
    background-position: center center;
}




.logo {
    margin-left:33px;
    display:block;
    height: 90px;
    width: 125px;
    background:url(../img/logo.png) no-repeat;
    cursor: pointer;
}




#navi {
    float: left;
    position: relative; 
    left: 50%;
    margin: 0 auto;
    padding: 0; 
    list-style-type: none;
}




#navi li {
    float: left;
    position: relative;
    right: 50%;
}




#navi a {
    height: 95px;
    width: 167px;
    display: block;
    padding:0 1px;
    line-height: 1.5em;
}
.about  {
    clear: both;
    display:block;
    height: 95px;
    width: 167px;
    background:url(../img/b1a.jpg) no-repeat;
    padding:1px;
}    
.about span.hover {
    display: block;
    height: 95px;
    width: 167px;
    background:url(../img/b1b.jpg) no-repeat;
    padding:1px;
}
.galleria {
    clear: both;
    display:block;
    height: 95px;
    width: 167px;
    background:url(../img/b2a.jpg) no-repeat;
    padding:1px;
}
.galleria span.hover{
    display: block;
    height: 95px;
    width: 167px;
    background:url(../img/b2b.jpg) no-repeat;
    padding:1px;
}
.service {
    clear: both;
    display:block;
    height: 95px;
    width: 167px;
    background:url(../img/b3a.jpg) no-repeat;
    padding:1px;
}
.service span.hover {
    display: block;
    height: 95px;
    width: 167px;
    background:url(../img/b3b.jpg) no-repeat;
    padding:1px;
}
.contact {
    clear: both;
    display:block;
    height: 95px;
    width: 167px;
    background:url(../img/b4a.jpg) no-repeat;
    padding:1px;
}    
.contact span.hover {
    display: block;
    height: 95px;
    width: 167px;
    background:url(../img/b4b.jpg) no-repeat;
    padding:1px;
}
.h3 {
    position: absolute;
    padding-left:4px;
    padding-top:58px;
    float:left;
    font: 10px Lucida Grande, Tahoma, Helvetica, sans-serif;
    font-weight: lighter;
    font-variant: normal;
    text-transform: uppercase;
    color:#ffffff;
}
#follow {
    float: right;
    position: relative; 
    margin: 0 auto;
    padding-top:47px;
    padding-right:2px;
    padding: 0; 
    list-style-type: none;
}
#follow li {
    float: right;
    padding-top:47px;
    padding-right:5px;
    position: relative;

}
#follow a {
    height: 31px;
    width: 30px;
    display: block;
    padding:0 1px;
    line-height: 1.5em;
}
.sh1 {
    display: block;
    height: 31px;
    width: 30px;
    background:url(../img/s1.gif) no-repeat;
    background-position:bottom;
}
.sh2 {
    display: block;
    height: 31px;
    width: 30px;
    background:url(../img/s2.gif) no-repeat;
    background-position:bottom;
}








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




* html .clearfix { height: 1%;}
.clearfix {display: block;}

Alles anzeigen

Vielen DanK

Penzoil

Ach ja eines habe ich vergessen

Dieses Backround Bild (eines der beiden die in den Ecken der seite dargestellt werden) wird im IE auch nicht angezeigt? Das ist mein zweites sekundäres Problem

html { background-image: url(../img/back_left.gif); background-repeat:no-repeat; background-position:left top; height:100%;} [CODE]

alxy

Funktioniert es, wenn du den Code einfach so übernimmst? Also copy paste?

alxy

Unregistriert

Wie sieht deine Dokumenttyp-Deklaration aus? Ein Link zu deiner Seite wäre nicht schlecht.

Penzoil

Ich habe zum test mal eine neue Seite aufgemacht und hab diese HTML Formatierung mit meinem CSS verwendet mit dem gleichen Ergebnis. Chrome ok, Mozilla no, IE no

Code

<div id="wrap">




	<div id="main" class="clearfix">




	</div>




</div>




<div id="footer">




</div>

Alles anzeigen

Dann habe ich das CSS verwendet von der Seite. Das klappt im IE und in allen anderen Prima...

Penzoil

Die Seite ist leider nicht online aber ich poste mal den gesamten HTML Code. Ich hab bis dato keine DOCTYPE Deklaration oben drin gehabt, voll übersehen, vergessen :-o.. auf jedenfall habe ich jetzt das als "Strict" deklariert, das Problem mit dem Backround Bild ist damit behoben Danke an der Stelle aber die Footer Leiste hängt jetzt in allen Browsern oben.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>




<head>




<title>R Fotodesign</title>
<link rel="shortcut icon" href="img/favicon.ico" > 




</head>




<link rel="stylesheet" href="css/style.css" type="text/css">
<script type="text/javascript" src="java/jquery-1.6.4.js"></script>




<script type="text/javascript">
	$(document).ready(function() {
		$('.about,.galleria,.service,.contact,.b1,.b2,.b3,.b4,.b5').append('<span class="hover"></span>').each(function () {
	  		var $span = $('> span.hover', this).css('opacity', 0);
	  		$(this).hover(function () {
	    		$span.stop().fadeTo(400, 1);
	 		}, function () {
	   	$span.stop().fadeTo(400, 0);
	  		});
		});
	});
</script>








<body>




<div id="root">
	<div id="header" class="logo"></div>
	<div id="main" class="clearfix"></div>
</div>




<div id="footer">
  		<div class="h3"><a href="index.htm">HOME</a></div>

  	<div>
  		<ul id="navi">
       		<li><a href="#" class="about"></a></li>
      	    <li><a href="#" class="galleria"></a></li>
            <li><a href="#" class="service"></a></li>
            <li><a href="#" class="contact"></a></li>
    	</ul>
  	</div>

  	<div>
  		<ul id="follow">
       	    <li><a href="http://www.twitter.com" class="sh2"></a></li>
            <li><a href="http://www.facebook.com" class="sh1"></a></li>
        </ul>
 	</div>

</div>








</body>
















</html>

Alles anzeigen

Sticky Footer will einfach nicht funktionieren!

Tags

Benutzer online in diesem Thema