Верстка шаблонов с помощью тега DIV для начинающих...
Как и перед каждым начинающим веб дизайнером, передо мной встал
вопрос, чем же верстать свои творения, таблицами или боксами? Я решил
приступить к решению этого вопроса логически и прикинул основные плюcы и минусы обоих вариантов: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Верстка</title> </head> <body> </body> </html> Теперь пришла пора прикинуть, какие боксы нам нужны: - Хэдэр (шапка нашего шаблона) - Враппер ("обволакивающий" див - в него помещаются все остальные боксы) - Контейнер (в этом диве будут лежать левая, правая и центральная колонки) - Левый див (левая колонка) - Центральный див (центральная колонка) - Правый див (правая колонка) - Футер (див, замыкающий наш шаблон, в нем обычно прописывается копирайт) Пока хватит. Давайте разместим их на нашей странице. Сначала сделаем враппер и сразу под ним футер, затем в враппер поместим хэдэр и сразу под хэдэром - контейнер, в котором в свою очередь расположим дивы колонок: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Верстка</title> <style type="text/css"> </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> <div id="center"></div> </div> </div> <div id="footer"></div> </body> </html> Как видите, я назначил каждому диву свой идентификатор. Теперь нам нужно позиционировать наши дивы относительно друг друга: <!DOCTYPE html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Верстка</title> <style type="text/css"> #header {height:100px;} #container {min-width:800px;} <!-- указываем минимальную ширину --> #center {margin:0px 200px 0px 200px;} #left {float:left; width:200px;} #right {float:right; width:200px;} #footer {height:100px;} </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> <div id="center"></div> </div> </div> <div id="footer"></div> </body> </html> После установки подобных стилей, наш шаблон приобрел более менее завершенный вид, но это ещё не всё. Обратите внимание: если вы начнете добавлять контент в левую или в правую колонку - она, растягиваясь, проедет над футером. Это происходит от того, что боксы с параметром float:left; или float:right; не растягивают родительский бокс (бокс в котором находятся). Для решения этой проблемы нам нужно добавить в самый низ бокса "контейнер" ещё один пустой бокс с параметром clear:both; и после этого контейнер будет растягиваться при увеличении контента в колонках: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Верстка</title> <style type="text/css"> #header {height:100px;} #container {min-width:800px;} <!-- указываем минимальную ширину --> #center {margin:0px 200px 0px 200px;} #left {float:left; width:200px;} #right {float:right; width:200px;} #footer {height:100px;} .clear {clear:both;} </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> <div id="center"></div> <div class="clear"></div> </div> </div> <div id="footer"></div> </body> </html> Но и это ещё не всё... Приклеиваем футер к нижней границе экрана Часто, когда на странице мало контента, под футером образуется некрасивый пропуск, что может полностью испортить дизайн. Чтобы избежать этого, нам необходимо сначала придать основному диву высоту в 100% относительно высоты окна браузера, а затем сдвинуть его вверх вместе с футером на ширину футера, которую нам нужно точно знать. Сначала установим 100% высоту дива с id=wrapper : <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Верстка</title> <style type="text/css"> /* устанавливаем высоту на 100% */ html, body {height:100%;} #wrapper {height:auto !important;height:100%;min-height:100%;} /* -- -- */ #header {height:100px;} #container {min-width:800px;} /* указываем минимальную ширину */ #center {margin:0px 200px 0px 200px;} #left {float:left; width:200px;} #right {float:right; width:200px;} #footer {height:100px;} .clear {clear:both;} </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> <div id="center"></div> <div class="clear"></div> </div> </div> <div id="footer"></div> </body> </html> А теперь сдвигаем на место уехавший за пределы экрана футер, для этого сдвигаем его вверх на его высоту, а для того чтобы контент не заезжал под футер, установим ещё один пустой див-распорку: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Верстка</title> <style type="text/css"> html, body {height:100%;} #wrapper {height:auto !important;height:100%;min-height:100%;} #header {height:100px;} #container {min-width:800px;} /* указываем минимальную ширину */ #center {margin:0px 200px 0px 200px;} #left {float:left; width:200px;} #right {float:right; width:200px;} #footer {height:100px;margin-top:-100px;} /* добавляем отступ */ .clear {clear:both;} #space {height:100px;} /* стиль распорки */ </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> <div id="center"></div> <div class="clear"></div> <div id="space"></div> <!-- div-распорка --> </div> </div> <div id="footer"></div> </body> </html> Источник: masterdle.ru |
КОНТАКТЫ
г. Екатеринбург info@vismech.ru |
|
текущее: НОВОСТИ 05.12.2013 - Уход за флэш-накопителем 05.12.2013 - Компьютер самопроизвольно выключается 05.12.2013 - Почему не запускается компьютер? 27.11.2013 - Canon Legria HF R406 - Описание видеокамеры 27.11.2013 - TravelMate P645 новый лэптоп бизнес-класса от Acer |
|
