Question

我有一个问题，我怎样才能让容器div在菜单下，当我把容器背景放在标题和菜单旁边时...有人可以帮我修复我的问题吗？我的HTML和CSS吼叫......

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Рено Клуб Македонија - Добредојдовте</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div class="web">
    <div id="header">
        <div class="logo">
          <a href="#"><img src="images/logo.png" alt="Logo"/></a>
        </div> <!-- logo end -->

            <div class="menu">
              <ul>
                  <li class="active"><a href="#" style="color:#ecd302">Почетна</a></li>
                  <li><a href="#">Форум</a></li>
                  <li><a href="#">Клуб</a></li>
                  <li><a href="#">Членство</a></li>
                  <li><a href="#">Галерија</a></li>
                  <li><a href="#">Огласник</a></li>
                  <li><a href="#">Контакт</a></li>
              </ul> <!-- main menu end -->
            </div> 
    </div> <!-- header end -->  
     <div class="container">

        <p id="petrol">Превземено од Макпетрол *цените се изразени во денари / литар </p>

     </div>
</div><!-- web end -->

@charset "utf-8";

body {
margin:0;
padding:0; 
width:960px; 
background:#e2e2e2; 
}

a {
text-decoration:none;
color:#ffffff;
text-shadow:1px 1px #000000;
}

a:hover {
text-decoration:none;
color:#a6a5a5;
}

a:active {
text-decoration:none;
color:#ecd302;
}

.web {
width:960px;
margin-left:auto;
margin-right:auto;
}

#header {
 background-repeat:no-repeat; 
 display:block; 
 margin:auto; 
 padding:0px; 
 height:110px; 
 background:#ecd302;  
 position:absolute;
 top:0; 
 left:0; 
 right:0; 
}

.logo { 
background-repeat:no-repeat; 
width:305px;
height:85px; 
float:left; 
margin:10px 0 0 202px;
}

.menu {
background:#4b4b4b;
text-transform:uppercase;
word-spacing:32px;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
border-bottom:1px solid #000;
border-top: 1px solid #000;
display:block;
position:absolute;
top:105px;
left:0;
right:0;
}

ul {

}


li {
display:inline;
}

.container {
background:#929191;
left:0px;
right:0px;
text-align:right;
width: 960px;
font-size:12px;

}

如果我的问题不明白，请与我联系......我会提供更多信息。

Answer 1

注意，使用position: absolute会阻止元素占用任何空间，这就是其他元素到达该位置的原因。结果是多个元素在同一个地方，这是你最不想要的。因此，只有在必要时才使用position: absolute。

我从position: absolute和#header移除了.menu。现在，您还不再需要top，left和right。您也不需要定义width的{{1}}，因为它已经为body定义。此外，我从.web和.logo中移除了一些样式，以获得屏幕截图中显示的结果。

更新代码： http://jsfiddle.net/azq50bsd/5/

#header

如何使用CSS将容器div放在菜单下

1 个答案: