CSS классы не работают

0

Наследование не работает. Класс navlink_0 работает, но класс navlink_1 не работает. Он возвращается к объявлению в начале файла css. Что не так?

Мой HTML и CSS файл:

<div id="menu">
<div id="main_nav">
    <ul class="mainnav">
        <li><a href="top-angebote.html" onfocus="blurLink(this);" class="navlink_0">TOP ANGEBOTE</a>
        </li>
    </ul>
    <ul class="mainnav">
        <li><a href="reifen-komplettraeder.html" onfocus="blurLink(this);" class="navlink_1">REIFEN/ KOMPLETTRÄDER</a>
        </li>
    </ul>
</div>
</div>


#menu
{
   position: relative;
   float:left;
   padding:0px;
   margin:0px;
}

#main_nav
{
   color: #FFF;
   font-size: 12px;
   font-style: italic;
   display: inline-block;
   font-weight: bold;
}

#main_nav .mainnav 
{
   color: #FFF;
   padding:0px;
   margin:0px;
   display: inline-block;
   font-weight: bold;
}

#main_nav ul {
   color: #FFF;
   padding:0px;
   margin:0px;
   list-type:none;
}


#main_nav .mainnav li
{
   color: #FFF;
   padding:0px;
   margin:0px;
   display:inline-block;
}

#main_nav .navlink_0
{
   color: #FFF;
   padding: 10px;
   text-decoration: none;
   line-height: 30px;
   display: inline-block;
   font-weight: bold;
}


#main_nav a.navlink_0:link, a.navlink_0:visited
{
   color: #FFF;
   text-decoration: none;
   background-color: #0863AA;
   background-image: linear-gradient(to bottom, #006EB7 0%, #0863AA 100%);
   background-repeat: repeat-x;
}

#main_nav a.navlink_0:hover, a.navlink_0:active, a.navlink_0:focus
{
   color: #FFF; 
   text-decoration: none;
   background-color:#ac0727;
   background-image:-webkit-gradient(linear,left 0%,left 100%,from(#e4041f),to(#ac0727));
   background-image:-webkit-linear-gradient(top,#e4041f,0%,#ac0727,100%);
   background-image:-moz-linear-gradient(top,#e4041f 0%,#ac0727 100%);
   background-image:linear-gradient(to bottom,#e4041f 0%,#ac0727 100
   background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe4041f',endColorstr='#ffac0727',GradientType=0);color:#ffffff;
}

#main_nav .navlink_1
{
 /* same above like navlink_0
 *  Typo3 Renering navlink_1
 */    
}

#main_nav  a.navlink_1:link, a.navlink_1:visited
{
 /* same above like navlink_0
 *  Typo3 Renering navlink_1
 */   
}

#main_nav  a.navlink_1:hover, a.navlink_1:active, a.navlink_1:focus
{
 /* same above like navlink_0
 *  Typo3 Renering navlink_1
 */   
}
  • 0
    в CSS нет наследования.
  • 0
    Извините, неверное слово в английском!
Показать ещё 7 комментариев
Теги:
typo3

3 ответа

3
Лучший ответ

Ваш CSS сломан, посмотрите на эту строку:

background-image:linear-gradient(to bottom,#e4041f 0%,#ac0727 100

Отсутствует %); :

background-image:linear-gradient(to bottom,#e4041f 0%,#ac0727 100%);

Таким образом, CSS сталкивается с ошибкой, она перестает отображать там, поэтому.navlink_1 не отображается должным образом.

Я бы настоятельно рекомендовал очистить свой CSS :)

Поделиться
1

Попробуй это

#main_nav .navlink_0, .navlink_1
{
    color: #FFF;
    padding: 10px;
    text-decoration: none;
    line-height: 30px;
    display: inline-block;
    font-weight: bold;
}

#main_nav a.navlink_0:link, a.navlink_0:visited, a.navlink_1:link, a.navlink_1:visited
{
    color: #FFF;
    text-decoration: none;
    background-color: #0863AA;
    background-image: linear-gradient(to bottom, #006EB7 0%, #0863AA 100%);
    background-repeat: repeat-x;
}
Поделиться
  • 2
    #main_nav .navlink_0, #main_nav .navlink_1 будет более конкретным и, более того, более логичным.
0

Я предлагаю вам очистить html и css. Предполагая, что вы используете HTML5, вы можете использовать элемент nav. Я также прекратил бы использовать так много идентификаторов. Они могут быть хороши для javascript, но по большей части они не нужны.

Большая часть CSS также не нужна. Почему вы объявляете цвет для каждого элемента? Почему вы объявляете display: inline-block на элементах, которые уже отображаются: inline-block для начала? Если возможно, вы должны удалить их.

HTML

<div class="menuContainer">
    <nav>
        <ul>
          <li><a href="top-angebote.html" onfocus="blurLink(this);">TOP ANGEBOTE</a></li>
        </ul>
        <ul>
          <li><a href="reifen-komplettraeder.html" onfocus="blurLink(this);">REIFEN/ KOMPLETTRÄDER</a></li>
        </ul>
    </nav>
</div>

CSS

.menuContainer
{
    position: relative;
    float:left;
    padding:0px;
    margin:0px;
} 

nav
{
   color: #FFF;
   font-size: 12px;
   font-style: italic;
   display: inline-block;
   font-weight: bold;
}

nav ul 
{
   color: #FFF;
   padding:0px;
   margin:0px;
   display: inline-block;
   font-weight: bold;
}

nav li
{
   color: #FFF;
   padding:0px;
   margin:0px;
   display:inline-block;
}

nav a
{
   color: #FFF;
   padding: 10px;
   text-decoration: none;
   line-height: 30px;
   display: inline-block;
   font-weight: bold;
}

nav a:link, nav a:visited
{
   color: #FFF;
   text-decoration: none;
   background-color: #0863AA;
   background-image: linear-gradient(to bottom, #006EB7 0%, #0863AA 100%);
   background-repeat: repeat-x;
}

nav a:hover, nav a:active, nav a:focus
{
   color: #FFF; 
   text-decoration: none;
   background-color:#ac0727;
   background-image:-webkit-gradient(linear,left 0%,left 100%,from(#e4041f),to(#ac0727));
   background-image:-webkit-linear-gradient(top,#e4041f,0%,#ac0727,100%);
   background-image:-moz-linear-gradient(top,#e4041f 0%,#ac0727 100%);
   background-image:linear-gradient(to bottom,#e4041f 0%,#ac0727 100);
   background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe4041f',endColorstr='#ffac0727',GradientType=0);
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню