Я что-то плохонепонял

Июль 2010

Меню вертикальное делаем сами с помощью css и уже знакомых нам методов работы с меню.

Очень часто или даже постоянно на сайтах используют вертикальные меню, так как они очень удобны, практичны и просты в создании. Вот и я решил написать в этой заметке урок по созданию вертикального меню, которое безотказно работает во многих браузерах. Когда вы научитесь создавать такие меню, то потом вполне очень быстро будете создавать совершенно другие, более сложные меню на основе этой, так сказать технологии.

Итак, для создания меню необходимо записать пункты меню в маркированный упорядоченный список вот таким образом:

<ul>
<li><a href="#">Партнеры</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Товары</a></li>
<li><a href="#">Люди</a></li>
<li><a href="#">Новости</a></li>
</ul>

Кстати сразу же сделаем наши пункты ссылками, иначе не сможем корректно прописать необходимые правила для нормальной работы меню. После всех этих мероприятий создаем файл стилей или добавляем прямо в код страницы правила для тега ul:

Обнуляем поля и отступы и скрываем квадратики не нумерованного списка перед пунктами меню.

ul {
margin:0;
padding:0;
list-style-type:none;}

Вообще -то предварительно необходимо нарисовать кое-какую картинку для имитации кнопки меню, но для первого раза можете воспользоваться моей.

Сразу хочу обратить внимание на то, что эта картинка в два раза больше по ширине, чем наше будущее меню. Сделано это для того, что бы изменять цвет кнопочки при наведении. Смотрим код css для ссылок меню, находящихся между тегами ul:

ul a {
display:block;
width:200px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
text-indent:45px;
background-image:url (vert-menu-bg.gif);
background-repeat:no-repeat;}

Ширина 200 пикселей, высота 40 пикселей (ширина картинки 400 и высота 40), высоту строки так же устанавливаем 40 пикселей, цвет ссылки делаем черный и убираем подчеркивание. Согласно изображению стрелки на нашей кнопочке необходимо сделать отступ текста на 45 пикселей. Последние две строки добавляют нашу картинку бекграундом и запрещают ее повторение по икс и игрек.

Меню почти готово, осталось поработать над кодом, которые определяет правила при наведении курсора мышки на ссылку.

