помогите с selected

MaSoGg · November 7, 2011

Здравствуйте, я новичек в верстке. У меня не получается что бы ,если страница открыта ,то пункт меню стал выделенным (selected) сначала работало ,но потом я что-то изменил и перестало работать.

Еще не подскажете как выровнять меню по центру?

Заранее благодарен!

<!DOCTYPE html>

<html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

body { margin: 0; }

header {

display: block; /* Для старых браузеров */

height: 75px; /* Высота шапки */

background: #ffffff no-repeat center bottom;

}

nav {

background: #557799 no-repeat center bottom;

height: 32px;

display: block;

}

.css-menu-1 {

list-style: none

}

.css-menu-1 li {

display: inline

}

.css-menu-1 li a {

font-family: Tahoma, Geneva, sans-serif;

text-decoration: none;

font-weight: 550;

color: #ffffff;

padding: 10px

}

.css-menu-1 li a:hover {

text-decoration: underline

}

.css-menu-1 li a.selected {

color: #000000

background: #adbfd1

text-decoration: none

}

.nav-dop {

background: #cbd7e2 no-repeat center bottom;

height: 28px;

display: block;

}

.warring {

background: #ffffae no-repeat center bottom;

height: 30px;

display: block;

}

</style>

</head>

<body>

<h1>Шапка сайта</h1>

</header>

<nav>

<li><a href="#"class="selected">Главная</a></li>

<li><a href="#">HTML уроки</a></li>

<li><a href="#">CSS уроки</a></li>

<li><a href="#">Справочник</a></li>

</div>

</nav>

2ой ряд меню

</div>

Внимание! Сайт находится в стадии разработки.

</div>

<h2>страница</h2>

</article>

Copyright Alex

</footer>

</body>

</html>

mishka · November 7, 2011

css-menu-1 - должен быть списком (ul), а не дивом.

Где точки с запятыми?

.css-menu-1 li a.selected {
color: #000000
background: #adbfd1
text-decoration: none
}

Оберни выложенный код в спец теги для кода.

MaSoGg · November 7, 2011

спасибо, проблема была в точках с запятыми)

Edited November 7, 2011 by MaSoGg

MaSoGg · November 7, 2011

mishka, не поможете еще?

не получается убрать отступ между шапкой и меню, как можно исправить?

<style>

body { margin: 0px; padding: 0px;

background: #557799;

}

header {

display: block;

height: 75px;

background: #fff repeat-x;

}

header a {

position: relative;

left: 300px;

}

nav {

background: #557799 no-repeat center bottom;

height: 32px;

display: block;

}

ul.css-menu-1 {

position: relative;

left: 300px;

top: 3px;

list-style: none

}

ul.css-menu-1 li {

display: inline

}

ul.css-menu-1 li a {

font-family: Tahoma, Geneva, sans-serif;

text-decoration: none;

font-size:20px;

font-weight: 550;

color: #ffffff;

padding: 10px

}

ul.css-menu-1 li a:hover {

text-decoration: underline

}

ul.css-menu-1 li a.selected {

color: #000000;

background: #adbfd1;

padding: 3px 10px 5px 10px;

text-decoration: none

}

</style>

Edited November 7, 2011 by MaSoGg

heywait · November 7, 2011

Пусть спецы меня поправят, но на мой взгляд там отступ складывается из-за марджина для h1 и высоты твоей шапки 75px.

Нужно в css дописать * { margin:0; padding: 0;} и дальше уже зависит от высоты твоего хэдэра.

MaSoGg · November 7, 2011

решил проблему

дописав margin:0; padding: 0

в ul.css-menu-1

всем спасибо!

Edited November 7, 2011 by MaSoGg

heywait · November 7, 2011

Вот что получилось при полном отсутствии высоты для хэдэра. Этот твой отступ из-за 75px. Я для наглядности в примере удалил эту строку.

upd: припозднился, ок

Edited November 7, 2011 by heywait

Sign In

помогите с selected

Question

MaSoGg

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

mishka

Link to comment

Share on other sites

MaSoGg

Link to comment

Share on other sites

MaSoGg

Link to comment

Share on other sites

heywait

Link to comment

Share on other sites

MaSoGg

Link to comment

Share on other sites

heywait

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information