Barsam

Про alt знаю, спасибо, просто из кода повыкидывал всё лишнее, чтобы не мешало. Спасибо, весьма интересный ресурс, поизучаю. Ниже написанный код помогает IE понимать nav. <!--[if IE]> <script> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); </script> <![endif]--> Вот о том я и спрашиваю, как бы сделать тоже самое, но через стили. Дело в том... а хотя, сами смотрите... nav { width:100%; height:38px; background:#f9f4d6 url(img/nav_background.png) left top repeat-x; } nav li { height:38px; float:left; margin: 10px 18px auto 16px; } .nav_img_left{ height:38px; float:left; width:10px; margin:0px 5px auto 0px; } .nav_img_right{ height:38px; float:left; width:10px; margin:0px 0px auto 0px; } .nav_border{ height:38px; float:left; width:2px; margin:0px 1px auto 0px; } nav a { text-decoration:none; color:#fff; font-size: 1.4em; line-height:1; } nav a:hover { color:#6f0f35; } #nav_left_background { background: url(img/nav_left_background.png) left top no-repeat; } В общем, как бы переверстать, чтобы не пришлось "пихать" в список элементы дизайна. И ещё, сейчас только заметил, надо закрыть теги img.

Коллеги, здравствуйте. Совсем недавно начал изучать HTML5, сейчас создал меню. Ниже маленький фрагмент кода. Всё красиво, всё по макету, всё работает. Но я сомневаюсь, что моя реализация валидна. Будьте так любезны, дайте советы, как сделать код валидным. <nav> <ul> <li class="nav_img_left"><img src="img/nav_left_background.png"></li> <!-- Закругление фона слева--> <li><a href="/about/">Главная</a></li> <!-- Пункт меню --> <li class="nav_border"><img src="img/nav_border.png"></li> <!-- Перегородка между элементами меню --> <li><a href="/service/">О себе</a></li> <!-- Пункт меню --> <li class="nav_border"><img src="img/nav_border.png"></li> <!-- Перегородка между элементами меню --> <li><a href="/clients/">Каталог</a></li> <!-- Пункт меню --> <li class="nav_img_right"><img src="img/nav_right_background.png"></li> <!-- Закругление фона справа --> </ul> </nav>

Всё починил, всем спасибо. Если что всё чинится элементарно. Ставьте изображению float:left; если изображение перед ссылкой)))))) Как всё было просто ))

Это не представляется возможным. Проект является гигантским проектом на ASP. Тут не одна страничка, а огромное количество кусочков, подключаемых css и т. д.

Нет, не блочный. Тем более я кидал выписку из фаербага. Но я разобрался в чём проблема. Вот сейчас решаю. Дело в том, что ссылка находится в td. В td картинка выравнивается по верхнему краю, а ссылка по нижнему. Да, картинка находится в ссылке, но по фаербагу, она выходит за рамки ссылки. Блок ссылка по высоте включает в себя только текст, а по ширине - и текст и часть картинки.

Не поверите, но даже так не работает. Это полтергейст? Значит, что-то перебивает этот vertical-align. Проверьте файрбагом, что именно. Чудес не бывает, у всего есть рациональные объяснения... как правило <span style="vertical-align: middle !important;">Ссылка на пик</span> Фаербагом проверил почти сразу же. Всё на месте, ничем не перекрывается. как правило - видимо как раз тот самый случай... Дал бы, но не могу (нет физического пути, да посадят меня...). Сайт является внутренним порталом.

Коллеги, здравствуйте! Есть такая конструкция: <a href="#"><img src="pic.png">Ссылка на пик</a> Допустим высота изображения 50px; Как выравнить текст относительно середины изображения по высоте. |____________| |____________| |__pic.png____| Ссылка на пик |____________| |____________| Оговорюсь сразу, что вопросы с применением JavaScript, jQuery и т. п. не интересуют. Просьба помочь решить проблему чисто с точки зрения вёрстки. Благодарю за помощь!

FireFox, explorer 8 (в 7-ом всё ломается), Opera всё нормально.

Нет, я не буду делать градиенты методами вёрстки. Они будут img png. Тут дело не в наложении градиентов, а в том, как сверстать страничку, если на 70-80% она состоит из не однотонных изображений. Сам подход меня интересует.

Здравствуйте, коллеги! Мне необходимо сверстать 1 страничку, и я бы хотел сделать это не просто качественно, но и, так сказать, по правилам хорошего тона. Макет странички представлен ниже. ширина стандартная 1200px; По сути сайт это одна большая картинка, с огромным количеством пересекающихся градиентов, и с незначительным количеством текста и картинок "по делу". У меня есть несколько идей как это сверстать, но не могу выбрать направление. Буду благодарен за Ваше мнение и обоснование мнения. 1. Стандартная табличная вёрстка. Но мне кажется несолидно! 2. Разделить весь фон сайта на 3 кусочка, и просто поверх разместить текст и картинки "по делу". Плюс: несомненно лучше иметь одну большую картинку, чем много мелких. Минус: непрофессионально.. 3. Сделать "слоёный пирог". Взять однотонный фон, элементы функционала и декора, и с помощью z-index и position: absolute/fixed разместить как надо. Такого никогда не делал, но метод мне кажется смонительным... думаю такого же мнения будут придерживаться поисковые роботы. 4. Разрезать макет на 8-10 логических кусков. div-ами их соеденить, и уже поверх делать вёрстку функциональных элементов. Думаю это самый правильный вариант.

Текст малочитабельный, потому что по отекнку схож с фоном текста. Глаза напрягаются. Фон сайта, заменить... С тематикой не сочетается, да и с зелёной подложкой. Чтобы прочитать название сайта, нужно прям вчитываться. Это нехорошо, посетитель должен замечать и запоминать. Шрифт меню чуть увеличить, и сделать шрифт всего сайта тахома или вердана. Я бы поменял цвет. Что касается вёрстки, то не всматривался, но я скажу сразу так: лучше всё делать через css: <td class='menu'> <img src='........images/index_07.gif' alt=''/> </td> .menu img { width: 26px; height: 18px; }

Вообще это выглядит как-то так: (выкинь лишнее, установи нужные padding, border и т.д.) <div style="width: 300px; height: 100px; background: #363636; display: table-cell; vertical-align: middle; text-align: center;"> web_text </div>

____________________________________________________________________________ Всем спасибо за участие. Проблема не решена, но ниже указанный плагин работает (для новичков: если будете использовать, не забудьте подключить jQuery). (в моем случае из-за настроек сервера изображения не кешируются, но это уже проблема админов). (function ($) { var cache = []; $.preLoadImages = function () { var args_len = arguments.length; for (var i = args_len; i--; ) { var cacheImage = document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } } })(jQuery) jQuery.preLoadImages("/new/images/hover_1.png", "/new/images/hover_2.png", "/new/images/hover_3.png");

А так пробовали? http://jsfiddle.net/Radiocity/q8Nht/ Извините, я не понял. Это как? Может вы не то прислали. Но самое логичное применить спрайты.... А еще можно сделать прелоад на js в гугл вагон решений Если Вас не затруднит, приведите пример работающего JavaScripta. Только что встраивал скрипт, не помогло.

Может быть и вариант (этого я не пробовал), но будет ли подгружаться img при opacity: 0, вот это под большим сомнением. Да решение кажется слишком сложным, потому что в проекте таких кнопок около 10, и все их перевёрстывать, долго. А насчёт применения скриптов... Я один пробовал. Не сработало. В данный момент ищу рабочий.

Коллеги, здравствуйте! Столкнулся с такой проблемой. Есть <input type="button">. У кнопки есть background и background:hover. При наведении background заменяется на background:hover, но так как изображения hover нет в кеше, в момент замены кнопку дёргает. Сразу оговорюсь, что применение спрайтов недопустимо. Если кто-нибудь знает решение, просьба поделиться. Заранее спасибо за помощь. Примечание: была идея прятать картинки, но в таком случае в кеш они не добавляются.