Вид для печати
Собственно есть подвальчик, в котором у нас есть несколько ссылок в виде картинок.
Задача в коде представить их как список[*]Новости[*]Контакты
А с помощью CSS представить их картинками.
Подскажите, на сколько это реально?
Подвальчик "неправильно" сейчас есть тут [Only registered and activated users can see links. Click Here To Register...]
вот у меня есть [Only registered and activated users can see links. Click Here To Register...] на эту тему)
абсолютно реально.. для этого существует [Only registered and activated users can see links. Click Here To Register...]Цитата:
Подскажите, на сколько это реально?
я довольно часто использую Метод 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 лет верстал таблицами, теперь переучиваемся))
А как же убрать маркеры в мозиле?
ul {list-style: none;}Цитата:
А как же убрать маркеры в мозиле?
garA
Просто хочу мнением поделиться... )
Имхо, метод pixy лучше использовать только если задаваться вопросами доступности... т.е. если уж прям так надо, что аж свербит... Лично я использую его только если заголовки и подзаголовки на веб-сайте все выполнены картинками... Больно уж спаны эти не нравяццо... Во всех остальных случаях (в хидере, в футере и т.п.) text-indent: -9000px рулит...
ага,и если у пользователя отключена графика,по каким либо причинам, то информации он так и не узнает...Цитата:
Originally posted by Aykroyd@Sep 20 2007, 22:46
[b]Во всех остальных случаях (в хидере, в футере и т.п.) text-indent: -9000px рулит...
если дизигнер сделал макет, в котором важная информация представлена графикой, то либо обсудить это с дизайнером либо использовать дополнительную разметку
[/quote]Цитата:
Originally posted by Aykroyd@Sep 20 2007, 23:46
ul {list-style: none;}
garA
Просто хочу мнением поделиться... )
Имхо, метод pixy лучше использовать только если задаваться вопросами доступности... т.е. если уж прям так надо, что аж свербит... Лично я использую его только если заголовки и подзаголовки на веб-сайте все выполнены картинками... Больно уж спаны эти не нравяццо... Во всех остальных случаях (в хидере, в футере и т.п.) text-indent: -9000px рулит...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Согласен, что доп. спаны лучше не использовать, но при этом, как ты сам отметил, страдает доступность.. Я стараюсь не пренебрегать этим, поскольку сам довольно часто отключаю графику. Это первое. Второе: для "не простых" заголовков и подзаголовков я использую sIFR, хотя он тоже не идеален. В общем, все зависит от конкретной ситуации.
UPD
А к text-indent: -9000px у меня негативное отношение, поскольку примерно год назад яшей был забанен сайт студии, в которой я работаю.. Начали разбираться. Оказалось, что мы якобы вводим в заблуждение поисковика, потому что в коде текст есть, а юзер его не видит. Так что с этим надо быть поосторожней, могут и настучать.. был бы повод.. ИМХО
[/quote]Цитата:
Originally posted by never_again@Sep 21 2007, 11:40
ага,и если у пользователя отключена графика,по каким либо причинам, то информации он так и не узнает...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
А если у пользователя Интернет отключен?
[/quote]Цитата:
Originally posted by garA@Sep 21 2007, 12:24
поскольку примерно год назад яшей был забанен сайт студии, в которой я работаю.. Начали разбираться. Оказалось, что мы якобы вводим в заблуждение поисковика, потому что в коде текст есть, а юзер его не видит.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Крайности... )
Вот смастерил такое меню.Код:#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">[Only registered and activated users can see links. Click Here To Register...]
<li id="menu_item2">[Only registered and activated users can see links. Click Here To Register...]
<li id="menu_item3">[Only registered and activated users can see links. Click Here To Register...]
<li id="menu_item4">[Only registered and activated users can see links. Click Here To Register...]
<li id="menu_item5">[Only registered and activated users can see links. Click Here To Register...]
<li id="menu_item6">[Only registered and activated users can see links. Click Here To Register...]
</div>
У меня стоит задача переносить его после третьего элемента. Т.е. получается в два ряда. Я сделал float:left ко всем элементам и у третьего сделал больший width чем размер главого дива, чтобы переносилось как при наполнении.
Сильно намудрил?
1. Все можно намного сократить.Код: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">[Only registered and activated users can see links. Click Here To Register...]
<li id="menu_item2">[Only registered and activated users can see links. Click Here To Register...]
<li id="menu_item3">[Only registered and activated users can see links. Click Here To Register...]
<li id="menu_item4">[Only registered and activated users can see links. Click Here To Register...]
<li id="menu_item5">[Only registered and activated users can see links. Click Here To Register...]
<li id="menu_item6">[Only registered and activated users can see links. Click Here To Register...][/list]
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">[Only registered and activated users can see links. Click Here To Register...]</h3>
Размеры не заголовку, а ссылке задавайте... + 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;}