Не могу понять ошибку во вложенных стилях ссылок

extruder · February 29, 2008

Всех приветствую.

Впервые начал проект на div'ах. До этого верстал только таблично.

Изучаю, натыкаюсь на непонятности.

Есть менюшка, в которой отображаются черные буквы, черная картинка стрелки, и серый фон. При наведении меняется цвет фона на болотный, буквы на белые, и картинка стрелки на белую. Слой div, содержащий в себе все это, называется "rub". Ссылки делают блочными, и включаю их в состав rub при помощи .rub a:link{...} и т. д. Ниже приведен код. Вроде, все нормально.

Но возникла такая проблема. Дело в том, что все ссылки в документе делаются такими же. ВСЕ ССЫЛКИ!

То есть, у меня для слоя "rub" заданы отступы слева padding=30, чтобы менюшка включала в себя картинку стрелочки. И при этом у всех ссылок на документе тоже становится padding=30.

Не пойму причины. Ведь я задаю только для .rub свойства ссылки с отступами. А это тиражируется на все остальные ссылки.

Изучал кучу кода с других сайтов. У них все нормально - есть обычные ссылки, и есть специфические, включенные в div'ы, и имеющие некие особенности. И все нормально - обычные ссылки работают обычно, а специфические - специфически.

У меня все не как у людей.

Я в затруднении

Прошу помочь знающих людей.

Спасибо.

Ниже идет код страницы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
body{
 behavior: url(csshover.htc);
 color: #000;
 font: 13px Tahoma, Arial, Helvetica, sans-serif;
 margin: 0px;
 padding: 0px;
 text-align: center;
 width: 100%;
}

#container{
 text-align: left;
 width: 968px;
}

#logo{
 height: 0px;
 margin: 20 0 10 70;
 width: 0px;
}

#main{
 float: left;
 width: 560px;
 margin-top: 20px;
 margin-left: 20px;
}

.rub{
 float: left;
 margin-top: 20px;
 width: 200px;
 color: #000;
 font: bold 13px;
 text-decoration: none;
 font-family: Tahoma, Arial, sans-serif;
}

.rub div{
 background: #E5E5E5 10 10;
 border-bottom: 1px solid #FFFFFF;
 width: 100%;
 background-image: url(arrow_black.gif);
 background-repeat: no-repeat
}

.rub div:hover{
 background: #A39F40 10 10;
 border-bottom: 1px solid #FFFFFF;
 width: 100%;
 background-image: url(arrow_white.gif);
 background-repeat: no-repeat
}

#rub a:link, a:visited, a:active{
 display: block;
 width: 100%;
 padding: 4 10 4 30;
 color: #000;
 text-decoration: none;
}
#rub a:hover{
 display: block;
 width: 100%;
 padding: 4 10 4 30;
 color: #FFFFFF;
 text-decoration: none;
}

a:link, a:visited, a:active, a:hover{
 display: inline;
 padding: 0;
}
</style>
</head>

<body>
<div id="container">
<div id="logo"><a href="#"><img src="logo.gif" width="160" height="60" border="0"></a></div>
<div class="rub">
<div><a href="#">Авто</a></div>
<div><a href="#">Люди</a></div>
<div><a href="#">Культура</a></div>
<div><a href="#">Природа</a></div>
<div><a href="#">История</a></div>
<div><a href="#">События</a></div>
<div><a href="#">Явления</a></div>
<div><a href="#">Города</a></div>
</div>
<div id="main">
<h1>Забавные термины</h1>
<p><a href="#">Борбаг</a> - термин, используемый в программировании для описания программной ошибки, которая не исчезает и не меняет своих свойств при попытке ее обнаружения. Данный тип ошибки характеризуется как устойчивый и поэтому назван в честь атомной модели, разработанной Нильсом Бором.</p>
<p><a href="#">Шрединбаг</a> - термин, используемый в программировании для описания программной ошибки, которая никак не проявляет себя, однако внезапно возникает, если кто-то наткнется на нее в исходном коде или попытается использовать программу в необычных условиях и осознает, что система вообще не могла работать при наличии такой ошибки. После этого программа перестает работать вообще до тех пор, пока ошибка не будет исправлена. Хотя это звучит невероятно, некоторые программы содержат в себе латентные шрединбаги.</p>
<p><a href="#">Гейзенбаг</a> - термин, используемый в программировании для описания программной ошибки, которая исчезает или меняет свои свойства при попытке ее обнаружения. Примером могут являться ошибки, которые проявляются в окончательном варианте программы (релизе), однако не видны в режиме отладки или ошибки синхронизации в многопоточном приложении.</p>
<p><a href="#">Мандельбаг</a> - термин, используемый в программировании для описания программной ошибки, чье поведение столь сложно, что выглядит хаотичным. Это также подразумевает, что говорящий полагает, что это скорее борбаг, чем гейзенбаг. Некоторые используют термин мандельбаг для описания ошибки, чье поведение не кажется действительно хаотичным, но столь сложно, что для ее исправления требуется переписать программу с нуля. Примером такой ошибки может служить фундаментальная ошибка, допущенная при проектировании системы.</p>
</div>
</div>
</body>
</html>

