Question

我正在为HTML5中的旧宝物家具和进口网站重建。

我对aside和article标记的定位存在问题。他们似乎非常喜欢标题，以至于他们都在他身上。我试图将两个（aside和article）的位置设置为relative，absolute，fixed。我已经在我读过的另一个帖子中建议了overflow: hidden;。没有人正确定位它们：

__________________________
|Header                  |
|------------------------|
|aside|article           |
|     |                  |
|_____|__________________|
|footer                  |
|------------------------|

只有页脚处于正确的位置。

我的index.php：

<!DOCTYPE html>
<html>
<head>
<!-- Imports page's CSS style -->
<link href="01d7r345ur3557y13.css" rel="stylesheet" type="text/css" />
<!-- Sets Page FavIcon -->
<link rel="shortcut icon" href="http://i.imgur.com/V6a6eGp.png" />
<title>Old Treasures Furniture and Imports</title>
</head>

<body>
<!-- Page Header/Banner Begin -->
<header alt="Old Treasures Furniture and Imports" />
<!-- Page Header/Banner End -->

<!-- Navigation Buttons Begin (Home, Products, Services, Contact) -->
<aside>
    <?php
        include("aside.php");
    ?>
</aside>
<!-- Navigation Buttons End -->

<!-- Content of Page Begin -->
<article>
    <img class="wagon" src="http://i.imgur.com/1hg8f8H.jpg" />
    <p>Welcome to Old Treasures Furniture and Imports, <br />We are a company dedicated to the manufacture and marketing of solid wood products.<br />Our services are oriented to decorators, builders, architects and clients like you.</p>
</article>
<!-- Content of Page End -->

<!-- Footer of Page Begin (Copyright, "Inline"-Share) -->
<footer>
    <?php
        include("footer.php");
    ?>
</footer>
<!-- Footer of Page End -->
</body>
</html>

我的01d7r345ur3557y13.css：

（我省略了其余的CSS，我怀疑它们对此有影响。）

body {
margin: 0;
padding: 0;
background: url("http://i.imgur.com/kRh8uzK.png?1") fixed;
}
header {
width: 65%;
height: 250px;
background-image: url("http://i.imgur.com/jxzkFhn.jpg");
background-size: 100% 100%;
margin: 20px auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
article {
border: 1px #fff solid;
overflow: hidden;
}
footer {
background: url("http://i.imgur.com/x1WvVZp.png");
text-align: center;
color: #FFF;
}
footer p {
font-size: 10px;
}
header, footer, aside, article {
display: block;
}

/*Page Navigation*/
aside {
float: left;
width: 120px;
margin: 0;
}
aside li {
display: block;
}
aside ul {
margin: 0;
padding: 0;
}
.home {
background: url("http://i.imgur.com/ma42CHH.png");
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
webkit-transition: background .25s ease-in-out;
width: 119px;
height: 31px;
}
.home:hover {
background: url("http://i.imgur.com/iKLHtvh.png")
}
.products {
background: url("http://i.imgur.com/sqBqNwp.png");
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
webkit-transition: background .25s ease-in-out;
width: 119px;
height: 31px;
}
.products:hover {
background: url("http://i.imgur.com/hRGXnqt.png?1");
}
.services {
background: url("");
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
webkit-transition: background .25s ease-in-out;
width: 119px;
height: 31px;
}
.services:hover {
background: url("");
}
.contact {
background: url("http://i.imgur.com/etMulj7.png");
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
webkit-transition: background .25s ease-in-out;
width: 119px;
height: 31px;
}
.contact:hover {
background: url("http://i.imgur.com/v4ZA6LH.png");
}

截至目前，我还在尝试其他方法来解决这个问题。非常感谢！

这是当前网站以及元素的定位应该如何。 http://www.oldtreasuresfurniture.com/

这就是我目前所获得的： My Issue

Answer 1

1）我在这里看到的一个问题是，您使用header标记作为自我结束标记。

2）确保你已经在必要的地方清理了浮子，例如 - http://www.w3schools.com/cssref/pr_class_clear.asp

3）如果你共享你面临问题的网页的网址，调试会更有帮助。

旁边和文章重叠标题

1 个答案: