Гумова 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 пікселів.
Виявляється не так все і складно. Йдемо далі...