Question

Jfiddle http://jsfiddle.net/H5LmF/2/

如果你看这个，我的白色酒吧位于顶部，我已经不知道他为什么在那里，就像他不认识我的横幅一样。无论如何，我希望我的白色条在中心的横幅下方（图中的红色条）。我真的不知道该怎么做，并将此视为我的最后一招

HTML：

<div class="navCont">
    <div class="bancont"><img class="banner" src="images/banner.png"></div>
    <nav class="cssmenu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Prijzen</a></li>
            <li><a href="#">Examen</a></li>
            <li><a href="#">Leerlingen</a></li>
        </ul>
    </nav>
</div>
<div class="midden">

    <div class="middentextvak">
    </div>
    <img class="logo" src="images/logo.png">
</div>

的CSS：

body
{
    background-image:url('images/background.jpg');
    background-repeat: no-repeat;
    height: 100%;
    margin: 0 0 0 0;
}


.banner
{
    width: 100%;
    top: 0;
    left: 0;
    position: relative; 
    float: left;

}


.cssmenu
{
    float:left;
    margin-top: 0px;
    left: 0;
    background-color:black;
    width: 100%;
    height: 6%;

}

.cssmenu ul
{
    list-style-type:none;
    text-align: center;
    margin-right: 6%;
}

.cssmenu li
{
    display:inline; 
    padding-left: 5%;

}

.cssmenu li a
{
    color: white;
    text-decoration: none;
    font-family:Eras Bold ITC;
    font-size: 20px;

}

.cssmenu li a:hover
{
    color: #0671ca;
    text-decoration: none;
    font-family:Eras Bold ITC;
    font-size: 20px;
}

.middentextvak
{
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;
    background: white;

}

.logo
{
    position: absolute;
    display: block;
    margin-left: 25%;
    margin-right: auto;
    margin-top: 3%;
    width:50%;
    opacity: 0.5;
    z-index: -1;
}

Answer 1

似乎是关于浮动元素的方式。

尝试

.midden {
 clear:both;
}

告诉midden div出现在任何浮动元素的下方。

Answer 2

如果你摆脱浮动：左边的菜单，白框将在菜单下方和中间。菜单默认为左，所以摆脱浮动：左边没有改变其他任何东西。一般来说，为元素设置一个浮动属性使它不会像通常那样影响它周围元素的位置。

非常奇怪的html / css

2 个答案: