SEO руками начинающего мастера » Верстка http://seozest.ru SEO, бизнес, блоги Wed, 30 Nov 2011 16:55:46 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Кроссбраузерное меню для сайта http://seozest.ru/layout/cssmenu/ http://seozest.ru/layout/cssmenu/#comments Fri, 12 Mar 2010 14:25:05 +0000 admin http://seozest.ru/?p=289

Кроссбраузерное меню Наиболее популярным вариантом создания кроссбраузерного выпадающего меню для сайта можно назвать способ Патрика Гриффитса. Это минимальная HTML-разметка в виде маркированного списка, несколько строк JavaScript`а для совместимости с IE, и красиво оформленный CSS.

Прежде, чем мы начнём рассмотрение этого способа, посмотрите на окончательный вариант выпадающего меню.

 

Теперь посмотрим на разметку HTML-кода. Она достаточно удобная и очень проста:

<ul>
    <li>Первый пункт</li>
    	<ul>
            <li>Подпункт</li>
            <li>Подпункт</li>
            <li>Подпункт</li>
    	</ul>
    </li>
    <li>Второй пункт
    	<ul>
            <li>Подпункт</li>
            <li>Подпункт</li>
            <li>Подпункт</li>
    	</ul>
    </li>
    <li>Третий пункт
    	<ul>
            <li>Подпункт</li>
            <li>Подпункт</li>
            <li>Подпункт</li>
    	</ul>
    </li>
</ul>

Без оформления такая разметка выглядит следующим образом:

Выпадающее меню без CSS

Теперь можно приступить к созданию CSS. Прежде всего, обнуляем отступы и поля списка меню, подставляемые браузером по умолчанию, и убираем маркеры:

<style>
    ul { padding: 0; margin: 0; list-style: none; }
</style>

В результате этой несложной операции получаем следующее:

Кроссбраузерное меню

После этого, первый уровень делаем горизонтальным, и задаем фиксированную ширину для пункта меню:

<style>
    li { float: left; width: 100px; }
</style>

Эта операция видоизменяет наше меню к следующему представлению:

Выпадающее меню с применением CSS

Второй уровень будет позиционироваться относительно пунктов первого меню. Для этого необходимо установить параметр position, как relative – для пунктов первого меню, и как absolute – для меню второго уровня:

<style>
    li { position: relative; }
    li ul { position: absolute; }
</style>

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

<style>
    li ul { top: 10px; left: 0; }
</style>

Осталось только скрыть второй уровень:

<style>
    li ul { display: none; }
</style>

И дописать стили, делающие его видимым, при наведении указателя на пункт меню:

<style>
    li:hover ul { display: block; }
</style>

Вот и всё. У нас получилось выпадающее меню, раскрывающееся при наведении указателя:

Двухуровневое меню

Поработав немного со стилями, можно добиться нужного оформления:

Красивое меню с использованием CSS

Теперь поговорим об IE6. Как некоторые знают, IE6 поддерживает псевдокласс hover только для элементов ссылок (<a></a>), поэтому наше меню в браузере IE6 работать не будет. Для решения этой проблемы можно воспользоваться следующим JavaScript`ом: 

<script>
 seozest = function() {
   if (document.all&&document.getElementById) {
   navRoot = document.getElementById("menu");
   for (i=0; i<navRoot.childNodes.length; i++) {
   node = navRoot.childNodes[i];
   if (node.nodeName=="LI") {
     node.onmouseover=function()
        { this.className+=" ie6";}
     node.onmouseout=function()
        { this.className=this.className.replace(" ie6", "");
   }}}}}
 window.onload=seozest;
</script>

Чтобы скрипт мог выполнять свою функцию, добавляем к нашему меню идентификатор:

...
 <ul id="menu">
...

Теперь, при наведении указателя мыши на пункт меню, ему будет присваиваться временный класс ie6. Осталось только добавить этот класс в CSS, и  использовать его для отображения второго уровня:

<style>
    li.ie6 ul { display: block; }
</style>

Вот, собственно, и всё. Результаты нашей работы можете посмотреть здесь.

]]> http://seozest.ru/layout/cssmenu/feed/ 4 Центрирование страницы в CSS (не обижая IE6) http://seozest.ru/layout/center-ie6/ http://seozest.ru/layout/center-ie6/#comments Thu, 17 Dec 2009 12:12:27 +0000 admin http://seozest.ru/layout/center-ie6/

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

Способы будем рассматривать на следующем примере HTML-разметки:

<html>
<body>
   <div id=”container”>
   </div>
</body>
</html>

Основной способ центрирования выглядит следующим образом:

<style>
   #container { margin: 0 20%;}
</style>

Свойство margin устанавливает боковые отступы размером в 20% от ширины окна браузера. В результате мы получаем блок container, шириной в 60% от ширины окна браузера, центрированный посередине.

Теперь рассмотрим ситуацию с фиксированной версткой, то есть такой версткой, где ширина основного блока (в нашем случае container) указана явно, например, в пикселях.

Для этих целей можно использовать наиболее распространённый способ:

<style>
   #container { margin: 0 auto;}
</style>

В данном случае, для указания боковых отступов, мы используем значение auto свойства margin. В результате мы получаем центрированный блок с фиксированной шириной. Но, к сожалению, данный способ не поддерживается браузером IE6 (в режиме совместимости). Поэтому, рассмотрим пару альтернативных способов центрирования, лишённых этого недостатка.

Первый альтернативный способ: применить к селектору body свойство text-align со значением center:

<style>
   body {text-align: center;}
</style>

В результате мы получаем кроссбраузерное центрирование страницы, единственным недостатком которого ялвяется наследственное центрирование, применяемое ко всем дочерным элементам.  Исправляется этот недостаток элементарно: элементу container приписываем свойство text-align со значением left. Таким образом достигается хорошая совместимость со старыми версиями браузеров.

Второй альтернативный способ выглядит немного интереснее:

<style>
   #container {
      position: absolute;
      left: 50%;
      width: 800px;
      margin-left: –400px;
   }
</style>

Устанавливаем для нашего блока абсолютное позиционирование (position: absolute), делаем отступ слева на половину ширины экрана (left: 50%), и сдвигаем наш container на половину собственной ширины влево (margin-left: –400px). В результате получаем центрированный блок, корректно воспринимаемый всеми популярными браузерами, включая легендарный IE6.

Бонусное видео:

Здесь показана CSS-верстка простой странички, центрирование которой было сделано с помощью последнего рассмотренного нами способа.

Подписаться на этот блог.

]]> http://seozest.ru/layout/center-ie6/feed/ 5