Не работает width в процентах
В общем начал изучать верстку, начал пытаться делать макет и в итоге получилось так, что мне надо растянуть nav на всю страницу, поэтому в селекторе со стилизацией ссылок я сделал width=100%, и в итоге ничего не меняется. делаю 25, 50 вообще без разницы. При этом использую px или em все стабильно работает.
Код в HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Изучение CSS</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<h2 class="header">Добро пожаловать</h2>
<div class="nav">
<ul>
<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>
</div>
</body>
</html>
Код в CSS:
*{
box-sizing: border-box;
}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd,
ol, ul, li, form, table, caption, tr, th, td, article, aside, footer, header{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
h2{
background-color: darkseagreen;
color: #2F4F4F;
font-family: Georgia, 'Times New Roman', Times, serif;
width: 100%;
height: 10%;
padding-top: 10px;
text-align: center;
height: 40px;
}
div.nav{
width: 100%;
}
.nav{
background-color: #708090;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
clear: both;
}
.nav ul{
margin: 0px;
padding: 0px;
list-style: none;
}
.nav li{
float: left;
}
.nav ul a{
display: block;
background-color: #696969;
color: #F5F5DC;
height: 35px;
padding: 10px;
text-align: center;
text-decoration: none;
border-left: 1px solid gray;
}
Очень надеюсь на вашу помощь, все перепробовал, ничего не работает.
Заранее спасибо
Если ты сделаешь .nav li { width: 100%; то работать все будет, а значит и для div работает, видно, что тоненькая полоса от него реально на 100% и стоит.
добавь диву высоты
height: 37px;
совсем не понятно зачем ты стиль для одного и того же класса на два блока кода разделил...
да и вообще. куча лишнего понаписана... словно ты вообще не понимаешь что пишешь...