Моя ссылка в нижнем колонтитуле CSS стили не работают - PullRequest
Новая
       2

Моя ссылка в нижнем колонтитуле CSS стили не работают

0 голосов
/ 31 марта 2012

Ссылки на моем нижнем колонтитуле не работают.Ссылки не могут быть перемещены или кликабельны.

Извините, мне следовало добавить, что z-index в нижнем колонтитуле установлен на -999, так что он остается позади основного контента.Есть ли обходной путь, если в этом проблема? 

<footer>
    <ul>
        <li><a href="contact.html">Contact Us</a></li>
        <li><a href="about.html">About EIC</a></li>            
    </ul>
</footer>

footer {
    position: fixed;
    width: 100%;
    height: 8em;
    background-color: e0e0e0;
    z-index: -999;
    overflow: hidden;
    bottom: 0px;
    padding-top: 2%;
}
footer li {
    display: inline;
    padding: 2em;
}
footer a:link {
    color: #000;
    text-decoration: none;
}
footer a:hover {
    color: #999;
}

Просмотр на jsFiddle.

Ответы [ 4 ]

3 голосов
/ 31 марта 2012

Ваш z-index: -999 в нижнем колонтитуле перемещает его позади фактического документа. Так что ссылки не кликабельны и не доступны.

На самом деле, такого рода проблемы легко заметить при использовании функции «Проверка элемента» в Firebug или инструментах разработчика Firefox. При проверке ссылки будет выбрана не ссылка, а документ, который скажет вам, что ссылка находится за чем-то (проверенный элемент вместо ссылки).

2 голосов
/ 31 марта 2012

Удалить объявление z-index: -999. Ваш нижний колонтитул находится за интерактивной областью страницы.

0 голосов
/ 31 марта 2012

Вы должны удалить: 

html{
    height: 100%;
}

от вашего css.

Edit:

вам все равно придется удалить z-index: -999; Спасибо, анимусон, за то, что поправили меня.

0 голосов
/ 31 марта 2012

То, что сказали вышеупомянутые люди, плюс ваш пропущенный # для вас цвет фона.

http://jsfiddle.net/Vsvg2/8/

...