Расположение div по центру и другие тонкости позиционирования

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

Расположение div по центру и иные тонкости позиционирования

Преимущества верстки при помощи тега <div>

Существует два основных типа построения структуры веб-сайта:

  • Табличная;
  • Блочная.

Табличная верстка была доминирующей ещё на заре зарождения интернета. К ее преимуществам можно отнести точность заданного позиционирования. Но, тем не менее, она обладает явными недостатками. Главными из них будет объемность кода и низкая скорость загрузки.

При использовании табличной верстки веб-страница не будет выводиться вплоть до полной загрузки. В то время как при использовании блоков div элементы выводятся сразу же.

Кроме высокой скорости загрузки блочное построение веб-сайта может в пару раз уменьшить объем кода html. В том числе и за счет использования классов CSS.

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

Блочное построение на основе тегов <div> также называют послойным, а сами блоки слоями. Это связано с тем, что при использовании определенных значений свойств их можно без труда размещать один поверх иного подобно слоям в Photoshop.

Средства позиционирования

В блочной верстке позиционирование слоев лучше осуществлять при помощи средств каскадных таблиц стилей. Основным свойством CSS, отвечающим за расположение <div>, будет float. Синтаксис свойства: float: left | right | none | inherit, Где:

  • left – выравнивание элемента по левому краю экрана. Обтекание остальными элементами происходит справа;
  • right – выравнивание справа, обтекание остальными элементами – слева;
  • none – обтекание не допускается;
  • inherit – наследование значения родительского элемента.

Рассмотрим облегченный пример позиционирования блоков div при помощи этого свойства:

<style type="text/css">#left { width: 200px;height: 100px; float: left; background: rgb(255,51,102); }#right { width: 200px;height: 100px; float: right;  background: rgb(0,255,153);     }  </style> </head><body><div id="left"><h1>Левый блок</h1></div><div id="right"><h1>Правый блок</h1></div></body>

Расположение div по центру и иные тонкости позиционирования
Сейчас постараемся при помощи этого же свойства расположить третий div по центру страницы. Но, к сожалению, у float нет значения center. А при задании новому блоку значения выравнивания вправо или влево он сдвигается в указанную сторону. Так что остается лишь всем трем блокам задать float: left:
Расположение div по центру и иные тонкости позиционирования
Но и это не будет оптимальным вариантом. При уменьшении окна все слои выстраиваются в один ряд по вертикали, а при увеличении размеров – прилипают к левому краю окна. Так что нужен более совершенный метод выравнивание div по центру.

Центрирование слоев

В следующем примере мы будем использовать слой-контейнер, в котором разместим остальные элементы. Это решает проблему смещения блоков друг относительно друга при изменении размеров окна. Центрирование контейнера посредине осуществляется при помощи задания свойствам margin нулевого значения отступам от верхнего края и auto по бокам( margin: 0 auto):

<style type="text/css">#container {    width: 600px;    margin: 0 auto;}#left {    width: 200px;height: 100px;    float: left;     background: rgb(255,51,102);     }#right {     width: 200px;height: 100px;    float: left;      background: rgb(0,255,153);     } #center {     width: 200px;height: 100px;    float: left;    background: rgb(255,0,0);     }    </style> </head><body><div id="container"><div id="left"><h1>Левый блок</h1></div><div id="center"><h1>Центральный блок</h1></div><div id="right"><h1>Правый блок</h1></div></div></body>

Расположение div по центру и иные тонкости позиционирования
Этот же пример показывает, как можно отцентровать div по горизонтали. А если отредактировать приведенный выше код, то можно без труда добиться вертикального выравнивания блоков. Для этого необходимо лишь настроить длину слоя-контейнера(уменьшить его). То есть после редактирования его css класс должен выглядеть вот так:

#container {    width: 200px;    margin: 0 auto;}

После изменения все блоки выстроятся строго в ряд посредине. И их положение не изменится при любых размерах окна браузера. Вот как выглядит такое центрирование div по центру по вертикали:

Расположение div по центру и иные тонкости позиционирования
В следующем примере для центрирования слоев внутри контейнера мы использовали ряд новых свойств css:

<style type="text/css">#container {    width: 450px;height:150px;margin:0 auto;background-color:#66CCFF;}#left {width: 100px;height: 100px;    background: rgb(255,51,102);display: inline-block;    vertical-align: middle;margin-left: 35px; }#right { width: 100px;height: 100px;    background: rgb(0,255,153);display: inline-block;    vertical-align: middle;margin-left: 35px;} #center {    width: 100px;height: 100px;    background: rgb(255,0,0);display: inline-block;    vertical-align: middle;margin-left: 35px;} </style>

Расположение div по центру и иные тонкости позиционирования
Краткое описание свойств css и их значений, которые мы использовали в данном примере для центрирования div внутри div:

  • display: inline-block – выравнивает блочный элемент в строку и обеспечивает его обтекание иным элементом;
  • vertical-align: middle – выравнивает элемент посредине относительно родительского;
  • margin-left – устанавливает отступ слева.

Как из слоя сделать ссылку

Как ни странно звучит, но такое возможно. Иногда div блок как ссылка может понадобиться при верстке разных видов меню. Рассмотрим практический пример реализации слоя-ссылки:

<style type="text/css">#layer1{width: 500px; height: 100px; background: rgb(51,255,204);border:groove;}a {display: block; text-align: center; height: 100%;color: rgb(255,0,51);}</style></head><body><div id="layer1"><a href="https://www.internet-technologies.ru">Ссылка на наш веб-сайт</a> </div></body>

Расположение div по центру и иные тонкости позиционирования
В данном примере при помощи строки display: block мы задали ссылке значение блочного элемента. А чтобы вся высота блока div стала ссылкой, установили height: 100%.

Скрытие и вывод блочных элементов

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

Особенно это касается главной страницы, стоимость размещения рекламы на которой будет самой высокой. Так что и появляется проблема, куда бы «впихнуть» ещё один рекламный баннер. И тут уж выравниванием div по центру страницы никак не отделаешься!

Более рациональным решением будет сделать какой-нибудь блок скрывающимся. Вот простой пример такой реализации:

<style type="text/css">#layer1{display:block;    width: 500px;      height: 100px;      background: rgb(51,255,204);     border:groove;}</style><script type="text/javascript">function show(){     if(layer1=="none")    {        layer1="block";      }    else    {        layer1="none";  } document.getElementById("layer1").style.display=layer1;    }</script> </head> <body> <input type="button" onclick="show()" value="Волшебная кнопка"/><div id="layer1"> <p>Это волшебная кнопка. Нажатие на нее скроет или отобразит скрывающийся блок.</p>    </div> </body>

Расположение 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 в полном объеме удаляет(на время) элемент и может располагать на его месте иные блочные структуры.

Мы с вами рассмотрели все основные слои настоящего веб-сайта. Надеемся, что полученные знания смогут вам «испечь» по-настоящему вкусный ресурс.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *