Дневник ➜ Вёрстка сайтов: CSS, HTML, LESS
Все записи рубрики 6
- 03/03/2006 Таблица или блок?
- 18/09/2006 Знатокам CSS. Задачка
- 21/10/2009 Концепция: верстка HTML-страниц ячейками
- 28/10/2009 Верстка с помощью Grid
- 19/02/2010 Рассуждения о модульной сетке в web-дизайне
- 08/06/2010 Подключение поиска google к форуму phpBB
8 июня 2010 г.
Не так давно подключил для своего форума по MaxSite CMS поиск с помощью гугла и сейчас делюсь как это можно сделать. Особенностью моего решения является то, что поиск полностью вписывается в существующий дизайн. Ну и реализация довольно простая.
Статью написал скорее из желания сохранить свои идеи для дальнейшего развития. Речь идет о верстке по модульной сетке: теория, практика. Текст расчитан на подготовленного читателя.
После обсуждения предыдущей статьи «Концепция: верстка HTML-страниц ячейками» я немного переосмыслил свои же идеи. Спасибо всем, кто принял участие в обсуждении и на сей раз я готов предложить дальнейшее развитие концепции и готовый практический вариант.
Верстальщики знают, делая первый сайт, мы позволяем себе разные вольности, например указать стили прямо в тэгах; вместо стиля с margin, добавляем BR и т.д. Второй сайт мы делаем лучше, ведь в голове копошится мысль, чтобы как-то систематизировать свои стили и HTML-разметку. На третьем сайте окончательно и бесповоротно рождается желание (кричащее все громче с каждым последующим сайтом) все унифицировать: и css-стили, и HTML-разметку.
Данная работа является скорее «мыслью вслух», чем какой-то конечной разработкой, поэтому просьба не устраивать холиваров и не высказывать своё «фи» не по поводу.
Вот задачка, которую я так и не смог решить. Если кто-то ткнет носом в ошибку, буду очень признателен.
Итак, у нас есть простая html-страничка. В ней необходимо сделать так, чтобы все ссылки, при наведении курсора, оказывались в рамочке (зеленой). Но при этом, все изображения, заключенные в ссылки, оказывались в другой рамке (синей).
Вот html-код:
<html><head><title>Тест</title>
<style>
img {border: none;}
a, a:visited {text-decoration: none;}
a:hover {border: 3px green solid;}
a:hover img {border: 3px blue solid;}
</style>
</head><body>
<a href="#">ссылка</a>
<a href="#"><img width="100" height="100" src=""></a>
</body></html>
Казалось бы всё должно работать как надо, однако при наведении курсора получается такая картина (FireFox):
То есть отображаются две рамки...
Внимание, вопрос: "Каким образом убрать с картинки зеленую рамку от ссылки?".
Откуда-то повелось, что следование стандарту HTML или XHTML это отказ от использования тегов таблиц («table») в пользу блоков («div»). Для тех, кто все еще так считает, скажу, что теги таблиц не просто сохраняют свое присутствие в XHTML, но даже усиливают (если можно так сказать) свои позиции, прежде всего за счет введения дополнительных атрибутов в CSS2. Поэтому заявления, что верстка таблицами не соответствует спецификации HTML - полная ерунда. Давайте разбираться из-за чего весь сыр-бор возник.
