2017-01-03 5 views
0

私のカスタムWordpressのテーマに大きな問題があります。 私は多くの研究をしましたが、修正されていないようです。 私のフッタはページの下部には残らず、ポストやスタティックページにも中央ページを浮かべます。 私はそこですべてを試しましたが、何も動作していないようです。私はまた、これが多くの原因を持つ可能性のある非常に一般的な問題であることに気づいたので、ここで何が起こっているのか分かりません。コードを確認して再確認しましたが、どこにエラーがあるのか​​分かりません。 また、私のフッタにはホームページの巨大な空白があります。下端と上端を適用しようとしましたが、何も動作しません。Wordpressのテーマ - 私のフッターは底にとどまりません

私はコードといくつかのスクリーンショットを添付しました! お願いします、どうもありがとうございます!

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

あなたのサイトを共有することができます任意のチャンス?実行時に提供されるコードは、底部に固執しています。 –

+0

こんにちはEliezer!これはウェブサイトですhttp://aprendiendo-a.comそれをチェックし、私を助けてくれてありがとう:) – Karenpfarah

答えて

0

私は今、あなたのコードの中に探していますが、

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

私はあなたのCSSの不適切な構文があると思う私はあなたが一瞬で操作することができるフッターを作成します。 – Anthony

+0

こんにちはアンソニー!あなたはその観察のためにあなたをThabしますが、私はフッターに影響を及ぼすとは思いません:(私はまだ同じ問題を抱えています。私はあなたの作成のフッタを待っています、私は助けになるでしょう:)ありがとうとても! – Karenpfarah

0
を示し、あなたのfacebook.pngのためのアンカータグの場合には問題があります

フッターのCSSコードはposition:absoluteです。ポジションアブソリュートは自分が何をしているかを知っている場合にのみ使用してください。あなたのコードで

ルック:

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

あなたは0ピクセル離れて、左から、離れて下からゼロ画素としてこれを読んで、絶対的な位置にすることができます。ページをスクロールすると、フッターはスクロールして表示されます。これは、99.999%のケースで、フッターが必要でないものです。また、フロントページの空白部分も担当しています。

ではなく、試してみてください。

footer { 
    position:fixed; 
} 

...あなたはフッターが下に固執するが、常に表示されたり

footer { 
     position:inherit; 
    } 

を試してみたい場合は...いつもの行動のために。

ここでpositionプロパティについて詳しく読む:ところでhttp://www.w3schools.com/css/css_positioning.asp

:このような質問はあなたがunessecary多くのコードを投稿としてうまく答えれる可能性が非常に高いではないことを認識してください(どのように上の続きを読みますa Minimal, Complete and Verifiable exampleを作成してください)。

+0

こんにちはBlackbam!その素晴らしい説明とあなたのお手伝いをありがとうございます。私はそれを試みたが、上下にスクロールするときにフッターの動きを知っている。 私はすべてを試しましたが、何も動作しません。 – Karenpfarah

+0

試行位置:継承または位置:相対。これはおそらくあなたが望むものでしょうか?そして底部を取り除く:0;左:0。おそらくあなたが望むものではないでしょう... – Blackbam

0

はこのCSSを変更してみてください:

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

に:

#redes{ 
float:left; 
position: relative; 
top: -35px; 
} 
関連する問題