Подлый СSS не потдается

Bizon4ik · November 6, 2012

Помогите разобраться плз почему при следующем коде:

HTML:


<body>
<p class="footer_one">  </p>
<div class="menu">
    <ul>
    <li ><a href="#">All Clients</a></li>
    <li ><a href="#">Regions</a></li>
    <li ><a href="#">Board</a></li>
    <li ><a href="#">Working</a></li>
    <li ><a href="#">New Client</a></li>
    <li ><a href="#">Search</a></li>
    </ul>
</div>
</body>

СSS


body {
    margin:0;
    padding:0;
}

.footer_one {
    display: table;
    width: 809px;
    line-height: 22px;
    text-align: right;
    font-family: sans-serif;
    font-size: 10px;
    margin:auto;
    border:black solid 1px;
}
/*——————> Begin of Menu <———————--*/
.menu {
    margin:auto;
    width:809px;
    border:black solid 1px;
}

ul{
	list-style:none;
	width:809px;
	height:40px;
	background:green top left repeat-x;
}
ul li{
	float:left;
	display: inline-block;
        width: 134px;
    }

.menu ul li a{
	display:block;
	line-height:40px;
    font-size: 15px;
    font-family: sans-serif;
  	color:#fff;
	text-decoration:none;
	text-align:center;
    }

я получаю следующий резутат

Почему во втором блоке есть отступы сверху и снизу и почему меню вылазит за размеры блока?

И самое интерестно: Почему тут http://jsfiddle.net/Bizon4ik/h6ndL/ код работает?

Заранее спасибо

Edited November 6, 2012 by Bizon4ik

strange_atom · November 6, 2012

добавьте к стилям списка

ul { 
	margin:0;
	padding:0
}

Bizon4ik · November 7, 2012

добавьте к стилям списка
ul { 
	margin:0;
	padding:0
}

Огромное вам спасибо.

Great Rash · November 7, 2012

У вас с CSS все печально...


ul li{
  float:left;
  display: inline-block;
  width: 134px;
}

Тут вам надо определиться: или использовать float, или inline-block. При использовании float действие inline-block отменяется, так что второе свойство можно смело убирать.

.footer_one {
  display: table;
  width: 809px;
  line-height: 22px;
  text-align: right;
  font-family: sans-serif;
  font-size: 10px;
  margin:auto;
  border:black solid 1px;
}

Научитесь кратко записывать стили, например это свойство могло бы выглядеть так:

.footer_one {
  display: table;
  width: 809px;
  font: 10px/22px sans-serif;
  text-align: right;
  margin:auto;
  border:black solid 1px;
}

Bizon4ik · November 7, 2012

Great Rash спасибо за ваши подсказки и советы. Буду старатся улутшить свой СSS :blush:

Sign In

Подлый СSS не потдается

Question

Bizon4ik

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

strange_atom

Link to comment

Share on other sites

Bizon4ik

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Bizon4ik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information