Странное поведение CSS (sprite nav без опрокидывания)
-
12-09-2019 - |
Вопрос
Вот изображение навигации, о котором идет речь:
http://img.skitch.com/20090807-t8e6d9ymrtpdifqy88xpu6x36.png
То, что я хочу сделать, довольно просто, и я делал это много раз в прошлом, я просто не могу понять, почему это не работает прямо сейчас.В основном используйте приведенное выше изображение в качестве фона навигации и соответствующим образом отрегулируйте ширину и положение фона.Вот мой CSS:
#navigation { width: 960px; height: 28px; clear: both; background: url('../images/nav-bg.png') repeat-x; }
#navigation ul { margin: 0 0 0 20px; padding: 0; }
#navigation ul li { float: left; list-style: none; }
#navigation ul li a { display: block; height: 28px; background: url('../images/nav-tabs.png') no-repeat; text-indent: -9999px;}
#nav-home { width: 62px; }
#nav-home.active, #nav-home:hover { background-position: 0 -28px; }
#nav-cp { width: 130px; background-position: -62px 0; }
#nav-cp.active, #nav-cp:hover { background-position: -62px -28px; }
#nav-web { width: 106px; background-position: -192px 0; }
#nav-web.active, #nav-web:hover { background-position: -192px -28px; }
#nav-clix { width: 106px; background-position: -298px 0; }
#nav-clix.active, #nav-clix:hover { background-position: -298px -28px; }
#nav-dna { width: 90px; background-position: -405px 0; }
#nav-dna.active, #nav-dna:hover { background-position: -405px -28px; }
И вот код на странице с общим типом документа HTML5, <!DOCTYPE html>, указанным для будущей проверки:
<div id="navigation">
<ul id="nav-tabs">
<li><a href="#" id="nav-home">Home</a></li>
<li><a href="#" id="nav-cp">Client Portal</a></li>
<li><a href="#" id="nav-web">Weboptima</a></li>
<li><a href="#" id="nav-clix">Clixfactor</a></li>
<li><a href="#" id="nav-dna">Lead DNA</a></li>
</ul>
</div>
Странные вещи, с которыми я столкнулся, это:Первая вкладка, Главная, работает отлично.Остальные четыре вкладки не подчиняются начальному свойству background-position, если я не укажу !важно, но откаты работают просто отлично.Вот изображения этих двух ситуаций, соответственно:
http://img.skitch.com/20090807-fybag852bbbi6ut751w167y1hp.png
http://img.skitch.com/20090807-rmn9b2tu54q4agyta2idfra5x5.png
Просто хочу немного разобраться в этой (надеюсь) простой проблеме.Заранее спасибо!
Решение
Стиль, в котором вы указываете фоновое изображение, более специфичен, чем стили для вкладок, поэтому он требует присутствия.
Вместо использования составного стиля background
, что также устанавливает background-position
по умолчанию используется 0% 0%
, укажите отдельные компоненты:
background-image: url('../images/nav-tabs.png'); background-repeat: no-repeat;
Вы можете прочитать о специфике здесь.
Другие советы
Я не знаю точно, в чем проблема, но это звучит как проблема с относительным приоритетом ваших правил CSS.
Для такого рода проблем, Поджигатель отлично - он сообщит вам для любого данного элемента, какие именно правила CSS для него применяются.Это должно помочь вам увидеть, в чем заключается проблема.
(Простите меня, если вы уже знаете о Firebug, но удивительное количество веб-разработчиков этого не знают.)