homm · March 1, 2008

У меня все нормально с паадингами в твоем примере.

Зачем там кстати 2 объявления для #rub, если у тебя нет объектов с id=rub, только с class?

extruder · March 1, 2008

Сорри, это видимо в результате экспериментов затесалось.

Я выложил примеры на свой хост, чтобы вам удобнее было смотреть.

И попробую более узко сформулировать вопрос.

У меня в документе есть менюшка, в которой пункты-ссылки выводятся внутри контейнера "rub", для него заданы стили ссылок при помощи .rub a{...}. Ссылки заданы блочными, чтобы заполняли все пространство вложенных контейнеров.

То есть, получается примерно следующее:

<div class="rub">
<div><a href="#">Авто</a></div>
<div><a href="#">Люди</a></div>
</div>

Для этих ссылкок задан padding=30, чтобы имелся отступ для отображения буллета в виде стрелочки. А для всех остальных ссылок не должно быть никакого отступа - padding=0, и они к тому же не должны быть блочными.

Пример 1

http://www.untex.com/1/

Пример 2

http://www.untex.com/2/

Пример 3

http://www.untex.com/3/

В Примере 1 задан стиль для ссылок в контейнере rub, но не заданы стили для простых ссылок. В результате вы видите, что получается - менюшка работает нормально, но логотип и ссылки в тексте (сразу под заголовком "Забавные термины") отображаются с теми же отступами, что и меню. Контейнер логотипа я для удобства просмотра сделал с красной рамкой и серым фоном.

Здесь все логично, так как не задан стиль для обычных ссылок.

В Примере 2 в самом конце таблицы стилей задан стиль для обычных ссылок

a:link, a:visited, a:active, a:hover{
 display: inline;
 padding: 0;
}

При этом логотип и обычные ссылки выглядят нормально, но менюшка стала без паддингов. В чем тут проблема - не понимаю. А при наведении на менюшку hover отрабатывается нормально, с паддингами.

В Примере 3 я переместил описание стиля обычных ссылок из конца таблицы стилей в ее середину - перед описанием стиля контейнера "rub". И сразу все вернулось к виду, как в Примере 1. То есть, мы имеем заданный стиль для обычных ссылок, заданный стиль для ссылок в контейнере "rub". Но отображение ВСЕХ ссылок идет как в "rub".

Вот этого я и не могу понять.

Все это я просматриваю пока только в IE6. До остальных броузеров дело дойдет потом.

Прошу помочь.

Mordraug · March 1, 2008

у вас ошибка в определении ссылок для .rub.

Вы воспользовались группировкой, но не полностью указываете селектор в группе.

Ваш код:

.rub a:link, a:visited, a:active{
 display: block;
 width: 100%;
 padding: 4 10 4 30;
 color: #000;
 text-decoration: none;
}

...а следовало бы написать(обратите внимание на имена селекторов в группе):

.rub a:link, .rub a:visited, .rub a:active {
 display: block;
 width: 100%;
 padding: 4 10 4 30;
 color: #000;
 text-decoration: none;
}

Это все от невнимательности

По стилям для ссылок: первее в таблице стилей должно быть объявление по селектору тега (в случае с ссылками ? это тег A), а уже после объявления по классам. Если вы сделаете наоборот ? то ваши специфические стили будут перебиты стилями для тега, поскольку такое объявление главнее.

То есть ? правильно:

a:link, a:visited {....}
a:hover {....}
.
.
.
.
.
a.megaclass:link, a.megaclass:visited {.....}
a.megaclass:hover {....}

А вот так не правильно:

a.megaclass:link, a.megaclass:visited {.....}
a.megaclass:hover {....}
.
.
.
.
.
a:link, a:visited {....}
a:hover {....}

И в заключении ? я бы посоветовал вам верстать меню с помощью списка, это логичнее и правильнее

extruder · March 1, 2008

Mordraug,

Благодарю вас! Все отлично заработало. Вы мне очень помогли.

Заодно сверстал с помощью списка

[*]..., спасибо за совет!

Sign In

Не могу понять ошибку во вложенных стилях ссылок

Question

extruder

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

homm

Link to comment

Share on other sites

extruder

Link to comment

Share on other sites

Mordraug

Link to comment

Share on other sites

extruder

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information