Картинки вместо текста в навигации

[1284metra]

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

<li><a class="home" href="#"></a></li>
<li><a class="portfolio" href="#"></a></li>
<li><a class="about" href="#"></a></li>

[Serlutin]

Почему бы не оставить текст в коде, но спрятать его с помощью text-indent: -9999px

[psywalker]

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

<li><a class="home" href="#"></a></li>
<li><a class="portfolio" href="#"></a></li>
<li><a class="about" href="#"></a></li>

Можно с текстом, просто уберёшь ему display: block; text-indent: -99999px; у ссылки

[1284metra]

точно, спасибо!

[mishka]

А также можно в линку всунуть спан, который будет висеть на абсолюте, и на нем будет бг. В случае если юзер отключит картинки то он увидет текст под тем спаном.

[psywalker]

А также можно в линку всунуть спан, который будет висеть на абсолюте, и на нем будет бг. В случае если юзер отключит картинки то он увидет текст под тем спаном.

Да, тоже кстати старый проверенный способ.

[1284metra]

Насчёт спана не понял. Сначала думал, что нужно z-index задать, да ничего хорошего из этого не получилось. А по-другому, бэкраунд в спане ведь не перекрывает текст. В общем ничего не понял, объясните, пожалуйста, поподробнее

[swetlana]

тут даже не обязательно спан.

Суть вот в чём:

делается обычное меню с самым обычным текстом в ссылках.

Далее:

средствами css ссылкам задаются размеры по размеру картинок, которыми эти ссылки будут сделаны.

Затем:

текст в этих ссылках надо прикрыть картинками.

Сделать это можно разными способами, но главное, чтобы картинки по DOM были внутри ссылок (чтобы оставались кликабельны).

Например, можно перед текстом поместить картинку:

<li><a href="/section/"><img src="section.png" />Раздел</a></li>

Тогда оформляется так:

a {
display: block;
width: 100px;
height: 40px; /* допустим, именно такие размеры у картинки, которой в результатае должен быть пункт меню */
position: relative;
}
a img {
position: absolute;
top: 0;
left: 0;
}

Тогда картинка расположится поверх текста пункта меню, а если у юзера в браузере отключены картинки, то он просто эту картинку не увидит, зато увидит расположенный под ней текст.

Способ, кстати, весьма неплохой. Здоровый баланс между красотой кода и практичностью.

[1284metra]

Очень оказывается просто, спасибо!