Проблема с боковой панелью навигации

Question

Проблема с боковой панелью навигации

0

Я уверен, что я только сделал глупую ошибку с этим, но я не могу заставить его работать. Элементы моего списка в моем навигаторе не начинаются с края моего div, это почти похоже на запас слева.

HTML

<div class="container">
<div id="topline"> blah blah </div>
    <div class="leftbox">
    <img src="images/totalbulllogo.svg" alt="Total Bull Clothing Company Logo" /> 
    </div>
    <div id="banner">
    <img src="images/totalbullbanner2.jpg" alt="Total Bull Clothing Company Logo" /> 
    </div>
    <div id="navmenu">
    <ul>
    <li class="active"><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">STORE</a></li>
    <li><a href="#">SALE ITEMS</a></li>
    <li><a href="#">CONTACT</a></li>
    </ul>
    </div>
    <div id="mainContent"> FEATURED ITEMS</div>

</div>

CSS

html, body {    
        margin:0;
        padding:0;
        font-family: Calibri, Arial, sans-serif;
}

@font-face {
font-family:'Neon 80s';
src:url('../fonts/neon.ttf'),
    url('../fonts/neon.eot');
    }

.container {
        clear: both;
        margin: 0 auto;
        padding: 0;
        width: 58%;
        background-color: #FFFFFF;}

#topline {  float:left;
        text-align:right;
        padding: 0;
        width: 100%;
        height: 5%;
        background-color: #FFF;
        margin-top:2%;
        margin-bottom:2%;}

.leftbox {
        float:left;
        padding: 0;
        width: 30%;
        background-color: #5D2F92;}
.leftbox img {width: 96%;
margin-left: 3%
margin-right:1%;}

#banner img {width: 100%;}


#banner {float:left;
     width:68%;
     margin-left:2%;}

#navmenu {
        float:left;
        padding: 0;
        width: 30%;
        background-color: #5D2F92;
        height: 100%;
        margin-top:0.5%;
        font-family:'Neon 80s';
        font-size:18pt;
        text-align:left;
        }

#navmenu li {
        list-style:none;
        margin: 0;
        }

#navmenu li a {text-decoration:none;
        color:#FFFFFF;
        margin: 0;
        display:block;
        padding:20px 0px;}  
#navmenu li.active a {background-color:#C49A6C;}        

#mainContent {float:left;
          width:68%;
          background-color:red;
          text-align:center;
          margin-top:0.5%;
           margin-left:2%;}

user2358021 19 сен. 2013, в 06:33

Источник

Теги:

html

css

nav

1 ответ

Ещё вопросы

gespinha · Accepted Answer · 2013-09-19T01-47-00.000Z

Вы забыли сбросить браузер ul значения CSS по умолчанию.

По умолчанию в зависимости от браузера есть некоторые значения атрибутов, назначенные некоторым элементам, в случае, когда ul имеет некоторый запас и отступ. Поэтому, чтобы исправить это, вы должны сбросить эти значения следующим образом:

http://jsfiddle.net/gespinha/dW9wB/1/

  #navmenu ul{
       margin:0;
       padding:0;
    }