Пути / URL-адреса механизма выражений, влияющие на навигацию спрайтов CSS в Firefox - PullRequest
Новая
       19

Пути / URL-адреса механизма выражений, влияющие на навигацию спрайтов CSS в Firefox

1 голос
/ 26 июля 2011

В настоящее время я помещаю HTML-сайт в Expression Engine. Сайт использует тег body ID для управления спрайтовой навигацией, а не текущие / активные классы. Когда я создал индекс сайта с пустыми ссылками, навигация отображалась правильно. Однако, когда я связал страницы с соответствующими шаблонами, все позиции спрайта по умолчанию стали последними спрайтами в позиции навигации a :. При наведении ссылка будет отображаться правильно, а при нажатии приведет меня в правильное место и изменится на правильное положение a: focus / hover. Это происходит в Firefox, но не в Safari. В Safari все выглядит так, как я ожидал. Я использую Expression Engine 2.x для локальной установки. Я также пересмотрел URL-адреса каналов и настройки конфигурации сайта, но у меня закончились идеи о том, в чем может быть проблема. Любые мысли будут оценены.

Это визуальный вопрос, который у меня возник. , Первая строка - это то, как выглядит навигация в Firefox. Второй ряд - как выглядит ссылка, когда ссылка наведена. Третий способ - это навигация в Safari.

Это CSS для навигации: 

/* navigation */
#nav    {
background: url("/img/nav-bg.gif") no-repeat top left;
position:absolute;
top:176px;
width:960px;
height:44px;
z-index:20;
}

ul#navlist {
position:relative;
height:35px;
width:512px;
padding-left:192px;
margin-top:4px;
overflow:hidden;
}


ul#navlist li   {
padding:0;
margin:0;
float:left;
margin:0px;
text-indent:-9999px;
list-style:none;
}

ul#navlist li a {
display:block;
background-image:url("/img/main-nav-sprite.jpg");
background-repeat:no-repeat;
overflow:hidden;
}

ul#navlist li a:link, #navlist a:visted {
display:block;
}

li#home a {
width:82px;
height:35px;
}

li#services a {
width:101px;
height:35px;
}

li#portfolio a {
width:105px;
height:35px;
}

li#blog a {
width:76px;
height:35px;
}

li#about a {
width:82px;
height:35px;
}

li#contact a {
width:65px;
height:35px;
}

li#home a:link, a:visited   {
background-position:0px 0px;
}

li#home a:hover, a:focus    {
background-position: 0px -35px;
}

li#services a:link, a:visited   {
background-position:-82px 0px;
}

li#services a:hover, a:focus    {
background-position: -82px -35px;
}

li#portfolio a:link, a:visited  {
background-position:-183px 0px;
}

li#portfolio a:hover, a:focus   {
background-position: -183px -35px;
}

li#blog a:link, a:visited   {
background-position:-288px 0px;
}

li#blog a:hover, a:focus    {
background-position: -288px -35px;
}

li#about a:link, a:visited  {
background-position:-364px 0px;
}

li#about a:hover, a:focus   {
background-position: -364px -35px;
}

li#contact a:link, a:visited    {
background-position:-447px 0px;
}

li#contact a:hover, a:focus {
background-position: -447px -35px;
}

/* Main Navigation Active States */
body#home-page ul#navlist li#home a {
background-position:0 -35px;
}

body#services-page ul#navlist li#services a {
background-position:-82px -35px;
}

body#folio-page ul#navlist li#portfolio a   {
background-position:-183px -35px;
}

body#blog-page ul#navlist li#blog a {
background-position:-288px -35px;
}

body#about-page ul#navlist li#about a   {
background-position:-364px -35px;
}

body#contact-page ul#navlist li#contact a   {
background-position:-447px -35px;
}
/* end */

Это мой html навигационный код: 

    <div id="nav">
    <ul id="navlist">
    <li id="portfolio"><a href="http://localhost:8888/portfolio" title="hue samples">portfolio</a></li>
    <li id="blog"><a href="http://localhost:8888/news" title="learn with us">blog</a></li>
    </ul>
    </div>
    <!-- ***nav -->

Я также пытался использовать {path = "template group / template"}, но результат был похожим.

Ответы [ 2 ]

2 голосов
/ 26 июля 2011

Убедитесь, что вы правильно ссылаетесь на таблицы стилей в своих шаблонах.

Если ваш CSS является шаблоном ExpressionEngine: 

<link href="{stylesheet=template_group/template_name}" media="all" />

Если вашCSS - это файл на вашем сервере: 

<link href="{path=/css/screen.css}" media="all" />

При правильной привязке ваших таблиц стилей единственной возможностью для вашей проблемы будет путь к вашему спрайту из таблицы стилей.

Я предпочитаю использовать абсолютные пути к изображениям, так что это упрощает обслуживание: 

#foo {
    background: url(/images/sprite.png) no-repeat left top;
}

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

  • Firefox Firebug
  • Монитор активности Safari или инспектор WebKit
  • Инструменты разработчика Chrome
  • Apache * error_log.

Если вы можете опубликовать некоторые примеры кода, это облегчит дальнейшее устранение неполадок.

1 голос
/ 26 июля 2011

Глядя на свой CSS, вы несколько раз объявляете одни и те же правила в своей таблице стилей. В результате любые правила, которые появятся позже в таблице стилей, будут переопределять все предыдущие правила, соответствующие тому же селектору.

Таким образом, вы можете значительно упростить свой CSS, удалив ненужные :link, :visited и др. селекторы псевдоклассов , которые значительно упростят отладку спрайта вашего изображения.

Например, рассмотрим следующий HTML-код: 

<div id="nav">
    <ul id="navlist">
        <li id="portfolio"><a href="#">portfolio</a></li>
    </ul>
</div>

Соответствующий CSS может быть упрощен и объединен в: 

li#portfolio a {
    background-position: -183px 0;
    height: 35px;
    width: 105px;
}

li#portfolio a:hover {
    background-position: -183px -35px;
}

Удаление и удаление псевдоклассов LVHA ( L O V E HA TE) из вашего CSS , где они значительно уменьшит сложность отладки вашей проблемы.

...