代码之家 › 专栏 › 技术社区 › xR34P3Rx

旁白和文章与标题重叠

positioning css html php

xR34P3Rx · 技术社区 · 9 年前

我正在用HTML5重新制作一个旧珍宝家具和进口网站。

我对 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

1 回复 | 直到 9 年前

Domain 9 年前

1) 我在这里看到的一个问题是 header 标签作为自动关闭标签。

2) 确保您已在必要的位置清除浮子,例如- http://www.w3schools.com/cssref/pr_class_clear.asp

3) 如果您共享面临问题的页面的URL,则调试会更有用。