extruder

.alfavit a:link{ text-decoration: none; }

Мысль интересная, поэкспериментировал. Ничего не получилось. Вот результат. http://www.untex.com/6/ Во-первых, непонятно, как сделать так, чтобы картинка оказалась ровно под цифрой. Во-вторых, не убрать точку у цифры.

Mordraug, Попробовал сделать, как вы сказали. Вот я выложил на хост результаты экспериментов. http://www.untex.com/5/ Дополнительно задал еще margin-bottom для [*], чтобы не слипались. Получилось почти то, что нужно. Единственный вопрос, можно ли сделать так, чтобы при наведении фоном выделялся не весь прямоугольник, а только текстовая часть ссылки? То есть, чтобы не было изменения фона под картинкой, вокруг картинки, и вообще на пустых частях ссылочного блока. А то, как-то не слишком красиво, особенно, например, 7 пункт. Спасибо!

Никак не могу справиться с небольшой задачкой. Хотел сделать на CSS, не получилось. Бросил, перешел на табличную верстку. Но в ее рамках не удается отработать одну фишку, и решил снова вернуться к CSS. Теперь подробнее. Есть блок, отображающий список статей. Заголовки статей, оформленные в виде ссылок, и слева маленькие квадратные картинки-превьюшки, иллюстрирующие статью. Причем надо, что заголовки не обтекали картинки, а просто были правее. Так аккуратнее смотрится вся эта навигация. В таблицах реализуется просто. <tr> <td valign="top"><a href="#"><img src="pic.jpg" border="0"></a><td> <td width="100%" valign="top"><a href="#">Заголовок статьи</a></td> </tr> Но меня здесь не устраивает то, что ссылки картинки и заголовка отдельные друг от друга. Хочется, чтобы при наведении на картинку, заголовок статьи тоже отрабатывал hover. У меня для этих заголовков задано изменение цвета фона ссылок при hover. То есть, вывод такой. Надо делать на CSS. Напрашивается решение - делать на основе списка [*].... Вот тут как раз и вопрос вам, уважаемые коллеги. Каким образом можно сделать список, в котором элементы списка представляют собой картинку 30x30 пикселов, плюс заголовок статьи, причем заголовок не обтекает картинку, а просто находится правее нее. Плюс все это оформлено в виде ссылки, и при событии hover меняется цвет фона под текстом, но не меняется под картинкой. Или сделать это не списком, а как-либо еще? Прошу помочь.

Mordraug, Благодарю вас! Все отлично заработало. Вы мне очень помогли. Заодно сверстал с помощью списка [*]..., спасибо за совет!

Сорри, это видимо в результате экспериментов затесалось. Я выложил примеры на свой хост, чтобы вам удобнее было смотреть. И попробую более узко сформулировать вопрос. У меня в документе есть менюшка, в которой пункты-ссылки выводятся внутри контейнера "rub", для него заданы стили ссылок при помощи .rub a{...}. Ссылки заданы блочными, чтобы заполняли все пространство вложенных контейнеров. То есть, получается примерно следующее: <div class="rub"> <div><a href="#">Авто</a></div> <div><a href="#">Люди</a></div> </div> Для этих ссылкок задан padding=30, чтобы имелся отступ для отображения буллета в виде стрелочки. А для всех остальных ссылок не должно быть никакого отступа - padding=0, и они к тому же не должны быть блочными. Пример 1 http://www.untex.com/1/ Пример 2 http://www.untex.com/2/ Пример 3 http://www.untex.com/3/ В Примере 1 задан стиль для ссылок в контейнере rub, но не заданы стили для простых ссылок. В результате вы видите, что получается - менюшка работает нормально, но логотип и ссылки в тексте (сразу под заголовком "Забавные термины") отображаются с теми же отступами, что и меню. Контейнер логотипа я для удобства просмотра сделал с красной рамкой и серым фоном. Здесь все логично, так как не задан стиль для обычных ссылок. В Примере 2 в самом конце таблицы стилей задан стиль для обычных ссылок a:link, a:visited, a:active, a:hover{ display: inline; padding: 0; } При этом логотип и обычные ссылки выглядят нормально, но менюшка стала без паддингов. В чем тут проблема - не понимаю. А при наведении на менюшку hover отрабатывается нормально, с паддингами. В Примере 3 я переместил описание стиля обычных ссылок из конца таблицы стилей в ее середину - перед описанием стиля контейнера "rub". И сразу все вернулось к виду, как в Примере 1. То есть, мы имеем заданный стиль для обычных ссылок, заданный стиль для ссылок в контейнере "rub". Но отображение ВСЕХ ссылок идет как в "rub". Вот этого я и не могу понять. Все это я просматриваю пока только в IE6. До остальных броузеров дело дойдет потом. Прошу помочь.

