ul и li выдвигают div из выравнивания - PullRequest
Новая
       17

ul и li выдвигают div из выравнивания

1 голос
/ 06 июля 2011

У меня все мои div'ы центрированы так, чтобы левый и правый края были выровнены по вертикали, но когда я добавил ul и li, мой .nav начал иметь цвет фона, который простирается за правый край. Есть идеи, как это заблокировать? максимальная ширина не препятствует вытеканию наружу.

HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

<title></title>
</head>

<body>

<div class="container">

    <div class="header">

    <img src="image/logo.png" width="155" height="110" alt="Big Box Property Preservation" />

    </div>

    <div class="navContainer">


        <div class="miniNav">

        <img src="image/link_banner.nav.png" width="189" height="44"/>

        </div>

        <div class="nav">
            <ul class="nav">
                <li><a href="URL" alt="HOME">HOME</a></li>
                <li><a href="URL" alt="ABOUT US">ABOUT US</a></li>
                <li><a href="URL" alt="OUR SERVICES">OUR SERVICES</a></li>
                <li><a href="URL" alt="CONTACT US">CONTACT US</a></li>
            </ul>
        </div>



    </div>

    <div class="content">

        <div class="contentBody">

        </div>

        <div class="sidebar1">

        </div>

    </div>

    <div class="footer" >

    </div>

</div>


</body>
</html>

CSS: 

@charset "utf-8";
/* CSS Document */

body{
    top:0;
    left:0;
    margin:0;
    padding:0; 
    background-color:#666;  
}

.container{
    position:relative;
    margin-top: 0%;
    position:relative;
    width:1000px;
    margin:0px auto;
}

.header{
    position:relative;
    float:left;
    width:900px;
    height:120px;
    background-color:#CFCA4C;
    margin:0px 50px 0px 50px;
}

.navContainer{
    position:relative;
    float:left;
    width:100%;
    height:80px;
    margin:0px 0px 0px 0px;

}

.miniNav{
    height:100%;
    position:absolute;
    right:0px;
}

.nav{
    float:left;
    max-width:900px;
    width:900px;
    height:100%;
    background-color:#FFFFFF;
    overfow:hidden;
    margin: 0 20px 0 50px;
}

ul.nav{
    list-style:none;    
    padding: 0px;
}

ul.nav li{
    display:inline;
    padding:0px;    
    float:left;
}



.content{
    float:left;
    width:900px;
    min-height:400px;
    background-color:#FFFFFF;
    margin:0px 50px 0px 50px;
}

.footer{
    float:left;
    width:900px;
    height:80px;
    background-color:#CFCA4C;
    margin:0px 50px 0px 50px;
}

Ответы [ 3 ]

1 голос
/ 06 июля 2011

И div, и ul имеют класс nav.Ul с class nav не должен иметь полей (они уже были добавлены в div).Так что добавьте: 

ul.nav {margin: 0}
0 голосов
/ 06 июля 2011

Что вам действительно нужно сделать, это просто удалить много свойств.

Вы также должны установить .container на 900px вместо 1000px, потому что это то, насколько широки все вещи внутри него.

Вы можете удалить почти все экземпляры float: left и margin.

Элементы уровня блока (например, div s) по умолчанию будут расширяться, чтобы заполнить доступную ширину, поэтому вам не нужно указывать width: 900px столько раз. Это не поведение, если вы float: left элемент, но я удалил ваши экземпляры этого.

Итак, учитывая все это, см .: http://jsbin.com/ozemoy. Устанавливается только один width :)

0 голосов
/ 06 июля 2011 
.nav {
     width: 850px;
 }

jsFiddle: http://jsfiddle.net/kongr45gpen/a5Auj/

...