Как разместить элементы списка горизонтально

Содержание

Как разместить элементы списка горизонтально?

Пункт 1
Пункт 2
Пункт 3

Знак > в селекторе указывает что мы обращаемся только к дочерним элементам

тега
- - - Пункт 1
    - Пункт 2
    - Пункт 3
Этот код работает и изменения видны:
Рисунок 2. Работа примера №2.
Но могут быть разные варианты, например нам нужно отобразить в меню вложенные списки:
- - - Правка
      - Отменить
      - Вырезать
      - Копировать
      - Вставить
    - Начертание
      - Жирное
      - Курсивное
      - Подчеркнутое
    - Размер
      - Маленький
      - Нормальный
      - Средний
      - Большой
Вот результат работы этого кода:
Рисунок 3. Работа примера №3.
Мы видим что блоки выравниваются по высоте не так, как нам хотелось бы. Конечно, можно указать для всех блоков одинаковую высоту, но не всегда нам заранее известно её точное значение, и оно может меняться.
А собственно, почему так происходит?
Наши блоки имеют свойство display со значением inline-block. Это значит что у них есть качества как блочных элементов (возможность указать ширину и высоту), так и строчных элементов. То что мы наблюдаем — это качество строчных элементов.
Давайте рассмотрим строку с символами «А» разной величины:
А А А А А А А
Мы видим что все буквы по вертикали выравнены по нижней линии. Точнее по базовой линии, но сейчас не будем влазить в дебри. Так вот, с нашими блоками произошло то же самое.
Для выравния текста по вертикали служит свойство vertical-align. В нашем примере №3 нужно использовать значение top, которое выравняет верхнюю границу элемента по верху самого высокого элемента строки.
Пока применим его к строке с символами «А» разной величины:
А А А А А А А
Обратите внимание
Кажется, что буквы немного «скачут». Я установил CSS границу border самой высокой букве, чтобы было видно, что скачков на самом деле нет, есть пустое пространство между верхней границей (по которой происходит выравнивание) и верхней точкой символа «А».
Свойство vertical-align нужно применять к каждому строчному элементу, оно не наследуется. Вы можете прочитать подробней про это свойство: vertical-align.
После этого отступления продолжим размещать элементы списка горизонтально.
Второй способ
Разместить элементы списка горизонтально можно используя свойство float. Это свойство указывает по какой стороне выравнивается элемент, имеет две позиции: left и right.
Вот пример с использованием этого кода:
- - - Пункт 1
    - Пункт 2
    - Пункт 3
Вот результат работы кода:
Рисунок 4. Работа примера.
Вроде пример работает. Но в использовании этого свойства есть один нюанс. Сейчас мы его рассмотрим. Для примера возьмём код, в котором есть два горизонтальных списка с разным способом расположения элементов горизонтально: display и float:
- - - Пункт 1
    - Пункт 2
    - Пункт 3
  - - Пункт 1
    - Пункт 2
    - Пункт 3
Вот результат работы кода:
Рисунок 5. Работа примера.
В этих примерах контейнеры списка
- - - - Пункт 1
      - Пункт 2
      - Пункт 3
    - - Пункт 1
      - Пункт 2
      - Пункт 3
