2017-01-03 2 views
0

Ich habe ein großes Problem mit meinem benutzerdefinierten Wordpress-Theme. Ich habe viel geforscht, aber es scheint nicht behoben zu werden. Meine Fußzeile bleibt nicht unten auf der Seite, sie schwebt sogar auf Seiten von Seiten und Statikseiten. Ich habe alles ausprobiert, aber nichts scheint zu funktionieren. Ich habe auch bemerkt, dass dies ein sehr häufiges Problem ist, das viele Ursachen haben kann, so dass ich nicht wirklich weiß, was hier vor sich geht. Ich habe meinen Code überprüft und erneut überprüft, weiß aber nicht, wo der Fehler liegt. Auch meine Fußzeile hat einen großen leeren Platz darüber in der Homepage, ich habe versucht, unteren und oberen Ränder, aber nichts funktioniert.Wordpress Theme - Meine Fußzeile bleibt nicht am Ende

Ich habe den Code und einige Screenshots beigefügt! Bitte helfen Sie mir, vielen Dank!

http://www.screencast.com/t/1uTrUy6t26z http://screencast.com/t/ASOXPY0G

body{ 
 
    font-family: DINCond; 
 
    margin: 0; 
 
    position: relative; 
 
} 
 

 
.wrapper{ 
 
    
 
    width: 100%; 
 
    max-width: 1180px; 
 
    padding:0; 
 
    margin: 0 auto; 
 
} 
 

 
h1.banner{ 
 
    background-image: url(images/nuevo-banner_01.jpg); 
 
    background-repeat: no-repeat; 
 
    text-indent: -10000px; 
 
    height: 400px; 
 
    width: 100%; 
 
} 
 

 
header nav{ 
 
    float:right; 
 
} 
 

 
header nav h2{ 
 
    text-indent: -10000px; 
 
    height: 0; 
 
    margin: 0; 
 
} 
 

 

 
header nav li{ 
 
    float: left; 
 
    list-style-type: none; 
 
    margin: 10px; 
 
    position:relative; 
 
     top: -398px; 
 
    left: -287px; 
 
} 
 

 
header nav li a{ 
 
    
 
    text-decoration: none; 
 
    color: #baa383; 
 
    font-size: 18px; 
 
} 
 

 
#section-menu ul{ 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
#first-column{ 
 
    
 
    position: relative; 
 
    top: -23px; 
 
    left: -50px; 
 
    padding: 0; 
 
    margin: 30px; 
 
} 
 

 
#first-column li{ 
 
    
 
    margin: 0 0 20px 0; 
 
    width: 100% 
 
} 
 

 
#second-column{ 
 
    
 
    position: relative; 
 
    right: -320px; 
 
    top: -533px 
 
     
 
} 
 

 
#second-column li{ 
 
    
 
    margin: 0 0 20px 0; 
 
    width: 100%; 
 
} 
 

 
#third-column li{ 
 
    
 
    position: relative; 
 
    right: -730px; 
 
    top: -1034px; 
 
    padding: 0; 
 
    margin: 0 -65px; 
 
    width: 100%; 
 
} 
 

 
#banner-inferior{ 
 
    
 
    position: relative; 
 
    top: -1030px; 
 
    padding: 0; 
 
    width: 100%; 
 
    
 
} 
 

 

 
footer{ 
 
    
 
    width:100%; 
 
\t height: 100px; 
 
\t position:absolute; 
 
\t bottom:0; 
 
\t left:0; 
 
    display: block; 
 
} 
 

 
#redes{ 
 
    
 
    float:left; 
 
    position: relative; 
 
    top: -35px; 
 
    
 
} 
 

 
#redes li{ 
 
    display: inline-block; 
 
    margin-left: 30px; 
 
    position: relative; 
 
    left: 50px; 
 
} 
 

 
h3.redes{ 
 
    
 
    position: relative; 
 
    top: -100px; 
 
} 
 

 
.comment-meta{ 
 
    
 
    position: relative; 
 
} 
 

 
footer ul{ 
 
    
 
    list-style-type: none !important; 
 
    font-size: 25px; 
 
    float: right; 
 
    
 
} 
 

 
footer li{ 
 
    
 
    text-align: center !important; 
 
} 
 

 
#post-content{ 
 
    
 
    float:left; 
 
    width: 70%; 
 
    clear: both; 
 
} 
 

 
#sidebar{ 
 
    
 
    float:right; 
 
    width: 26%; 
 
    padding: 1%; 
 
    background: #ffffff; 
 
} 
 

 
#sidebar li{ 
 
    list-style-type: none; 
 
    margin-left: -40px; 
 
    position: relative; 
 
    left: -20px; 
 
} 
 

 

 
.comment-list{ 
 
    list-style-type: none; 
 
    padding: 0; 
 
}
<html> 
 

 
<head> 
 
    <title>Aprende A</title> 
 
    <link href="style.css" type="text/css" rel="stylesheet"> 
 
    </head> 
 
    
 
