Заменяем элементы списка картинками

[Грин]

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

Задача в коде представить их как список[*]Новости[*]Контакты

А с помощью CSS представить их картинками.

Подскажите, на сколько это реально?

Подвальчик "неправильно" сейчас есть тут [Только зарегистрированные пользователи могут видеть ссылки. ]

[never_again]

вот у меня есть [Только зарегистрированные пользователи могут видеть ссылки. ] на эту тему)

[garA]

Подскажите, на сколько это реально?

абсолютно реально.. для этого существует [Только зарегистрированные пользователи могут видеть ссылки. ]
я довольно часто использую Метод Pixy

HTML:
<h1>Заголовок - картинка</h1>

CSS:
h1{
 * * margin:0; padding:0;
 * * position:relative;
 * * width:200px; height:80px;
 * * overflow:hidden;
}
h1 span {
 * * display:block;
 * * position:absolute; left:0; top:0; z-index:1;
 * * width:200px; height:80px;
 * * background:url(”img.gif”) top left no-repeat;
}

[Грин]

Супер!
Спасибо.

Вот так, 6 лет верстал таблицами, теперь переучиваемся))

[Грин]

А как же убрать маркеры в мозиле?

[Aykroyd]

А как же убрать маркеры в мозиле?

ul {list-style: none;}


garA
Просто хочу мнением поделиться... )

Имхо, метод pixy лучше использовать только если задаваться вопросами доступности... т.е. если уж прям так надо, что аж свербит... Лично я использую его только если заголовки и подзаголовки на веб-сайте все выполнены картинками... Больно уж спаны эти не нравяццо... Во всех остальных случаях (в хидере, в футере и т.п.) text-indent: -9000px рулит...

[never_again]

Originally posted by Aykroyd@Sep 20 2007, 22:46
[b]Во всех остальных случаях (в хидере, в футере и т.п.) text-indent: -9000px рулит...

ага,и если у пользователя отключена графика,по каким либо причинам, то информации он так и не узнает...

если дизигнер сделал макет, в котором важная информация представлена графикой, то либо обсудить это с дизайнером либо использовать дополнительную разметку

[garA]

Originally posted by Aykroyd@Sep 20 2007, 23:46
ul {list-style: none;}
garA
Просто хочу мнением поделиться... )

Имхо, метод pixy лучше использовать только если задаваться вопросами доступности... т.е. если уж прям так надо, что аж свербит... Лично я использую его только если заголовки и подзаголовки на веб-сайте все выполнены картинками... Больно уж спаны эти не нравяццо... Во всех остальных случаях (в хидере, в футере и т.п.) text-indent: -9000px рулит...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Согласен, что доп. спаны лучше не использовать, но при этом, как ты сам отметил, страдает доступность.. Я стараюсь не пренебрегать этим, поскольку сам довольно часто отключаю графику. Это первое. Второе: для "не простых" заголовков и подзаголовков я использую sIFR, хотя он тоже не идеален. В общем, все зависит от конкретной ситуации.

UPD
А к text-indent: -9000px у меня негативное отношение, поскольку примерно год назад яшей был забанен сайт студии, в которой я работаю.. Начали разбираться. Оказалось, что мы якобы вводим в заблуждение поисковика, потому что в коде текст есть, а юзер его не видит. Так что с этим надо быть поосторожней, могут и настучать.. был бы повод.. ИМХО

[Aykroyd]

Originally posted by never_again@Sep 21 2007, 11:40
ага,и если у пользователя отключена графика,по каким либо причинам, то информации он так и не узнает...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
А если у пользователя Интернет отключен?

Originally posted by garA@Sep 21 2007, 12:24
поскольку примерно год назад яшей был забанен сайт студии, в которой я работаю.. Начали разбираться. Оказалось, что мы якобы вводим в заблуждение поисковика, потому что в коде текст есть, а юзер его не видит.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Крайности... )

