Скажи “НЕТ” <img> в вёрстке
Тэг IMG не очень удобен в качестве “кубика” нашего “сайтоконструктора” поскольку содержит некоторые ньюансы расположения и взаимодействия c другими “кубиками”. Конечно-же мы можем представить <img> как блочный элемент, для этого всего лишь нужно в css описании элемента указать свойство display: block, в этом случае тэг унаследует свойства блочного тэга (div). Но тогда какая уж тут логика? Блочный элемент подразумевает под собой какой-то прямоугольный блок содержимого. Куда же вписать это содержимое если сам тэг одинарный? То-то и оно, что никуда.
Поэтому, для вёрстки web-страницы я не рекоммендую использовать статичные img тэги. Вместо этого используйте специально предназначеные блочные тэги <div>. А файл картинки следует прописывать в css-файле, в качестве фона элемента.
Примерно так:
div.image1 {
width: 100px;
height: 150px;
background: url(images/pic1.png) no-repeat;
}
И редактировать удобнее и верстать.
И не бойтесь что ваши картинки не проиндексируют, элементы используемые в вёрстке не так важны как содержимое вашего сайта. А вот в контенте уже нужно добавлять картинки стандартным способом, т.е. тэгами <img>. SEO-специалисты меня поправят если я не прав.
Меню картинками
Вы хотите спросить, что делать, если вы хотите создать графическое меню? В книжке вы прочитали, что оно создаётся размещением тэга <img> внутрь тэга <a>? Забудьте про это, а “книгу в печку” как говорил профессор Преображенский.
В современных сайтах мы можем использовать только тэг <a> для отображения меню (но не нужно забывать размещать пункты меню в списки):
<ul id="mainmenu">
<li><a href="menu_item1"></a></li>
<li><a href="menu_item2"></a></li>
<li><a href="menu_item3"></a></li>
</ul>
Теперь описываем стили. Сначала общий вид:
ul#mainmenu{
display: block;
}
ul#mainmenu li{
display: block;
float: left;
width: 84px;
}
ul#mainmenu li a{
display: block;
height: 32px;
}
Если вам нужно будет размещать меню слева или справа относительно каких-то других объектов, то стоит добавить точную ширину элемента ul#mainmenu.
Описываем каждый пункт меню:
ul#mainmenu li#mm_home a{
background: url(images/home.png) no-repeat;
}
ul#mainmenu li#mm_home a:hover{
background: url(images/home_over.png) no-repeat;
}
ul#mainmenu li#mm_blog a{
background: url(images/blog.png) no-repeat;
}
ul#mainmenu li#mm_blog a:hover{
background: url(images/blog_over.png) no-repeat;
}
ul#mainmenu li#mm_author a{
background: url(images/author.png) no-repeat;
}
ul#mainmenu li#mm_author a:hover{
background: url(images/author_over.png) no-repeat;
}
Итог:
Даже работает! ))
А если отключить стили?
Например, если просматривать сайт на мобильном телефоне, у которого браузер не поддерживает CSS, что будет? Ни-че-го! Т. е. ничего не отобразится, ведь ссылка у нас пустая.
Предлагаю решение:
В каждый тэг <a> добавляем тэг <span> с текстм ссылки:
<li id="mm_home"><a href="home"><span>Home</span></a></li>
А в CSS скрываем этот <span>:
ul#mainmenu li a span{
display: none;
}
В итоге, если мы отключим CSS напрочь (это умеет, например, делать расширение Web Developer для Firefox), то наше меню превратится в читаемый список ссылок:
Исходник меню: menu_without_img.zip
]]>munky]]>ul#mainmenu{
»list-style:none;
margin:0;
padding:0;
height:32px}
ul#mainmenu li{
float:left}
ul#mainmenu li a{
display:block;
height:0;
padding:32px 0 0 0;
width:84px;
overflow:hidden}
]]>Никита]]>munky, объясните что вы написали и зачем?
»]]>munky]]>ul#mainmenu{
list-style:none; – shtobi nebila list-style
margin:0; – shtobi nebila margin default
padding:0; – shtobi nebila padding default
height:32px – shtobi nenado bilo delatj posle menu clear:both
}
ul#mainmenu li{
float:left – prosto ukazivajem float:left, nichego bolshe nenado
}
ul#mainmenu li a{
display:block; – nu kaneshno block element
height:0; – visota 0
padding:32px 0 0 0; – padding 32px s sverxu (visota)
width:84px; – shirina
overflow:hidden – prjachim tekst
}
nu a potom mozhno vse kartinki objedinitj v odnu i toljko menjatj background-position dlja kazhdovo id ilji class.
primerna tak
»]]>Никита]]>list-style: none – не обязательно. display: block убирает маркеры.
margin, padding – это уже опционально. Я могу значения по умолчанию поставить в самом начале для всех элементов.
height: 32px – вот это правильно
height:0; padding:32px 0 0 0; overflow:hidden; – красивое решение, и применимо если не использовать . Ну у меня немного другое и тоже функциональное.
Ох, точно про двойную картинку забыл!
»]]>munky]]>list-style: none – lucshe vsegda ispoljzovatj. potomu shto slishkom mnogo u nas vsakix browserov
»]]>munky]]>aa i esli delatj kakie nibudj rastojanije mezhdu linkami to togda nado lusche dobavljtatj ih v ul#mainmenu li a{
margin:}
potomu shto esli dobavlatj v li togda nado smotretj kak eto budet vigleditj v vsex browserow (imenno v IE)
»]]>Никита]]>Каждый уважающий себя макетировщик с самого начала сбрасывает все дефолтные значения браузеров. С ними летят и margin и padding и list-style
»]]>3AHO3A]]>спасибо за инфу
»]]>Никита]]>never_again,
а с вашим кодом они разве будут показываться? Текст ссылки должен быть в тэге а или в тэге span? Дайте ссылку на рабочий вариант. А насчёт отключеных картинок это проблема.Всё-всё, дошло! Спасибо!
»]]>Dmitry Dulepov]]>Техника известная и удобная, хотя её можно оптимизировать ещё больше: http://developer.yahoo.com/performance/rules.html
»]]>Никита]]>Ну-ф! Нет предела совершенству! ))
»]]>pmaster]]>Очень даже кошерно!
»]]>Борзов Серёжа]]>да вапще супер, как я кайфую от этих маковских кнопок, респект, молодца!
»]]>Никита]]>либо у меня глючные IE 5.5 и IE 6.0, либо в них некорректно работает изменение background-position.
»]]>Никита]]>IE глючный – это конечно понятно, это он вообще такой. Но вот что выяснилось:
»“background-position” не возвращается к 0 если его применять к “a span“, работает только если его применять к “a“.
]]>Никита]]>Да – решение, но это не валидный css, а так же приходится прописывать cursor: pointer, который всё равно в IE 5.5 не работает ))
Я немножко другое решение родил, но об этом в следующем посте.
»]]>never_again]]>2 Никита. решение не валидное, т.к. я решил не использовать отдельную таблицу стилей. а так это проблема решается использованием условных комментариев.
ждемс следующего поста)
а для ie
»]]>never_again]]>извеняюсь.
а для ie младше 7 работает cursor:hand;
»]]>Seleckis.lv :: журнал Никиты Селецкого » » Универсальное графическое меню]]>[...] меню Учтя замечания моих уважаемых комменаторов к посту о графическом меню выкладываю код и исходник обновлённого варианта [...]
»]]>Никита]]>never_again, извеняюсь за SpamKarma. Засунул два последних комментария в спам. Только сейчас заметил.
Для ie младше 7 работает cursor: hand, но это опять же антивалидность ))
надеюсь мой второй вариант меню будет более востребованным. Там же перечислены все преимущества. Единственный минус – Дублирующиеся ссылки.
»]]>J()KER]]>Интересно, а как “завернуть” в div графику разных размеров и разной центровки относительно вертикали?
»]]>Никита]]>J()KER, можно пример? А то не совсем понятно про центровку по вертикали.
»]]>Дмитрий]]>Метод хорош, однако, пока картинки не загрузились или если они вообще отключены, меню не будет видно
»