<body> 
 
    
 
    <header> 
 
     <div class="wrapper"> 
 
      
 
      <h1 class="banner">Aprende A</h1> 
 
      <nav> 
 
      <h2>Main Navigation</h2> 
 
       <ul> 
 
       <li><a href="">Inicio</a></li> 
 
       <li><a href="">Productividad</a></li> 
 
       <li><a href="">Finanzas Personales</a></li> 
 
       <li><a href="">Salud</a></li> 
 
       <li><a href="">Otros</a></li> 
 
       <li><a href="">Contacto</a></li> 
 
       </ul> 
 
        
 
      </nav> 
 
     
 
     </div> 
 
     
 
    </header> 
 
    
 
    <!--Start of homepage content--> 
 
    
 
    <div class="wrapper"> 
 
     <section id="section-menu"> 
 
      
 
      <section id="first-column"> 
 
      <ul> 
 
      <li><a href=""><img src="images/images/baner-frase-inferior_04.jpg"></a></li> 
 
      <li><a href=""><img src="images/newsletter.jpg"></a></li> 
 
      </ul> 
 
      </section> 
 
      
 
      <section id="second-column"> 
 
      <ul> 
 
      <li><a href=""><img src="images/images/categorias_06.jpg"></a></li> 
 
      <li><a href=""><img src="images/images/novedades_15.jpg"></a></li> 
 
      </ul> 
 
      </section> 
 
      
 
      <section id="third-column"> 
 
      <ul> 
 
      <li><a href=""><img src="images/images/populares_09.jpg"></a></li> 
 
      </ul> 
 
      </section> 
 
      
 
      <section id="banner-inferior"> 
 
       
 
      <img src="images/images/populares_19.jpg"> 
 
      
 
      </section> 
 
     
 
     </section> 
 
    </div> 
 
    
 
    <!--End of homepage content--> 
 
    
 
    <footer> 
 
    
 
     <div class="wrapper"> 
 
      
 
      <div id="redes"> 
 
       <ul> 
 
      <li>Síguenos en nuestras redes sociales</li> 
 
      <li><a href=""><img src="images/instagram.png"></a></li> 
 
       <li><a href=""><img src="images/facebook.png"></a>a></li> 
 
      </ul> 
 
        </div> 
 
      <ul> 
 
      <li><img src="images/library.png"></li> 
 
      <li>Aprendiendo A</li> 
 
      <li>&copy; All rights reserved 2016</li> 
 
      </ul> 
 
         
 
     </div> 
 
     
 
    </footer> 
 
     
 
    </body> 
 
</html>

+0

jede Chance, dass Sie Ihre Website teilen? Der bereitgestellte Code bleibt, wenn er ausgeführt wird, an der Unterseite. –

+0

Hallo Eliezer! Dies ist die Website http://aprendiend-a.com Vielen Dank für das Auschecken und versuchen, mir zu helfen :) – Karenpfarah

Antwort

0

Suche in Ihren Code jetzt aber gibt es ein Problem mit einem Anker-Tag für Ihren facebook.png der

<a>a> //take a> away 
+0

Ich denke, Sie haben falsche Syntax für Ihre CSS Ich werde eine Fußzeile erstellen, die Sie in einem Moment manipulieren können . – Anthony

+0

Hallo Anthony!Thabk Sie für diese Beobachtung, aber ich glaube nicht, dass die Fußzeile beeinflussen :(Ich habe immer noch das gleiche Problem. Ich werde auf diese Fußzeile warten Ihre Erstellung, ich bin sicher, es wird hilfreich sein :) danke sehr viel! – Karenpfarah

0

zeigt Der CSS-Code Ihrer Fußzeile ist Position: absolut. Sie sollten Position absolute nur verwenden, wenn Sie wissen, was Sie tun.

Schauen Sie sich Ihr Code:

footer { 
    width:100%; 
    height: 100px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    display: block; 
} 

Sie können dies als Null Pixel weg von unten gelesen, null Pixel von links weg, aber in absoluten Position. Sobald Sie die Seite scrollen, wird die Fußzeile mit der Rolle gehen, die Sie in 99,999% der Fälle für eine Fußzeile nicht möchten. Es ist auch verantwortlich für den leeren Platz auf Ihrer Startseite. stattdessen

Versuchen:

footer { 
    position:fixed; 
} 

... wenn Sie die Fußzeile wollen auf den Boden bleiben, aber immer sichtbar oder

footer { 
     position:inherit; 
    } 

... für das übliche Verhalten versuchen sein.

Lesen Sie mehr über die Position Eigenschaft hier: http://www.w3schools.com/css/css_positioning.asp

By the way: Bitte erkennen, dass eine Frage wie diese nicht sehr wahrscheinlich ist, gut zu beantworten, wie Sie eine Menge von unessecary Code geschrieben (lesen Sie mehr auf, wie man create a Minimal, Complete and Verifiable example).

+0

Hallo Blackbam! Danke für diese großartige Erklärung und Ihre Hilfe. Ich habe das versucht, aber ich weiß, dass sich die Fußzeile bewegt, wenn ich auf und ab scrolle. Ich habe alles versucht, aber nichts funktioniert. – Karenpfarah

+0

Versuchsposition: erben oder Position: relativ. Das ist wahrscheinlich was du willst? Und entferne den Boden: 0; und links: 0; es ist wahrscheinlich nicht was du willst ... – Blackbam

0

Versuchen Sie, die CSS dieser Wechsel:

#redes{ 
float:left; 
position: relative; 
top: -35px; 
} 

zu:

#redes{ 
float:left; 
position: relative; 
top: -35px; 
}