В первую очередь мы задаем ширину колонок…
В первую очередь мы задаем ширину колонок и их расположение. Делается это с помощью свойств float: left; и width: 19.9%; (строки …). Вы можете задать вопрос: «Почему ширина равна 19.9%, а не 20%?». Ответ очень простой: «Потому что существует Internet Explorer у которого 5 колонок с шириной 20% каждая на странице не помещаются (в Firefox все нормально отображается)». Теперь обратите внимание на то, как заданы маркеры около пунктов меню. Для каждого маркера используется один и тот же рисунок. Вот этот: Высота рисунка 60px, а ширина – 20px. Т. к. рисунок используется в качестве фона, то отображается он не весь, а только та его часть, которая помещается в блоке ссылки. Т. е. квадрат со сторонами 20 на 20px. Когда курсор не наведен на ссылку, применяются стили, указанные в строках … и мы видим зеленый маркер. При наведении курсора на ссылку будут применены стили псевдокласса hover (строки …), и мы увидим желтый маркер. Учтите, что этот прием имеет недостаток, который, в общем-то, касается любого дизайна с рисунками. При значительном изменении размера текста (как в большую, так и в меньшую сторону) маркеры перестанут совпадать с текстом ссылки. Мы увидим или часть следующего маркера, или обрезанный маркер. Поэтому пользуйтесь этим приемом аккуратно. Остальные стили я описывать не буду. Они задают параметры шрифтов, отступы, границы и т. д. В завершение, хочу сказать, что такой вариант верстки имеет несколько ограничений. Например, если вы захотите установить разделители между колонками и растянуть их на всю высоту контейнера, то, скорее всего вам придется использовать html таблицу. Потому что иначе каждый разделитель будет иметь высоту той колонки, к которой он относится. Вы можете скачать архив с файлами этого примера. Удачных вам проектов. Постовой Компьютеры – Товары в Запорожье