Видно что нижний список уже не обтикает верхний, элементы не наезжают друг на друга. Но в первом списке теги
- - всё ещё располагаются вне контейнера
    - - Пункт 1
        Пункт 2
        Пункт 3
      - Пункт 1
        Пункт 2
        Пункт 3
    Теперь у нас 100% рабочий код.
    Рисунок 8. Работа примера.
    Этот приём со свойством float обычно используют при вёрстке сайтов для выравнивания столбцов, которые создаются тегами .
    Таким способом мы получаем нормальное построение столбцов с требуемым выравниванием по высоте. Когда мы создаём меню, то нам, в большенстве случаев, не важна высота блоков, она практически всегда одинакова.
    Поэтому использование правила {display: inline-block} в этих случаях вполне оправдано.
    Но для полноты раскрытия темы мы тут ознакомились со всеми возможными вариантами. Хотя может есть и другие способы, например использование CSS-таблиц, но поисковики настойчиво рекомендуют использовать таблицы только по их прямому назначению, а не для организации элементов навигации или ещё как-либо.
    Как разместить элементы списка горизонтально или горизонтальное меню с помощью CSS
    Приветствую Вас, уважаемые читатели блога webcodius! Обязательным элементом практически любого сайта является меню. Поэтому если Ваш сайт имеет больше одной страницы, то без навигационного меню скорей всего не обойтись. Ведь без меню пользователю будет трудно найти нужные ему странички.
    Так как любое меню представляет из себя список ссылок, которые ведут на внутренние страницы сайта. Для создания меню обычно используют маркированные списки, которые создаются с помощью html тегов
    - - и
        . Но как известно элементы списка по умолчанию выстраиваются вертикально друг под другом, а что если необходимо сделать горизонтальное меню? С использованием CSS это не является большой проблемой.Для начала создадим обычный маркированный список, содержащий пункты нашего меню:
        Главная
        Новости
        Контакты
        О сайте
        Для того чтобы идентифицировать список и задать для него нужные css стили, я добавил к нему атрибут id с идентификатором «menu».
        По умолчанию без каких-либо правил CSS он будет выглядеть следующим образом:
        Главная
        Новости
        Контакты
        О сайте
        Как видно элементы списка выстроились вертикально друг под другом и если нам нужно вертикальное меню, то если стилизовать нужным образом ссылки (добавить фоновый цвет, рамки, отступы, изменить шрифт) можно получить привлекательную навигационную панель.
        Если же требуется получить горизонтальное меню, то просто необходимо расположить элементы списка по горизонтали. Для этого к селектору LI следует добавить стилевое свойство display со значением inline или inline-block. Я буду использовать правило display:inline-block. Итак, для того, чтобы элементы списка выстроились по горизонтали просто добавляем код CSS:
        Теперь элементы списка будут расположены по горизонтали:
        Как видим пункты меню выстроились в один горизонтальный ряд. Но пока на меню похоже не очень. Теперь, чтобы получить полноценную навигационную панель, оформим меню с помощью css стилей. Для начала добавим фон для панели, растянем ссылки на весь пункт li, уберем подчеркивание ссылок, настроим отступы и др.:
        В итоге получится такое привлекательное меню:
        Вообще внешний вид меню далее зависит только от вашей фантазии и знания свойств css. Далее для примера приведу несколько вариантов оформления меню.
        Горизонтальное меню по центру
        Выравнять меню по центру можно так:
        Результат:
        Либо так:
        Результат:
        Горизонтальное меню с пунктами одинаковой ширины
        Чтобы сделать все пункты меню одинакового размера указываем для них нужный размер. Только главное чтобы в сумме размеры пунктов не превышали размер всей панели. Можно сделать так:
        Результат:
        Или так:
        Результат:
        Если добавить немного трансформации:
        то получим меню со скошенными углами:
        Способы размещения блоков горизонтально
        Часто на практике приходится решать задачу группирования и выравнивания контента средствами CSS. Сегодня мы рассмотрим основные способы размещения элементов в горизонтальный ряд.
        Материал данной статьи призван помочь начинающим веб-дизайнерам в освоении приемов верстки web-страниц.
        Из чего выбрать или методы
        Существует несколько способов расположения структурных элементов в ряд в горизонтальной плоскости. Наиболее полезными, с точки зрения практического применения, являются:
        метод «Float»
        метод «Inline-block»
        метод «Table-cell»
        Каждый из них имеет свои преимущества, области применения и недостатки. Рассмотрим их по порядку.
        «Для рывка» или немного теории
        Все структурные элементы HTML можно условно разделить на:
        Инлайновые (встроенные) – типа img, span и им подобные. У нас нет возможности менять их фон и задавать им произвольные линейные размеры.
        Блочные – занимающие всю ширину родительского блока, всегда начинаются с новой строки – p, h, div.
        Наглядный пример встроенных и блочных структур приведен ниже:
        Метод «Float»
        Как уже известно (см. выше), блочный элемент размещается с новой строки вне зависимости от заданной ему ширины (width). По этому, уменьшая горизонтальный размер div-а, в рядок блочки не построить.
        Наиболее популярный (особенно среди начинающих верстальщиков), метод решения это использование свойства float.
        CSS свойство float обрело большую популярность и практическую ценность после перехода от табличного способа верстки к блочному.
        Float: left (right) трансформирует блочный элемент в плавающий, выравнивает по левому (правому) краю родительского блока и устанавливает обтекание справа (слева) текстом и другими элементами.
        Для примера, создадим четыре блока, которые нужно разместить в ряд:
        DOCTYPE html>
        Строим горизонтальный ряд из дивов
        И внешнюю таблицу стилей с следующим содержимым:
        div { float: left; /*Задаем обтекание*/ line-height: 120px;/*Высота строки + верт. центрирования текста*/ font-size: 40px; background: dodgerblue; color: white; margin-top: 60px; width: 320px; /*Фиксируем ширину блока*/ margin-right: 10px; text-align: center; /*Центрируем текст по горизонтали*/ }
        В результате получаем четыре блока, расположенные в горизонтальный ряд и выровненные по левому краю родительского блока:
        Важно
        Иногда на практике бывает необходимо выровнять блоки по правому краю родительского элемента. Изменим обтекание блоков в предыдущем примере:
        Обратите внимание на надписи, расположенные в блоках. На первый взгляд может показаться, что пример отработал криво. Но на самом деле, браузер обработал код правильно: прочитал блоки сверху вниз, и сделал то, что мы от него просили — выровнял по правому краю. Учтите этот момент при использовании свойства float: right.
        Для того, чтобы прервать обтекание элементов с какого-то конкретного места, используйте строчку:
        В рассмотренном выше примере расстояния между блоками мы задавали при помощи отступа margin-right. Но что делать, если у вас при верстке страницы возникла задача: разместить блоки в ряд, центрировать их, да и еще чтобы отступы были только между ними, но никак не снаружи?
        Алгоритм действий следующий.
        HTML:
        Строим горизонтальный ряд из дивов
        CSS:
        .wrap { width: 1310px;/*фиксируем ширину обертки*/ margin: 0 auto;/*центрируем ее*/ background: darkgray; height: 120px;/*Задаем высоту обертки*/ }
        .bblock { float: left; /*Задаем обтекание*/ line-height: 120px;/*Высота строки + верт. центрирования текста*/ font-size: 40px; background: dodgerblue; color: white; width: 320px; /*Фиксируем ширину блока*/ margin-right: 10px; text-align: center; /*Центрируем текст по горизонтали*/
        }
        .wrap :last-child { margin-right: 0px;/*Убираем поле последнего div-а*/ }
        В результате получаем такую картину:
        Ну что же, всех практических ситуаций не рассмотришь, по этому перейдем к общим особенностям.
        Важно!!!
        
        Ширина блоков должна быть фиксированной. Иначе получите что-то такое:
        
        При уменьшении размера родительского блока или окна веб-браузера, не вмещающиеся блоки перемещаются вниз друг под дружку. Чтобы исключить такой косяк, примените свойство min-width.
        
        Не забывайте указывать !DOCTYPE вашего документа, иначе, при отображении страницы в IE, применив описанный выше метод горизонтального размещения блоков, у вас появится отступ справа порядка 17px (наверное разработчики под скролл разметили).
        
        Во избежание различий отображения страницы в разных браузерах, некоторые веб-мастера рекомендуют задавать точные значения свойств margin и padding для body.
        
        В отличии от метода «Inline-block» вы не столкнетесь с наличием зазора между блоками при отсутствии margin-ов.
        
        Для задания отступов и полей при размещении элементов воспользуйтесь свойствами margin и padding.
        Метод «Inline-block»
        Как строчные так и блочные элементы имеют свои преимущества и недостатки в контексте каждой конкретной решаемой задачи. А что если объединить их преимущества?
        Встречайте, гвоздь программы – свойство display: inline-block.
        display: inline-block генерирует блочно-строчный элемент, который по сути является строчным, но сохраняет блочные свойства – позволяет изменять линейные размеры, задавать поля, отступы и т.д.
        Блочно-строчный элемент имеет следующие свойства:
        высота и ширина блока определяется автоматически по содержимому и значению отступов (padding)
        высота и ширина блока может быть задана фиксировано
        Отсутствует эффект схлопывания границ.
        Рассмотрим пример создания простого навигационного меню, содержащего картинку и ссылку.
        HTML:
        Ссылка меню 1 длиннее обычного Ссылка меню 2 Ссылка меню 3 Ссылка меню 4
        CSS:
        .nav { display: inline-block; /*Задаем блочно-строчное отображение*/ width: 180px; /*задаем ширину блока*/ background: dodgerblue; }
        .string { text-align: center; /*Равняем текст по-горизонтали*/ }
        В результате получаем такую менюшку:
        Как видим, получилось кривовато… Но расстраиваться мы не намерены, по-этому применяем к нашим дивам CSS свойство vertical-align (подробнее см. ниже):
        Теперь наша навигационная панель выровнялась по верхней линии:
        Конечно, приведенный пример является примитивным, но я уверен, что на его основе вы сможете создать настоящий шедевр!!!
        Важно!!!
        
        При уменьшении ширины окна обозревателя невмещающийся элемент перемещаеться вниз (как в случае float: left)
        
        Элемент, отображаемый как inline-block чувствителен к пробелам. Это приводит к тому, что даже при нулевых значениях margin между блоками будет зазор. Зазор этот зависит от применяемого шрифта. Для примера рассмотрим список: HTML: Зазор между блокамиCSS:
        li { display: inline-block; width: 180px; background: darkgrey; color: gold; line-height: 120px; font-size: 32px text-align: center; }
        Результатом рендеринга такого кода будет следующая картина:
        Есть несколько способов убрать зазоры:
        подобрать отрицательные значения margin:
        указать font-size: 0 для родительского блока и font-size ≠0 для инлайнового; ul { font-size: 0px;} li {font-size: 32px;}
        не очень красиво, но все же… Написать код в одну строчкуЗазормеждублоками
        Результатом применения любого из выше перечисленных приемов будет следующая структура:
        
        Если у вас несколько блочно-строчных элементов подряд имеют разную высоту, то им необходимо задать свойство vertical-align: top. Напомню, что по умолчанию vertical-align присвоено значение baseline.
        
        Кросс-браузерность.
        Для древних версий Firefox добавляем строчку:display: -moz-inline-stack;и оборачиваем элемент в дополнительную div-обертку.
        IE 7 и более ранние версии — добавляем строчки: zoom: 1; /*задаем hasLayout*/
        *display: inline; /*звездочка – хак для IE */
        _height: 250px; /*в IE6 не работает min-height*/
        Замечу, что на указанные строчки избирательно реагируют конкретные браузеры (на первую – Firefox, на остальные — IE).
        Метод «Table»
        Табличный подход долгое время был стандартом верстки, что в первую очередь объяснялось простотой и интуитивной понятностью разметки. Скорее всего, именно это и послужило причиной появления табличного форматирования в CSS.
        Свойства display: table (table-cell, inline-table), позволяют выполнять табличное форматирование элементов без применения HTML таблиц.
        Для горизонтального размещения блоков нам понадобится родительский элемент, имеющий свойство display: table, и дочерние элементы (ячейки), имеющие свойство display: table-cell:
        Строим табличный ряд из дивов .bblock { display: table-cell; font-size: 32px; width: 200px; height: 200px; background: gold; text-align: center; vertical-align: middle;
        }
        .wrap { display: table; border-spacing: 20px 20px; background-color: darkgray;
        }
        Важно!!!
        
        В отличии от методов «Inline-block» и «float», при уменьшении ширины окна веб-браузера, ячейки не перемещаются вниз.
        
        У вас нет возможности задавать свойство margin для ячеек псевдотаблицы.
        
        Кросс-браузерность. Свойства из семейства display: table* не поддерживаются IE6, IE7. Кроме того, в IE8 вы можете наблюдать динамическую ошибку рендеринга псевдотабличных элементов в виде рандомно пропадающих ячеек. Данная ошибка чаше всего проявляется при первичной прорисовке документа
        .
        Горизонтальное меню для сайта
        Горизонтальное меню представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента
        , а затем применить CSS-стили к его элементам. Такое расположение меню является наиболее распространенным в силу очевидных преимуществ в его позиционировании на веб-странице.Перейти на страницу с примерами
        Как сделать горизонтальное меню: разметка и примеры оформления
        HTML-разметка и базовые стили для горизонтального меню
        По умолчанию все элементы списка
        
        …
        располагаются вертикально, занимая по ширине всю ширину элемента контейнера
        …
        , который в свою очередь занимает всю ширину его блока-контейнера.
        HTML разметка для горизонтальной навигации
        Пункт меню
        Пункт меню
        Пункт меню
        …
        Горизонтальное меню, находящееся внутри тега
        …
        , можно дополнительно помещать внутрь элемента … и/или . Благодаря этому html-разметке придается семантический смысл, а также появляется дополнительная возможность для форматирования блока меню.
        Существует несколько способов разместить их горизонтально. Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:
        ul { list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/ padding-left: 0; /*убираем левый отступ, равный 40px*/ } a {text-decoration: none; /*убираем подчеркивание текста ссылок*/}
        See the Pen GJxayB by Elena Nazarova (@nazarelen) on CodePen.
        Способ 1. li {display: inline;}
        Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li {margin-right: -4px;}. Дальше стилизуем ссылки по своему желанию.
        Способ 2. li {float: left;}
        Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul {overflow: hidden;}, расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.
        Способ 3. li {display: inline-block;}
        Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.
        Способ 4. ul {display: flex;}
        Делаем список ul гибким контейнером с помощью модели CSS3 flexbox. В результате элементы списка располагаются горизонтально. Добавляем для ссылок a {display: block;} и стилизуем их по своему желанию.
        1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку
        Work
        About
        Blog
        Contact
        Выравнивание списков
        Автоматически центрировать список вне зависимости от длины строк достаточно просто
        /* — Стиль CSS —*/
        div.center_list{ text-align: center;
        }
        div.center_list > ul { display: inline-block; text-align: left; max-width: 70% /* не обязательно */
        }
        пункт списка 1
        пункт списка 2 большей длины
        пункт 3
        Минус данного способа в необходимости дополнительной разметки — список должен быть заключен в содержащий контейнер, которому присвоен класс div.center_list.
        Горизонтальный список
        Иногда, например при использовании списка в качестве меню, нужно расположить элементы списка в строку.
        Вариант 1. Сделать элементы списка строчными
        /*— CSS. Строчный вариант —*/
        li { display:inline; padding:0 10px;
        }
        Получаем список такого вида:
        элемент списка 1
        элемент списка 2
        элемент списка 3
        Вариант 2. Сделать элементы списка плавающими
        /*— CSS. Плавающий вариант —*/
        ul { list-style: none; /* убираем маркеры, если нужно */
        }
        li { float: left; /* для выравнивания по правому краю — right */ padding: 0 10px;
        }
        Получаем такой же список:
        элемент списка 1
        элемент списка 2
        элемент списка 3
        На практике, в частности при создании меню на основе списка, чаще используется второй вариант.
        Плавающий список
        Заголовок не совсем точен; речь идет о списке, обтекающем плавающий элемент.
        И опять возвращаемся к плавающим элементам. Два понятия — «плавающий элемент» и «обтекание». Необходимо четко представлять что это такое, что где плавает и что обтекает:
        И плавает у соответствующей кромки содержащего блока или прижимается соответствующей кромкой к другому плавающему элементу.
        Следующие за ним, обычные блоки никого не обтекают! Они «тупо» не видят плавающий блок….
        Совет
        Подлость происходящего в том и состоит, что обтекает только текст (строчные элементы и элементы с установленным свойством display: inline или display: inline-block!
        Когда-то изначально свойство float именно для этого и было придумано!
        Все неприятности — от маркеров, которые не являются строчными элементами, и часто происходит следующее:
        Наверняка, многие тщетно пытались вытащить маркер из под плавающего блока, увеличивая margin и padding …
        Попытка увеличить правый отступ плавающего элемента выглядела бы более успешно, если бы не параграфы.
        Вот как это может выглядеть:
        плавающий блок
        margin-right: 25px
        Параграф до списка
        Параграф после списка
        Согласитесь, не очень красиво.
        Решение
        /*— CSS —*/
        /*— Cтиль, установленный по умолчанию —*/
        ul { margin: 0 0 10px 25px;
        }
        /*— Переопределяем стили —*/
        ul { margin: 0 0 10px 10px; padding-left: 15px; overflow: hidden;
        }
        В результате получаем:
        Параграф до списка
        Параграф после списка
        Особенности применения
        Чтобы оставить отступ обычных, не обтекающих списков неизменным, мы уменьшили margin и увеличилиpadding на одинаковую величину. Отступ маркера от начала текста равен размеру шрифта (14px), иpadding должен быть больше этой величины, иначе маркер обрежет.
        Мы определили свойства для тега ul. Т.е. для всех списков на сайте. Это не очень хорошо, так-как overfow: hidden, в некоторых случаях, может оказаться не безобидным. Поэтому нужно выбрать один из способов использования данного метода:
        1. Если обтекающий список — редкое исключение:
        Добавляем конкретным тегам ul класс, напримерul.folat_list, и прописываем свойства уже для класса.
        2. Обратная ситуация, когда свойство необходимо присвоить только спискам без класса:
        Используем следующую конструкцию (только для соврменных браузеров, поддерживающих CSS3)
        /*— CSS —*/
        /*— Для «деклассированных» списков —*/
        ul:not([class]) { margin: 0 0 10px 10px; padding-left: 15px; overflow: hidden;
        }
        Для всех остальных списков, с установленным значением атрибута class, будут применяться стили по умолчанию.
        Горизонтально центрированное меню с использованием только CSS
        Задача центрирования горизонтального меню может оказаться не такой уж простой, особенно для новичков в CSS.
        Поиск решений приводит к весьма ограниченному списку методов, основная часть которых полагается на трюки CSS, JavaScript или использование нестандартных правил, которые поддерживаются не всеми браузерами.
        В данном уроке мы разберем метод центрирования горизонтального меню, который использует только стандартные правила CSS и работает во всех браузерах.
        Пример центрированного меню
        Ниже приведено горизонтальное центрированное в данной колонке меню, в котором активизирована вторая закладка. Можно попробовать изменить размер окна браузера или страницы, чтобы убедиться в том, что меню всегда остается центрированным и рабочим.
        На демонстрационной странице можно увидеть несколько вариантов оформления горизонтально центрированного меню. Любой из них можно использовать в своих проектах.
        Разметка HTML
        Все меню, примеры которых приводятся в данном уроке, используют простую структуру. Это обыкновенный неупорядоченный список ссылок, помещенный в элемент div.
        Первая закладка
        Вторая закладка
        Третья закладка
        Четвертая закладка
        Код CSS центрированного меню
        Ниже приводится полный код CSS, с помощью которого центрируется меню. А объяснения принципа работы приводятся далее в уроке.
        #centeredmenu { float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; } #centeredmenu ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #centeredmenu ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } #centeredmenu ul li a { display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; color:#000; text-decoration:none; line-height:1.3em; } #centeredmenu ul li a:hover { background:#369; color:#fff; } #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover { color:#fff; background:#000; font-weight:bold; }
        Как работает метод центрирования
        Действие метода основано на относительном позиционировании плавающих блочных элементов один в другом. Для начала посмотрим, как изменяется размер элементов при смещении.
        Элемент div без смещения
        Элемент div (блочный) без смещения растягивается на всю доступную ему ширину.
        Элемент div со смещением влево
        Но если мы будем смещать элемент div влево, он автоматически будет ужиматься до размеров своего содержимого. Сжатие является ключевым моментом в реализации данного метода центрирования меню. Оно помогает перемещать меню в правильную позицию.
        Стандартное выровненное влево меню
        Возьмем стандартное выровненное влево меню и будем шаг за шагом его переделывать. Для наглядности пункты окрашены в разные цвета, так что сразу понятно, что куда вложено.
        Обратите внимание на следующие моменты:
        Элемент centeredmenu div (голубой прямоугольник) смещается влево, но имеет ширину 100%, поэтому остается растянутым на всю страницу.
        Элемент ul (розовый прямоугольник) находится внутри элемента centeredmenu div и смещается влево. Это означает, что он будет ужат до ширины своего содержимого, то есть до суммарной ширины всех закладок.
        Все элементы li (зеленые прямоугольники) находятся внутри элемента ul и смещаются влево. Таким образом, они ужимаются до размеров ссылок в них и выстраиваются в одну горизонтальную линию.
        Внутри каждой ссылки (оранжевые прямоугольники) выводится текст закладки: Закладка 1, Закладка 2 и так далее.
        Смещаем положение неупорядоченного списка
        Затем мы смещаем элемент ul вправо на 50% с помощью свойства position:relative;.
        Когда элемент смещается с указанием процента при таких условиях важно помнить, что суммарная ширина содержащихся в нем элементов не является его шириной.
        В нашем случае смещение происходит на половину окна браузера (или доступного для вывода пространства).В результате наше меню начинается на середине окна и частично выходит за его пределы. И переходим к следующему шагу.
        Сдвигаем положение всех элементов меню
        Осталось только сдвинуть все элементы li влево на 50%. Это 50% ширины нашего элемента ul (контейнера, который содержит меню). Таким образом, закладки смещаются точно на центр окна.
        Несколько важных замечаний
        При использовании данного метода центрирования надо помнить о нескольких важных моментах:
        Так как элемент ul частично выходит за рамки окна, то это приводит к выводу полос прокрутки. Поэтому нужно использовать правило overflow:hidden; для элемента centeredmenu div. Таким образом, выступающая часть элемента div будет обрезана.
        Так как элемент ul не выровнен по закладкам, то нельзя использовать никаких визуальных стилей для него. Оставьте элемент ul без фонового цвета и без рамки, чтобы он стал полностью невидимым. А стили для закладок нужно использовать только для элементов li.
        Если нужно задать особенные стили для первой и последней закладки, нужно добавить класс для первого и последнего элементов li, чтобы можно было стилизовать их индивидуально.
        Заключение
        Предложенное решение совместимо со всеми браузерами, не использует JavaScript и поддерживает изменяемый размер текста.
        Расположение div по центру и другие тонкости позиционирования
        Левый блок
        Правый блок
        Теперь постараемся с помощью этого же свойства расположить третий div по центру страницы. Но, к сожалению, у float нет значения center. А при задании новому блоку значения выравнивания вправо или влево он сдвигается в указанную сторону. Поэтому остается лишь всем трем блокам задать float: left:
        Но и это не является оптимальным вариантом. При уменьшении окна все слои выстраиваются в один ряд по вертикали, а при увеличении размеров – прилипают к левому краю окна. Поэтому нужен более совершенный способ выравнивание div по центру.
        Центрирование слоев
        В следующем примере мы будем использовать слой-контейнер, в котором разместим остальные элементы. Это решает проблему смещения блоков друг относительно друга при изменении размеров окна. Центрирование контейнера посредине осуществляется с помощью задания свойствам margin нулевого значения отступам от верхнего края и auto по бокам (margin: 0 auto):
        Левый блок
        Центральный блок
        Правый блок
        Этот же пример показывает, как можно отцентровать div по горизонтали. А если немного отредактировать приведенный выше код, то можно добиться вертикального выравнивания блоков. Для этого нужно лишь изменить длину слоя-контейнера (уменьшить его). То есть после редактирования его css класс должен выглядеть вот так:
        #container { width: 200px; margin: 0 auto; }
        После изменения все блоки выстроятся строго в ряд посредине. И их положение не изменится при любых размерах окна браузера. Вот как выглядит такое центрирование div по центру по вертикали:
        Обратите внимание
        В следующем примере для центрирования слоев внутри контейнера мы использовали ряд новых свойств css:
        Краткое описание свойств css и их значений, которые мы использовали в данном примере для центрирования div внутри div:
        display: inline-block – выравнивает блочный элемент в строку и обеспечивает его обтекание другим элементом;
        vertical-align: middle – выравнивает элемент посредине относительно родительского;
        margin-left – устанавливает отступ слева.
        Как из слоя сделать ссылку
        Как ни странно звучит, но такое возможно. Иногда div блок как ссылка может понадобиться при верстке различных видов меню. Рассмотрим практический пример реализации слоя-ссылки:
        Ссылка на наш сайт
        В данном примере с помощью строки display: block мы задали ссылке значение блочного элемента. А чтобы вся высота блока div стала ссылкой, установили height: 100%.
        Скрытие и отображение блочных элементов
        Блочные элементы предоставляют больше возможностей для расширения функционала интерфейса, чем устаревшая табличная верстка. Часто бывает, что дизайн сайта является уникальным и узнаваемым. Но за такой эксклюзив приходиться платить нехваткой свободного места.
        Особенно это касается главной страницы, стоимость размещения рекламы на которой является самой высокой. Поэтому и появляется проблема, куда бы «впихнуть» еще один рекламный баннер. И тут уж выравниванием div по центру страницы никак не отделаешься!
        Более рациональным решением является сделать какой-нибудь блок скрывающимся. Вот простой пример такой реализации:
        Это волшебная кнопка. Нажатие на нее скроет или отобразит скрывающийся блок.
        В данном примере расположение div блоков никак не меняется. Здесь используется простейшая функция JavaScript, меняющая значение свойства css display после нажатия на кнопку (событие onclick).
        Синтаксис display:
        display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
        Как видите, данное свойство может принимать множество значений. Поэтому является очень полезным и может использоваться для позиционирования элементов. В одном из предыдущих примеров с помощью одного из его значений (inline-block) мы реализовали выравнивание div внутри div по центру.
        Для скрытия и показа слоя мы использовали два значения свойства display:
        none – временно удаляет блочный элемент со страницы;
        block – показывает элемент как блочный.
        Еще одним средством css, позволяющим скрывать и показывать элемент, является свойство visibility. Но оно обладает большим недостатком.
        Свойство visibility позволяет лишь скрыть элемент. Но практически он присутствует на странице. Поэтому расположить на его месте другой элемент не получится. В то время как свойство display полностью удаляет (на время) элемент и позволяет располагать на его месте другие блочные структуры.
        Мы с вами рассмотрели все основные слои настоящего сайта. Надеемся, что полученные знания позволят вам «испечь» по-настоящему вкусный ресурс.
        Как сделать навигационное меню — учебник CSS
        Навигация присутствует на любом хорошем сайте, даже если он одностраничный. В зависимости от ситуации, навигационные ссылки могут вести на различные разделы сайта либо отправлять к закладке (якорю), расположенной на текущей странице.
        Грамотное составление навигации, в которой не запутается пользователь, требует определенных знаний и опыта. К дизайну навигационной панели также нужно подходить с умом, и в этом уроке мы расскажем вам, как создать удобное навигационное меню.
        Создание навигации
        Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка
        , где в каждом пункте
        
        содержится одна ссылка . В HTML5 для навигации ввели отдельный тег , куда можно просто помещать теги ссылок. После создания HTML-каркаса можно переходить к его стилизации с помощью CSS, где вы можете определять, каким будет ваше меню — вертикальным, горизонтальным, выпадающим и т. п.Допустим, у нас есть простая навигация с пятью ссылками, созданная в HTML на основе маркированного списка:
        Home
        About
        Gallery
        News
        Contacts
        Изначально, без стилей наша навигация выглядит, как обычный список:
        Чтобы сделать этот элемент более похожим на навигационную панель, необходимо проделать несколько обязательных шагов. Во-первых, возле пунктов меню не нужны маркеры, а во-вторых, стандартные значения margin и padding, заданные браузером для списка, могут мешать, поэтому мы обнуляем их. В итоге получается следующее:
        .menu { list-style-type: none; margin: 0; padding: 0; }
        По сути, идентичные действия по отношению к спискам делает файл сброса стилей Reset.css, поэтому, если вы используете его на вашем сайте, то код выше можно не записывать.
        После обнуления стандартных стилей списка можно приступать непосредственно к созданию стилей для навигации. Мы покажем, как делать вертикальные и горизонтальные панели.
        Вертикальное меню
        Создание вертикальной навигационной панели считается более легким занятием, нежели создание горизонтального меню. Главным образом потому, что нет необходимости задавать горизонтальное расположение ссылок. Это просто вертикальный список страниц сайта. И всё же некоторые важные стили применить придется.
        Блочные ссылки
        Прежде всего нужно сделать все теги блочными элементами:
        .menu a { display: block; }
        Существует несколько причин для этого:
        Вы сможете задавать отступы для ссылок.
        Блочный элемент занимает всю ширину контейнера, тогда как ширина строчного элемента зависит от его содержимого. Из-за этого могут появиться проблемы, если вы, например, решите установить для ссылок фоновый цвет:
        GIF
        Строчные ссылки могут быть разной длины, что негативно отразится на внешнем виде.
        Исходя из второго пункта, можно отметить еще один положительный момент. Когда ссылка является блочным элементом, область ее кликабельности расширяется: даже если кликнуть по месту, где нет текста, она все равно сработает. Это удобно, потому что не надо прицеливаться по маленькой ссылке. А с помощью вертикальных отступов padding можно увеличить область кликабельности еще и по высоте.
        Ширина меню
        Следующее, что нам понадобится сделать — это задать ширину меню. Если у вас заранее не была определена ширина навигационной панели, и она не находится в контейнере, который ограничивает ее, то меню будет растянуто на всю ширину окна (как в нашем примере выше) — ведь блочный элемент по умолчанию ведет себя именно так. Вы можете задать необходимую ширину для элемента .menu, например:
        .menu { width: 300px; }
        Вместо этого можно установить ширину для пунктов
        либо для ссылок — визуально эффект может быть одинаковый, но учтите, что в таком случае ширина элемента .menu всё равно останется 100%.
        
        Разделение пунктов
        Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку .menu:
        .menu a { border-top: 1px solid blue; } .menu { border-bottom: 1px solid blue; }
        Высота пунктов и вертикальное выравнивание
        Сейчас ссылки меню выглядят слишком низкими, расположенными близко друг к другу. Если текст каждой ссылки не будет занимать более одной строки, то увеличить их высоту и сохранить при этом текст вертикально по центру можно с помощью свойств height и line-height:
        .menu a { height: 30px; line-height: 30px; } GIF
        Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.
        Горизонтальное меню
        Основная задача при создании горизонтальной навигации — расположить пункты меню в один ряд. Это можно сделать несколькими способами.
        Способ первый
        Первый вариант — задать пунктам списка свойство display со значением inline либо inline-block:
        .menu li { display: inline; }
        При этом теги внутри
        
        нельзя делать блочными, иначе пункты перестанут выстраиваться горизонтально и снова встанут в вертикальную позицию. Ссылкам можно также задать значение inline или inline-block. Выберите второе, если вы собираетесь в дальнейшем создавать отступы для ссылок.
        
        После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:
        .menu a { text-decoration: none; font-family: sans-serif; color: #5757a0; display: inline-block; padding: 10px 20px; background-color: lavender; border-bottom: 5px solid #5757a0; }
        Мы добавили фоновый цвет и нижнюю границу для каждой ссылки, а также увеличили ее размеры при помощи внутренних отступов padding.
        Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили.
        Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами
        
        . Эти промежутки можно убрать, записав HTML-код списка в одной строке:
        
        Home
        About
        Gallery
        …
        Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right:
        .menu li { margin-right: -5px; }
        Этот код не убирает промежутки, а прикрывает их за счет сдвига элементов на пять пикселей влево. Данный способ нельзя назвать очень надежным, потому что размер промежутка может варьироваться в зависимости от других стилей.
        Если промежутки между пунктами не запланированы в вашем дизайне, лучше воспользоваться вторым методом горизонтального выстраивания элементов.
        Способ второй
        Возможно, вы уже догадались, что второй вариант создания горизонтального меню заключается в использовании свойства float. Для этого добавьте стиль для тегов
        
        :
        
        .menu li { float: left; }
        Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим,
        ), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left. Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:
        .menu { overflow: hidden; }
        Это также поможет вернуть нормальную высоту родителя плавающих элементов. Мы уже говорили об этой проблеме в предыдущих уроках, но тогда мы решали ее через специальный хак с использованием псевдоэлемента :after. Пример выше — это еще один способ решить вопрос с исчезнувшей высотой контейнера.
        GIF
        Примечание: если вы установите фон для элемента .menu, то вы не увидите его до тех пор, пока не примените к нему overflow: hidden. Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?
        В следующем уроке мы более детально расскажем о возможностях селекторов атрибутов, с помощью которых можно задавать стили ссылкам в зависимости от атрибутов и их значений.
    Как расположить элемент по центру при помощи CSS
    Здравствуйте уважаемые читатели блога mainview.ru. Думаю, каждый сейчас понимает, что создать современный сайт не так-то просто. Нужно не только обладать хорошими знаниями, но и иметь хороший опыт.
    Часто при разработке веб-сайта, можно столкнуться с рядом проблем, которые потребуют времени для нахождения решения, которые потребуют время на поиск и тестирование возможных решений.
    Именно поэтому я решил коснуться некоторых «маленьких больших проблем», с которыми веб разработчики сталкиваются постоянно.
    Сегодня хочу поговорить о том, как правильно расположить элементы внутри контейнера по центру.
    Проблема. Как расположить элементы по центру при помощи CSS
    Вы хотите расположить элемент по центру, относительно его родительского элемента. Чтобы внутри контейнера элемент располагался посередине. Для этого браузер должен выставить равную ширину полей справа и слева при указанной ширине самого элемента:
    Решение. Выравниваем элементы по центру при помощи CSS
    Чтобы расположить элемент по центру, укажите ширину элемента, а затем используйте значение «Auto» для обоих полей (левого и правого):
    #centered { margin-left:auto; margin-right:auto; width:800px; }
    Или можете записать правила в сокращённом виде, для того, чтобы выровнять элемент по центру контейнера:
    #centered { margin:0 auto; width:800px; }
    ПОСМОТРИМ НА ЗНАЧЕНИЕ «AUTO» ПОДРОБНЕЕ
    CSSсодержат 7 уникальных свойств, которые применяется для установки горизонтального формата элемента margin-left, border-left, padding-left, width, padding-right, border-right, margin-right.
    Их сумма составляет общее горизонтальное пространство, которое элемент занимает на данной странице.
    Из семи свойств, три могут принимать как регулярные значения (в процентах, пикселях, точках и т.д.), так и значение «Auto«.
    Это ширина элемента (width) , левая граница (margin-left) и правая граница (margin-right) .
    Исходя из этого, мы можем получить четыре возможных комбинации, которые будут выглядеть так:
  - Два свойства со значением «Auto», одно свойство с фиксированным значением.
  - Одно свойство со значением «Auto», два других свойства с фиксированным значением.
  - Все три свойства имеют фиксированные значения.
  - Все три свойства со значением «Auto».
  - 1. ОДНО СВОЙСТВО СО ЗНАЧЕНИЕМ «AUTO», ДРУГОЕ С ФИКСИРОВАННЫМ ЗНАЧЕНИЕМ
    Этот вариант представляет наибольший интерес. При установке обоих полей в автоматическое значение, а ширины элемента в фиксированное значение, браузер будет назначать полям равную ширину. Тем самым элемент будет расположен по центру относительно родительского контейнера. Например:
    … #centered { margin-left:auto; margin-right:auto; width:600px; }
    Также в этой комбинации возможен, как вы поняли, и другой вариант. Предположим, что одно поле имеет фиксированную длину, а другое поле установлено в значение «auto».
    Ширина элемента также установлена значение «auto».
    В этом случае ширина поля, установленного в значение «auto» будет установлена в ноль, а максимально возможное пространство будет установлено для ширины самого элемента. Это необходимо учитывать для этого варианта. Например:
    #centered { margin-left:200px; margin-right:auto; width:auto; }
    выглядеть это будет вот так:
    2. ОДНО СВОЙСТВО СО ЗНАЧЕНИЕМ «AUTO», ДРУГОЕ С ФИКСИРОВАННЫМ ЗНАЧЕНИЕМ.
    В этом случае браузер автоматически устанавливает ширину свойства со значением «auto», чтобы выдержать остальные два заданных значения. Например, если ширина элемента установлена в 960px, а левое поле в 200px, браузер автоматически рассчитает ширину правого поля.
    #centered { margin-left:200px; margin-right:auto; /* браузер вычислит оставщуюся ширину этого поля исходя из других значений */ width:960px; }
    По умолчанию все браузеры устанавливают значения полей в «auto». Вы можете убрать строку margin-right:auto;, и вы получите тот же результат.
    3. ВСЕ ТРИ СВОЙСТВА ИМЕЮТ ФИКСИРОВАННЫЕ ЗНАЧЕНИЯ.
    В этом случае, браузеры будут вынуждены установить правое поле (margin-right) в автоматическиое значение. А это возвращает нас к предыдущему случаю:
    #centered { margin-left:200px; margin-right:200px; /* браузер установит это поле в значение auto */ width:960px; }
    4. ВСЕ ТРИ СВОЙСТВА СО ЗНАЧЕНИЕМ «AUTO».
    В этом случае браузеры будет назначить элементу максимальную длину. То есть как правое так и левое поля будут обнулены.
    #centered { margin-left:auto; /* будет установлено в ноль */ margin-right:auto; /* будет установлено в ноль */ width:auto; }
    ДОПОЛНЕНИЕ: Я ПРИМЕНИЛ ЭТОТ МЕТОД ДЛЯ ИЗОБРАЖЕНИЯ, НО ЭТО НЕ РАБОТАЕТ, ПОЧЕМУ?
    Автоматические поля могут быть использованы только для блоковых элементов: таких как параграфы , «DIV», и списки, которые занимают всю строку, тем самым не позволяя добавлять пространство со стороны полей.
    Изображения, «span», «em», » strong», также известные как линейные элементы: элементы, которые не создают блок самостоятельно, они должны быть включены в блок элементов. Так как они считаются частями текста, «боковые» поля линейных элементов просто игнорируются веб-браузерами.
    Поэтому, для того, чтобы отцентрировать изображения, мы должны установить свойство » display » со значением » block «, так как это показано ниже .
    img { display:block; } Важно
    На этом сегодня остановлюсь. Если есть, что добавить, как всегда, комментарии открыты. Спасибо за внимание.
    +6-2