-3
私はあなたが問題を手伝ってくれることを願っていました。浮動中盤のワードプレステーマのフッタ
私は新しいWordpressテーマを作成していますが、コードにいくつか問題があります。
最初。フッタは、テーマのすべてのポストページで中央ページに浮いています。私はなぜ、またサイドバーとコメントのセクションが奇妙なのかわからない、あなたはscreenshot2でそれを見ることができます。
HTMLとCSSコードを添付しました。ここで
私が何をするか分からないのスクリーンショットhttp://www.screencast.com/t/3kj23pSbRとhttp://screencast.com/t/1hoMEmIwy3MJ
は、事前にあなたに感謝しています!
/*/////////////START OF THEME TEMPLATE//////////*/
body{
font-family: DINCond;
margin: 0
}
.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;
}
footer ul{
list-style-type: none;
font-size: 25px;
float: right;
}
footer li{
text-align: center;
}
#post-content{
float:left;
width: 70%;
clear: both
}
#sidebar{
float:right;
width: 26%;
padding: 1%;
background: #baa383;
}
<!DOCTYPE html>
<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">
<ul>
<li><img src="images/library.png"></li>
<li>Aprendiendo A</li>
<li>© All rights reserved 2016</li>
</ul>
</div>
</footer>
</body>
</html>
こんにちは、ありがとうございます!それは非常にうまくいったが、今私はフッターの上に空白スペースがある – Karenpfarah
@ Karenpfarah素晴らしい、あなたがチャンスを得るときに私の答えを受け入れてください。 –
完了!今、フッタの上の空白部分で私を助けることができますか?ありがとうございます – Karenpfarah