Всех приветствую. Впервые начал проект на div'ах. До этого верстал только таблично. Изучаю, натыкаюсь на непонятности. Есть менюшка, в которой отображаются черные буквы, черная картинка стрелки, и серый фон. При наведении меняется цвет фона на болотный, буквы на белые, и картинка стрелки на белую. Слой div, содержащий в себе все это, называется "rub". Ссылки делают блочными, и включаю их в состав rub при помощи .rub a:link{...} и т. д. Ниже приведен код. Вроде, все нормально. Но возникла такая проблема. Дело в том, что все ссылки в документе делаются такими же. ВСЕ ССЫЛКИ! То есть, у меня для слоя "rub" заданы отступы слева padding=30, чтобы менюшка включала в себя картинку стрелочки. И при этом у всех ссылок на документе тоже становится padding=30. Не пойму причины. Ведь я задаю только для .rub свойства ссылки с отступами. А это тиражируется на все остальные ссылки. Изучал кучу кода с других сайтов. У них все нормально - есть обычные ссылки, и есть специфические, включенные в div'ы, и имеющие некие особенности. И все нормально - обычные ссылки работают обычно, а специфические - специфически. У меня все не как у людей. Я в затруднении Прошу помочь знающих людей. Спасибо. Ниже идет код страницы. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style> body{ behavior: url(csshover.htc); color: #000; font: 13px Tahoma, Arial, Helvetica, sans-serif; margin: 0px; padding: 0px; text-align: center; width: 100%; } #container{ text-align: left; width: 968px; } #logo{ height: 0px; margin: 20 0 10 70; width: 0px; } #main{ float: left; width: 560px; margin-top: 20px; margin-left: 20px; } .rub{ float: left; margin-top: 20px; width: 200px; color: #000; font: bold 13px; text-decoration: none; font-family: Tahoma, Arial, sans-serif; } .rub div{ background: #E5E5E5 10 10; border-bottom: 1px solid #FFFFFF; width: 100%; background-image: url(arrow_black.gif); background-repeat: no-repeat } .rub div:hover{ background: #A39F40 10 10; border-bottom: 1px solid #FFFFFF; width: 100%; background-image: url(arrow_white.gif); background-repeat: no-repeat } #rub a:link, a:visited, a:active{ display: block; width: 100%; padding: 4 10 4 30; color: #000; text-decoration: none; } #rub a:hover{ display: block; width: 100%; padding: 4 10 4 30; color: #FFFFFF; text-decoration: none; } a:link, a:visited, a:active, a:hover{ display: inline; padding: 0; } </style> </head> <body> <div id="container"> <div id="logo"><a href="#"><img src="logo.gif" width="160" height="60" border="0"></a></div> <div class="rub"> <div><a href="#">Авто</a></div> <div><a href="#">Люди</a></div> <div><a href="#">Культура</a></div> <div><a href="#">Природа</a></div> <div><a href="#">История</a></div> <div><a href="#">События</a></div> <div><a href="#">Явления</a></div> <div><a href="#">Города</a></div> </div> <div id="main"> <h1>Забавные термины</h1> <p><a href="#">Борбаг</a> - термин, используемый в программировании для описания программной ошибки, которая не исчезает и не меняет своих свойств при попытке ее обнаружения. Данный тип ошибки характеризуется как устойчивый и поэтому назван в честь атомной модели, разработанной Нильсом Бором.</p> <p><a href="#">Шрединбаг</a> - термин, используемый в программировании для описания программной ошибки, которая никак не проявляет себя, однако внезапно возникает, если кто-то наткнется на нее в исходном коде или попытается использовать программу в необычных условиях и осознает, что система вообще не могла работать при наличии такой ошибки. После этого программа перестает работать вообще до тех пор, пока ошибка не будет исправлена. Хотя это звучит невероятно, некоторые программы содержат в себе латентные шрединбаги.</p> <p><a href="#">Гейзенбаг</a> - термин, используемый в программировании для описания программной ошибки, которая исчезает или меняет свои свойства при попытке ее обнаружения. Примером могут являться ошибки, которые проявляются в окончательном варианте программы (релизе), однако не видны в режиме отладки или ошибки синхронизации в многопоточном приложении.</p> <p><a href="#">Мандельбаг</a> - термин, используемый в программировании для описания программной ошибки, чье поведение столь сложно, что выглядит хаотичным. Это также подразумевает, что говорящий полагает, что это скорее борбаг, чем гейзенбаг. Некоторые используют термин мандельбаг для описания ошибки, чье поведение не кажется действительно хаотичным, но столь сложно, что для ее исправления требуется переписать программу с нуля. Примером такой ошибки может служить фундаментальная ошибка, допущенная при проектировании системы.</p> </div> </div> </body> </html>