Резиновая html & css верстка блоками
Пример резиновой верстки сайта с помощь блоков:
|
<html> <head> <title>Пример резиновой верстки сайта с помощь блоков</title> <style type="text/css"> div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px} div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left} div.right_col {background-color:#dddddd; height:400px; min-width:380px; max-width:3800px; margin-left:200px; padding-left:20px} </style> </head> <body> <div class="header"><h1 align="center">Верстка сайта</h1></div> <div class="left_col"><p align="center">Меню</p></div> <div class="right_col"> <h2>CSS верстка сайта</h2> <h4>Резиновая верстка блоками</h4> </div> </body> </html> |
Результат:
Мы видим, что правая колонка сползла вниз ⇒ добавим к селектору div.right_col параметр margin-top:-20px.
Атрибуты и значения
-
padding-left: – определяет внутренний отступ слева.
-
margin-top: – определяет внешний отступ сверху.
-
margin-left: – определяет внешний отступ слева.
-
min-width: – определяет минимальную ширину.
-
max-width: – определяет максимальную ширину.
Левая колонка с параметром float:left фактически накрывает собой правую, так как правая не содержит атрибут обтекания. В свою очередь, параметр margin-left:200px определяет отступ правой колонки, поэтому она не перекрывается. Мы не можем задать обтекание для правой колонки, потому что в таком случае будут недействительны min-width и max-width.
Обратите внимание на значение padding, на ширину пунктирной границы, на размеры.
Резиновая + жесткая HTML & CSS верстка блоками
Пример блочной CSS верстки сайта:
|
<html> <head> <title>Пример блочной CSS верстки сайта</title> <style type="text/css"> div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px} div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left; padding:10px} div.right_col {background-color:#dddddd; width:500px; height:400px; float:left; padding:10px; } div.footer {background-color:#717dc9; min-width:600px; max-width:4000px; height:60px; clear:left} </style> </head> <body> <div class="header"><h1 align="center">Верстка сайта</h1></div> <div class="left_col"><p align="center">Меню</p></div> <div class="right_col"> <h2>CSS верстка сайта</h2> <h4>Резиновая верстка блоками</h4> </div> <div class="footer"><p>© 2014</p></div> </body> </html> |
Результат:
Поместим левую и правую колонку в контейнер <div id="block"> </div>. Отцентрируем его с помощью margin:0 auto. Уберем пространство внизу блока параметром margin-bottom:-16px.
|
<html> <head> <title>Пример блочной CSS верстки</title> <style type="text/css"> #block {width:740px; height:420px; margin:0 auto; margin-bottom:-16px} div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px} div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left; padding:10px} div.right_col {background-color:#dddddd; width:500px; height:400px; float:left; padding:10px; } div.footer {background-color:#717dc9; min-width:600px; max-width:4000px; height:60px; clear:left} </style> </head> <body> <div class="header"><h1 align="center">Верстка сайта</h1></div> <div id="block"> <div class="left_col"><p align="center">Меню</p></div> <div class="right_col"> <h2>CSS верстка сайта</h2> <h4>Резиновая верстка блоками</h4> </div> </div> <div class="footer"><p>© 2014</p></div> </body> </html> |
Результат:
Параметр padding:10px прибавляет по 10 пикселей к каждой из сторон, поэтому контейнеру <div id="block"> </div> была задана высота в 420 пикселей, а затем его низ был обрезан на 16 пикселей.
Оказывается не так все и сложно. Идем дальше...