CSS и HTML
Подписаться на эту рубрику по RSS
Не так давно подключил для своего форума по 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>
- <br /><br /><br />
- <a href="#"><img width="100" height="100" src=""></a>
- </body></html>
Казалось бы всё должно работать как надо, однако при наведении курсора получается такая картина (FireFox):
То есть отображаются две рамки...
Внимание, вопрос: "Каким образом убрать с картинки зеленую рамку от ссылки?".
Откуда-то повелось, что следование стандарту HTML или XHTML это отказ от использования тегов таблиц («table») в пользу блоков («div»). Для тех, кто все еще так считает, скажу, что теги таблиц не просто сохраняют свое присутствие в XHTML, но даже усиливают (если можно так сказать) свои позиции, прежде всего за счет введения дополнительных атрибутов в CSS2. Поэтому заявления, что верстка таблицами не соответствует спецификации HTML - полная ерунда. Давайте разбираться из-за чего весь сыр-бор возник.
