HTML и CSS разметка для изображений спрайтов

Question

HTML и CSS разметка для изображений спрайтов

0

проблема

Я пытаюсь получить эффект, когда у меня могут быть изображения рядом с моими ссылками навигации в левом меню, все из одного спрайт-изображения. Я не уверен, как я должен создавать свою разметку, чтобы сделать это правильно. Я хочу, чтобы весь образ и текст можно было щелкнуть, чтобы перейти к URL-адресу.

Возможные решения

Поместите тег изображения слева от ссылки ahref и привяжите его к тому же месту.
Используйте фоновое изображение на ссылке ahref с полем, чтобы освободить место для него
Использовать теги span

Код

http://jsfiddle.net/spadez/Z2qE5/

<ul id="sidenav">
    <li><a href="#" title="Home" class="active">Dashboard</a></li>
    <li><a href="#" title="Home">Dashboard</a></li>
    <li><a href="#" title="Home">Dashboard</a></li>
    <li><a href="#" title="Home">Dashboard</a></li>
    <li><a href="#" title="Home">Account</a></li>
</ul>

Jimmy 16 апр. 2014, в 10:54

Источник

Теги:

html

css

2 ответа

0

Вы можете проверить способ загрузки. Вот ссылка http://getbootstrap.com/components/

Там вы можете проверить их подход к выполнению этой задачи. Вкратце вы можете сделать следующее

    <ul id="sidenav">
    <li><a href="yourlink">Link text <span class="icon-class"></span></a></li>
    </ul>

В значке-классе определите положение вашего изображения из спрайта.

Zeeshan 16 апр. 2014, в 06:57

Ещё вопросы

frountch · Accepted Answer · 2014-04-16T06-56-00.000Z

Я думаю, http://www.w3.org/wiki/CSS_background_images#Sprites ответит на ваш вопрос.

Они используют id в <li> tag а затем

#rss span{ background-position: -15px 0;}

#photos span{background-position: -30px 0;}

#links span{background-position: -45px 0;}

Они используют пустые теги span, это действительно лучший подход?
Не уверен, что есть правильный подход, но я не понимаю, почему этот может быть плохим.