如何正确地将页面与页眉，导航，节和页脚对齐// HTML5和CSS

Question

Im trying for some while already to properly align my page. 我正在尝试一段时间以正确对齐我的页面。 In jsfiddle it seems to be looking nice, but in my widescreen monitor the section tag floats all the way to the left and makes a big mess! 在jsfiddle中，它看起来似乎不错，但是在我的宽屏显示器中，section标签一直浮动到最左边，并弄得一团糟！ I think I'm doing something wrong with the floating... But still: this is an exercise from my course and it says that i NEED to use the sections as display:block and align them with floating. 我想我在浮动方面做错了什么...但是，仍然：这是我课程中的练习，它说我需要将这些部分用作display：block并将它们与浮动对齐。

I've been stuck in this for a good while and I my course tutors dont answer! 我已经坚持了好一阵子，我的课程导师也没有回答！ Hope somebody can show me where I'm being mistaken. 希望有人可以告诉我我在哪里弄错了。

HTML: HTML：

<body>
    <header class="menu">
        <a href="index.html"><img class="imglogo" src="img/TotalLogo.png"></a>
    </header>
    <section class="apres">
        <p>Para&iacuteso dos Nerds</p>
        <img src="img/Personagens.png">
        <p>Jogos, Consoles, Acess&oacute;rios e Figuras de A&ccedil;&atilde;o</p>
    </section>            
    <nav class="menu">
        <ul>
            <li><a href="index.html">Total Control</a></li>
            <li><a href="consoles.html">Consoles</a></li>
            <li><a href="jogos.html">Jogos</a></li>
            <li><a href="quiz.html">Quiz</a></li>
            <li><a href="compras.html">Compras</a></li>
        </ul>
    </nav>
    <footer class="ender">
        <p>Av. Irm&atilde;os M&aacute;rio, 234<br>
            Tel: (21) 1234-5678<br>
            <a href="mailto:contato@tecontrol.com.br">contato@tecontrol.com.br</a>
        </p>
    </footer>
</body>

CSS: CSS：

root { 
    display: block;
}
body {
    background-color: #CCCCCC;
    color: #4466AA;
    font-size: 16px;
    font-family: Verdana, Liberation;

}
a{
    text-decoration: none;
    display:block;

}
a:visited{
    color:#0000FF;
}
a:link{
    color:#0000EE;
}
.menu{
    color:#0000EE;
    list-style-image:url(img/cogumelo.png);
    width:170px;

    line-height:50px;

}
.ender{
    text-align:center;
    font-size:16px;
    padding-top:15px;
    border-top:3px solid;
}
.apres{
    text-align:center;
    font-size:18px;
    font-weight:bold;
}
.imgLogo{
    border-bottom:2px solid;
}

/* Header, nav, section e footer */

header{
    display:block;
    margin-bottom:15px;
}
nav{
    display:block;
    width:240px;
    float:left;
}
section{
    display:block;
    width:540px;
    float:right;

}

footer{
    clear:both;
}

nav li:hover{
    color:#FFF;
    background: #E2E2E2;
    border-radius:5px;
    -moz-border-radius:5px;
    padding-right:3px;
    padding-left:3px;
}

The link to jsfiddle is: http://jsfiddle.net/67jrj/1/ jsfiddle的链接是： http : //jsfiddle.net/67jrj/1/

Thanks! 谢谢！

Answer 1

Set standard width for header, section(s) and footer, or better, wrap them all in a div, assign a class to it and set margin to that class. 设置页眉，节和页脚的标准宽度，或者更好的方法是将它们全部包装在div中，为其分配一个类，并为该类设置边距。 There's nothing called "root" element, replace that with html (that is what they mean by root element). 没有什么叫做“ root”元素，用html替换（这就是root元素的意思）。

Answer 2

Set the width of your page to what you like, 960px is a good standard. 将页面的宽度设置为所需的宽度，960px是一个很好的标准。 Create a div for each element needed to float in an area then clear the float with the next area. 为需要在一个区域中浮动的每个元素创建一个div，然后使用下一个区域清除浮动。 Also, rearrange the order of your elements in your html so they appear as you need them to. 另外，重新排列html中元素的顺序，以使它们按需要显示。 I'm including my example of your page, at least what I think your asking. 我包括您的页面示例，至少是我认为您的要求的示例。 :) :)

HTML: HTML：

<div class="menu">
    <ul>
        <li><a href="index.html">Total Control</a></li>
        <li><a href="consoles.html">Consoles</a></li>
        <li><a href="jogos.html">Jogos</a></li>
        <li><a href="quiz.html">Quiz</a></li>
        <li><a href="compras.html">Compras</a></li>
    </ul>
</div>

<div class="apres">
    <p>Para&iacuteso dos Nerds</p>
    <img src="img/Personagens.png">
    <p>Jogos, Consoles, Acess&oacute;rios e Figuras de A&ccedil;&atilde;o</p>
</div>

<div class="ender">
    <p>Av. Irm&atilde;os M&aacute;rio, 234<br>
    Tel: (21) 1234-5678<br>
    <a href="mailto:contato@tecontrol.com.br">contato@tecontrol.com.br</a>
    </p>
</div>
</body>
</html>

CSS: CSS：

body {
background-color: #CCCCCC;
color: #4466AA;
font-size: 16px;
font-family: Verdana, Liberation;
margin: 0 auto;
width:960px;
}

a{
text-decoration: none;
display:block;

}
a:visited{
color:#0000FF;
}
a:link{
color:#0000EE;
}
.menu{
color:#0000EE;
list-style-image:url(img/cogumelo.png);
width:170px;
float:left;
line-height:50px;

}
.ender{
text-align:center;
font-size:16px;
padding-top:15px;
border-top:3px solid;
clear:both;
}
.apres{
text-align:center;
font-size:18px;
font-weight:bold;

width: 350px;
margin: auto;
}
.imgLogo{
border-bottom:2px solid;
}

/* Header, nav, e footer */

.header{

display:block;
margin-bottom:15px;
width:960px;
}
.nav{
display:block;
width:240px;
float:left;
}

nav li:hover{
color:#FFF;
background: #E2E2E2;
border-radius:5px;
-moz-border-radius:5px;
padding-right:3px;
padding-left:3px;
}

Hope this helps! 希望这可以帮助！

如何正确地将页面与页眉，导航，节和页脚对齐// HTML5和CSS

问题描述

2 个解决方案

解决方案1
0 2014-02-08 19:46:11

解决方案2
0 已采纳 2014-02-08 21:41:47

如何正确地将页面与页眉，导航，节和页脚对齐// HTML5和CSS

问题描述

2 个解决方案

解决方案1 0 2014-02-08 19:46:11

解决方案2 0 已采纳 2014-02-08 21:41:47

解决方案1
0 2014-02-08 19:46:11

解决方案2
0 已采纳 2014-02-08 21:41:47