Question

我希望你能解决一个问题。

我正在创建一个新的Wordpress主题，我在代码中遇到了一些问题。

首先。页脚在主题的每个帖子页面中间浮动。我不知道为什么，边栏和评论部分也很奇怪，你可以在截图2中看到它。

我附上了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%;
	height:100px; 
	position:absolute; 
	bottom:0;
	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>&copy; All rights reserved 2016</li>
            </ul>
                       
        </div>
        
    </footer>
        
    </body>
</html>

Answer 1

要解决页脚问题，您需要为body元素添加定位。

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

在wordpress主题的页脚在浮动中间页

1 个答案: