Предыдущие и следующие ссылки

Question

Я пытаюсь отобразить предыдущую и следующую кнопки, но когда я скомпилирую их, я просто получаю ссылку «предыдущий» и «следующий» вместо нужного мне изображения. Ниже я показываю сначала код в CSS;

div#slideshow ul#nav li#prev a
{
    background: url(Resources/Icons/previous.png);
}

div#slideshow ul#nav li#next a
{
    background: url(Resources/Icons/next.png);
}

Тогда я показываю, как я это называю из аспи;

<div id="slideshow">
    <ul id="nav">
        <li id="prev"><a href="#">Previous</a></li>
        <li id="next"><a href="#">Next</a></li>
    </ul>
</div>

Любые предложения о том, в чем может быть проблема?

Answer 1

Использование:

<a href="#">Previous</a>

... даст вам гиперссылку с текстом «Назад».Ваш CSS может добавить фон к элементу списка, но вы все равно получите только гиперссылку.

Примеры альтернатив:

<input type="image" src="/path/to/image.gif" />

<a href="GoHere.html"><img src="/path/to/image.gif" alt="My Image" /></a>

<img src="/path/to/image.gif" alt="My Image" onclick="SomeJavaScript();" />

Answer 2

Не следует устанавливать фон тега, поскольку он является встроенным элементом.

Вместо этого вы должны вставить внутренний элемент и установить его стиль для отображения вашего изображения.

<div id="slideshow">         
<ul id="nav">             
    <li id="prev"><a href="#" title="prev"><div></div></a></li>             
    <li id="next"><a href="#" title="next"><div></div></a></li>         
</ul> 

Кроме того, поскольку вы указали свои идентификаторы тегов, вы можете значительно сократить определение CSS, указав их напрямую.

#prev a div
{             
background: url(http://images.all-free-  download.com/images/graphicmedium/button_previous_89678.jpg);
height : 200px;
width : 200px;       
} 


#next a div
{             
background: url(http://images.all-free-download.com/images/graphicmedium/button_next_89675.jpg);
height : 200px;
width : 200px;            
} ​

См. скрипку для рабочего примера

Answer 3

вы используете анти-шаблон Будьте конкретны при необходимости

используйте вместо этого следующее.#prev a {...}

#next a {
           ...
        }​

Answer 4

URL-путь, по которому вы переходите, зависит от расположения таблицы стилей.Поэтому, если ваша таблица стилей находится в /styles/css/themes.css, тогда фоновое изображение здесь будет искать в /styles/css/Resources/Icons/XXX.png.Это где они хранятся?

Answer 5

Убедитесь, что пути к файлам CSS относятся к файлу CSS, а не к странице HTML.

Answer 6

Ваша разметка действительна в том смысле, что изображение будет отображаться за внутренним HTML <a></a>.

Проблема, скорее всего, связана с путем к PNG - попробуйте поместить png в ту же папку, что и html-файл, и использовать url(next.png)