a:hover {
background-position:right;
color:#fff;}

Как видно код простейший. Первая строка определяет положение бекграунда начиная с правой стороны, тем самым при наведении куросра пункт меню подсвечивается зеленым цветом. Вторая строка определяет цвет наведенной ссылки. Поумолчанию она остается подчеркнутой.

Вот и все. Для создания вертикального меню теперь у Вас будет уходить не более 15 минут (зависит от Ваших способностей в фотошопе и фантазии). Самое главное изучить и понять оснуву, а дальше дело техники и полет фантазии. Например при наведении можно сделать сдивг текста на два пикселя вправо, чем симитировать «живое меню».

Недавно наш начальник решил устроить корпоративный вечер и как ни странно все это происходило на природе. Многие из нашей компашки задумались почему не в ресторане, а я совершенно случайно наткнулся на сайт проведение корпоративных праздников на природе и узнал наконец-то почему мы гуляли не как обычно в ресторане. С тех пор частенько отдыхаем на природе.

Для того, что бы сверстать горизонтальное меню средствами div+css, необходимо обладать некоторыми знаниями в данной области. В этот раз я Вам расскажу как это сделать и в очередной раз Вы пополните свою копилку ЗНУ (знания, навыки, умения).

Открываем любой визуальный редактор и переходим в режи отображения html кода. В новом, только что созданном документе создаем пункты будущего меню, которые должны выглядеть следующим образом(в режиме html):

<ul>
<li>главная</li>
<li>новости</li>
<li>скрипты</li>
<li>контакты</li>
<li>дизайн </li>
</ul>

Сразу же создаем в том же документе запись для работы со стилями css, которые будут определять положение и отображение меню. Вот тут будем записывать правила для тегов меню:

<style type="text/css">
<!--
/* hor menu */
тут запишем правила для тегов меню
/* end hor menu */
— >
</style>

Так как в меню мы в любом случае используем ссылки, то сразу их и пропишем. Должно получиться так — <li><a href="#">главная</a></li> такую процедуру проделываем для каждого пункта.

Задаем нулевые margin и padding для тега ul, ширину меню 300 пикселей и убираем квадратные точки слева. Для удобства добавим бекграунд:

ul {
margin:0;
padding:0;
width:300px;
list-style:none;
background:#FFFF99;}

А почему же наше горизонтально меню совсем не горизонтальное спросите Вы. А добавьте в конец списка правил для тега ul вот эту строку float:left; и создайте такое же правило для тегов li , которые находятся внутри тега ul. Это будет выглядеть так:

ul li {
float:left;}

Т.к. пост о создании горизонтального оменю получается очень объемным, я решил сначала выкладывать целиком список правил для какого-нибудь тега и потом их описывать.

ul a {
display:block;
margin:0;
padding:0 0.7em;
line-height:2.1em;
text-decoration:none;
color:#339966;}

Данный список определяет отображение ссылок, котрые заключены между тегами ul и первая строка в совокупности со второй, третьей и четвертой заставляют ссылку выглядеть кнопкой. Т.е. мы задаем отступы слева и справа от каждой надписи размером 0.7em, высоту строки определяем размером 2.1em, ссылку оставляем неподчеркнутой и окрашиваем в зелененький цвет. Так как мы использовали отступы. появилась необходимость немного увеличить ширину всего меню. Я сделал в данном случае 390 пикселей.

ul a:hover {
text-decoration:underline;
color:#33FF66;
margin-top:1px;}

Список правил для ссылки в момент наведения на нее курсора (обычно называют наведенная ссылка). Итак при наведении на ссылку она подчеркивается, окрашивается в светло-салатовый цвет и немного смещается вниз, что имитирует небольшую анимацию для Вашего меню. Если анимация не вписывается, то ее вполне можно исключить.

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

Как обычно делюсь полезными ресурсами в конце каждой заметки и на сегодня это сайт об автомобилях бмв в россии. Есть у меня желание купить машину, вот иногда и приходится заглядывать на подобные сайты.

Приветствую! Очень быстро и просто можно создать небольшой шаблончик для верстки макетов с левым и правым сайдбарами, шапкой и подвалом. Для некоторых начинающих веб-мастеров встречаются трудности на пути создания таких дизайнов, а на самом деле все проще простого.

Создаем 7 div`ов, называем и располагаем их в следующем порядке:

<div id="main">
<div class="header">
Верхушка
</div><!--class="header" -->

<div id="content-columns">
<div class="leftcolumn">
Левая колонка
</div><!--class="leftcolumn" -->

<div class="content">
Центральная колонка
</div><!--class="content" -->

<div class="rightcolumn">
Правая колонка
</div><!--class="rightcolumn" -->

</div><!--id="content-columns" -->

<div class="footer">
Подвал
</div>
</div><!--id="main" -->

Ну и как обычно создаем файл стилей или записываем в странице (не рекомендуется) и начинаем разбирать код css:

body {
min-width: 800px;}

Определяет минимальную ширину монитора до которой дивы будут сужаться, если ширина монитора или ширина окна браузера будет меньше 800 пикселей, то внизу появится полоса прокрутки.

* html body {
width:expression (document.documentElement.clientWidth < 800 ? «800px» : «auto»);}

По поводу этой записи расскажу лишь то, что она необходима для корректной интерпретации страницы в IE, что определяет кроссбраузерность верстки. Боюсь ошибиться, поэтому не буду рассказывать больше ничего.

#main {
width: 100%;}

Общий див, имеет ширину в 100% и всегда растягивается на всю ширину окна. В нем находятся все остальные дивы.

.header {
width: 100%;
height: 50px;
background: #36f;}

Див шапки сайта с шириной в 100% и высотой 50 пикселей, вон произвольный для тестирования шаблона.

#content-columns {
margin: 0 150px 0 150px;}

В этом контейнере размещаются три колонки (два сайдбара и для основного контента). Теперь внимательно читаем и вникаем. У данного дива назначены отступы с четырех сторон 0 150px 0 150px, первая цифра определяет отступ сверху, вторая отступ српава, третья снизу и четвертая слева. Замечу, что если стоит ноль, то «px» подставлять не надо. Итого мы имеем сверху и снизу отступы ноль, а слева и справа отступы по 150 пикселей для наших сайдбаров.

.content {
width: 100%;
float: left;
background: #ccc;}

правила для средней колонки. Ширина 100%, прижата к левой стороне, фон произвольный.

.leftcolumn {
width: 150px;
float: left;
margin-left: -150px;
display: inline; /* решает проблему в IE */
position: relative;}

Левый сайдбар с шириной 150 пикселей (вспомним отступы...), прижат к левой стороне и с отступом в минус 150 пикселей (минус для сдвига), предпоследняя строка для кросс-браузерности и послядняя строка задает позицию этого дива.

.rightcolumn {
width: 150px;
float: right;
margin-right: -150px;
display: inline; /* решает проблему в IE */
position: relative;}

Тоже самое для правого сайдбара, только прижимаем его к правой стороне (float: right;)

.footer {
width: 100%;
height: 50px;
clear: both;
background: #006;}

Правила для подвала. Ширина 100%, высота 50 пикселей, третей строкой выполняем «очистку потока» от правил прижимания к левой и правой стороне сайдбаров и в конце фон произвольный.

Ну вот и готов набросок для вашего будущего дизайна. Теперь все по порядку: работаем над шапкой, потом сайдбары и подвал. Если есть необходимость, можно под шапкой вставить горизонтальное меню в виде кнопочек.

А после того ка Вы научитесь делать сайты, сделаете себе несколько штук и можно копить деньги на квартиру. Вот тут можно найти различные агентства недвижимости в Москве. Любая информация о недвижимости всегда полезна и актуальна.

Кстати я задумал купить себе автомобиль. Ну и конечно же заглянул в 2010 каталог автомобилей. Столько много разных марок, что аж глаза разбегаются. Зато есть из чего выбирать. Надеюсь, что все получится удачно.