[Грин]

#menu {
z-index:3;
top:180px;
left:360px;
position:absolute;
background-image: url(../images/menu_bg.gif);
background-repeat:no-repeat;
width:390px;
height:80px;
padding-top: 12px;
padding-left: 30px;
}

#menu ul,#menu li, #menu a {
****display: inline;
****margin: 0 auto;
****padding: 0 auto;
****list-style:none;
}

#menu ul a span {display:none;}
#menu_item1 a {float:left;display:block;width:94px;height:27px;background:url(../images/menu_g_01.gif);}
#menu_item2 a {float:left;display:block;width:64px;height:27px;background:url(../images/menu_g_02.gif);}
#menu_item3 a {float:left;display:block;width:200px;height:27px;background:url(../images/menu_g_03.gif);background-repeat:no-repeat;}
#menu_item4 a {float:left;display:block;width:124px;height:27px;background:url(../images/menu_g_04.gif);}
#menu_item5 a {float:left;display:block;width:70px;height:27px;background:url(../images/menu_g_05.gif);}
#menu_item6 a {float:left;display:block;width:64px;height:27px;background:url(../images/menu_g_06.gif);}

<div id="menu">
<li id="menu_item1">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li id="menu_item2">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li id="menu_item3">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li id="menu_item4">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li id="menu_item5">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li id="menu_item6">[Только зарегистрированные пользователи могут видеть ссылки. ]
</div>

Вот смастерил такое меню.
У меня стоит задача переносить его после третьего элемента. Т.е. получается в два ряда. Я сделал float:left ко всем элементам и у третьего сделал больший width чем размер главого дива, чтобы переносилось как при наполнении.
Сильно намудрил?

[Aykroyd]

ul#menu {list-style: none;}
ul#menu li {float: left;}
ul#menu li a {text-indent: -9000px; height: 27px; float: left; overflow: hidden;}

#menu_item1 {background: url(../images/menu_g_01.gif) no-repeat;}
#menu_item1 a {width: 94px;}
#menu_item2 {background: url(../images/menu_g_02.gif) no-repeat;}
#menu_item2 a {width: 64px;}
#menu_item3 {background: url(../images/menu_g_03.gif) no-repeat;}
#menu_item3 a {width: 200px;}
#menu_item4 {background: url(../images/menu_g_04.gif) no-repeat;}
#menu_item4 a {width: 124px;}
#menu_item5 {background: url(../images/menu_g_05.gif) no-repeat;}
#menu_item5 a {width: 70px;}
#menu_item6 {background: url(../images/menu_g_06.gif) no-repeat;}
#menu_item6 a {width: 64px;}

<ul id="menu">
<li id="menu_item1">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li id="menu_item2">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li id="menu_item3">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li id="menu_item4">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li id="menu_item5">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li id="menu_item6">[Только зарегистрированные пользователи могут видеть ссылки. ][/list]

1. Все можно намного сократить.
2. Не надо заглавными буквами ссылки писать.
3. float: left; уже само по себе подразумевает display: block;
4. Чтобы подстраховаться от эффекта Image Flickering в IE6, фон лучше задавать не ссылкам, а элементам li.

[Грин]

Все, нормально, избавился от div, сделал <ul id="menu">

А если такой вариант

h3#logo {width:252px;height:115px;background:url(/images.tpl/main_logo.jpg);}
#logo a {text-indent: -9000px;}

<h3 id="logo">[Только зарегистрированные пользователи могут видеть ссылки. ]</h3>

Вместе с текстом уезжает и ссылка.

[Aykroyd]

Размеры не заголовку, а ссылке задавайте... + display: block; для ссылки...

#header {position: relative;}
#header h1 {background: url(../img/logo.gif) no-repeat; position: absolute; left: X px; top: Y px;}
#header h1 a {text-indent: -9000px; display: block; width: N px; height: M px; overflow: hidden;}

Например...