Ergebnis 1 bis 6 von 6

Thema: Sticky Footer will einfach nicht funktionieren!

  1. #1
    HTML Newbie
    Registriert seit
    25.11.2011
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage Sticky Footer will einfach nicht funktionieren!

    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>


    CSS

    Code:
    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;}

    Vielen DanK
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    HTML Newbie
    Themenstarter

    Registriert seit
    25.11.2011
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Sticky Footer will einfach nicht funktionieren!

    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]

  3. #3
    Samurai
    Registriert seit
    21.08.2011
    Beiträge
    233
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Sticky Footer will einfach nicht funktionieren!

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

    alxy

  4. #4
    Unregistriert
    Gast

    Standard AW: Sticky Footer will einfach nicht funktionieren!

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

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    25.11.2011
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Sticky Footer will einfach nicht funktionieren!

    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>
    Dann habe ich das CSS verwendet von der Seite. Das klappt im IE und in allen anderen Prima...


  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    25.11.2011
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Sticky Footer will einfach nicht funktionieren!

    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 .. 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.

    Code:
    <!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>

Ähnliche Themen

  1. Footer wird nicht angezeigt
    Von Mus im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 07.08.2010, 01:08
  2. Footer nicht am rechten platz:(
    Von Loui im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 13.12.2009, 19:26
  3. Metatags funktionieren nicht
    Von Markus K im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 01.01.2009, 23:31
  4. Banner funktionieren nicht!
    Von im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 07.05.2005, 10:55
  5. Links Funktionieren nicht
    Von nobody im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 09.03.2004, 13:10

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •