Как в css сделать отступ сверху

Как в css сделать отступ сверху
Как в css сделать отступ сверху
Как в css сделать отступ сверху

Всем привет!
Однажды я подумал: для чего постоянно прописывать один и тот же код для создания каких-либо сайтов, если можно создать заготовки и пользоваться ими. Это, во-первых, ускорит время создания сайтов. Во-вторых, если прописать сразу правильно макет, то ошибки в коде значительно уменьшатся. В-третьих, те, кто пользовался генераторами шаблонов, могут о них забыть.

Итак, существуют резиновые и фиксированные макеты.

 Фиксированные макеты – это когда ширина блоков задается в пикселях (px), а это значит, что размер макета сайта будет фиксированным не зависимо от размера экрана.

Резиновые макеты – это когда ширина блоков задается в процентах (%), а это значит, что макет сайта будет полностью гибким и автоматически подстраиваться под любой размер экрана.

Макет может быть одноколоночным:

Макет одноколоночный

Двухколоночным:

Макет двухколоночный

и трехколоночным:

Макет трехколоночный

Одноколоночные макеты (веб-страницы)

○ Выравниваем блок с контентом по центру экрана.
Пример:

Одноколоночные макеты (веб-страницы)

Такое размещение блока будет полезно и интересно для дизайна:

- сайта-визитки;

- точки входа на сайт или в админ-панель;

- сообщения об отправленном письме и т. д.

Теперь код:

<html> <head> <title>Одноколоночные макеты на BlogGood.ru</title> <style> .blok-center { position: absolute; / Абсолютное позиционирование / width: 600px; / Ширина блока / height: 400px; / Высота блока / margin: auto; / Отступ от блока / top: 0; / Положение блока от верхнего края / bottom: 0; / Положение блока от нижнего края / left: 0; / Положение блока от левого края / right: 0; / Положение блока от правого края / background: #fc0; / Цвет фона блока / border: 1px solid #000; / Рамка блока / padding: 10px; / Отступ внутри блока / overflow: auto; / Полоса прокрутки / } </style> </head> <body> <div class="blok-center"> <form> <p>Ваше имя<br /> <input class="input" name="name" type="text" style="width:60%" /></p> <p>Электронная почта<br /> <input class="input" name="email" type="text" style="width:60%" /></p> <p>Тема сообщения<br /> <input class="input" name="sub" type="text" style="width:60%" /></p> <p>Текст сообщения:<br /><textarea name="body" cols="1" rows="5" style="width:60%" /></textarea></p> <p><input id="submit" value="Отправить" type="submit" /></p> </form> </div> </body> </html>

Результат:

Одноколоночные макеты

○ Макет одной колонки:

Макет одноколоночный

Код:

<html> <head> <title>Макет одной колонки на BLOGGOOD.RU</title> <style> #content { width: 500px; / Ширина блока / margin: 0 auto 50px; / Выравнивание блока по центру / } #footer { position: fixed; / Фиксированное положение футера (подвала)/ left: 0; bottom: 0; / Левый нижний угол / padding: 10px; / Поля вокруг текста / background: #000; / Цвет фона / color: #fff; / Цвет текста / width: 100%; / Ширина слоя / } </style> </head> <body> <div id="content"> Как управлять человечеством? Конечно же, установить законы. А какими бывают законы? Строгими, справедливыми, вечными, а еще … нелепыми! Прочитайте эту интересную статью и узнайте, в каких странах действуют эти нелепые законы. Я также постаралась найти причину возникновения каждого нелепого закона. </div> <div id="footer"> &copy; Костаневич Степан </div> </body> </html>

Результат:

Макет одной колонки

○ Еще один вариант одноколоночного макета:

Макет одной колонки

Код:

<html> <head> <title>одноколоночный макет на блоге BlogGood.ru</title> <style> html,body{margin:0;padding:0} body{font: 76% arial,sans-serif;text-align:center} p{margin:0 10px 10px} a{display:block;color: #981793;padding:10px} div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B} div#container{text-align:left} div#content p{line-height:1.4} div#navigation{background:#B9CAFF} div#extra{background:#FF8539} div#footer{background: #333;color: #FFF} div#footer p{margin:0;padding:5px 10px} div#container{width:700px;margin:0 auto} div#navigation{float:left;width:350px} div#extra{float:right;width:350px} div#footer{clear:both;width:100%} </style> </head> <body> <div id="container"> <div id="header"><h1>BlogGood.ru</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Контент.</strong> Как часто вы задумываетесь над смыслом жизни? А находите ли вы ответ на вопрос «в чем смысл жизни»? Что уже успели сделать за дарованные вам годы жизни? Вот еще один год подходит к концу… Довольны ли вы тем, как вы его прожили? Я очень часто огорчаюсь от того, что за свои годы ничего существенного не достигла. Нет в моей жизни такого поступка, которым действительно можно было бы гордиться. И когда я познакомилась с историей этой маленькой девочки, я до глубины души была впечатлена! Рейчел Беквит – американская девочка из Сиетла, которая родилась в 2002 году. Однажды в церкви, которую посещала ее семья, она узнала, что в Африке каждый день погибает 4,5 тысяч деток от страшных болезней, потому что им приходиться утолять свою жажду водой из грязных луж и зараженных болот. Эта статистика толкнула Рейчел на удивительный поступок. Перед празднованием своего 9-летия она попросила своих родных и близких, чтобы они не тратили деньги ей на игрушки, сладости или другие какие-либо подарки. Вместо этого она призвала их всех пожертвовать эти деньги благотворительной организации Charity Water, которая помогала людям в тех странах, где не хватало питьевой воды. </p> </div> </div> <div id="navigation"> <p><strong>2) Новости.</strong> Как управлять человечеством? Конечно же, установить законы. А какими бывают законы? Строгими, справедливыми, вечными, а еще … нелепыми! Прочитайте эту интересную статью и узнайте, в каких странах действуют эти нелепые законы. Я также постаралась найти причину возникновения каждого нелепого закона. </p> </div> <div id="extra"> <p><strong>3) Меню.</strong> Продолжаем узнавать интересные и невероятные факты. Тем, кто считает, что человеку свойственны пять чувств, спешу сказать, что их уже девять! Если вы интересуетесь интересными фактами о человеческом организме, то эта статья как раз для вас! Узнайте больше о себе и о своих органах чувств.</p> </div> <div id="footer"><p>BlogGood.ru</p></div> </div> </body> </html>

Результат:

Макет одной колонки

Двухколоночные макеты (веб-страницы) Фиксированные макеты

Частенько в сети интернет встречаются  двухколоночные веб-страницы. Это самые распространенные варианты верстки сайтов, так как считаются самыми удобными и для создания. А также они хорошо воспринимаются пользователями. В правой колонке размещается меню, а в левой – контент. Или в правой колонке размещается контент, а в левой – меню.

○ Двухколоночный макет (слева меню, справа контент):

Двухколоночные макеты (веб-страницы)

Теперь код:

<html> <head> <title>Двухколоночный макет на BlogGood.ru</title> <style> body { font: 13pt Arial, Helvetica, sans-serif; / Шрифт теста / background: #e1dfb9; / Цвет фона / } h2 { font-size: 18px; / Размер шрифта в заголовке / color: #080808; / Цвет заголовка / margin-top: 0; / Отступ сверху / } .container { width: 600px; / Ширина слоя / margin: 0 auto; / Выравнивнить весь блок по центру / background: #f0f0f0; / Цвет фона левой колонки / } .header { font-size: 38px; / Размер текста в шапке / text-align: center; / Выравнивание текст шапки по центру / padding: 5px; / Отступы внутри блока шапки / background: #8fa09b; / Цвет фона шапки / color: #fff; / Цвет текста / } .sidebar { margin-top: 10px; width: 110px; / Ширина блока / padding: 0 10px; / Отступы внутри левого блока / float: left; / Обтекание блока по правому краю / } .content { margin-left: 130px; / Отступ слева / padding: 10px; / Отступы внутри правого блока / background: #fff; / Цвет фона правого блока / } .footer { background: #8fa09b; / Цвет фона нижнего блока-подвала / color: #fff; / Цвет текста подвала / padding: 5px; / Отступы внутри блока / clear: left; / Отменяем действие float / } </style> </head> <body> <div class="container"> <div class="header">BLOGGOOD.RU</div> <div class="sidebar"> <p><a href="#">Главная</a></p> <p><a href="#">Интервью</a></p> <p><a href="#">Вопросы</a></p> </div> <div class="content"> <h2>История, которая меня впечатлила…</h2> <p> Как часто вы задумываетесь над смыслом жизни? А находите ли вы ответ на вопрос «в чем смысл жизни»? Что уже успели сделать за дарованные вам годы жизни? Вот еще один год подходит к концу… Довольны ли вы тем, как вы его прожили? Я очень часто огорчаюсь от того, что за свои годы ничего существенного не достигла. Нет в моей жизни такого поступка, которым действительно можно было бы гордиться. И когда я познакомилась с историей этой маленькой девочки, я до глубины души была впечатлена! </p> </div> <div class="footer">&copy; Костаневич Степан - BlogGood.ru</div> </div> </body> </html>

Результат:

Двухколоночные макеты (веб-страницы)

○ Двухколоночный макет (слева контент, справа меню):
Двухколоночный макет

Теперь код:

<html> <head> <title>Двухколоночный макет на BlogGood.ru</title> <style> body { font: 13pt Arial, Helvetica, sans-serif; / Шрифт теста / background: #e1dfb9; / Цвет фона / } h2 { font-size: 18px; / Размер шрифта в заголовке / color: #080808; / Цвет заголовка / margin-top: 0; / Отступ сверху / } .container { width: 600px; / Ширина слоя / margin: 0 auto; / Выравнивнить весь блок по центру / background: #f0f0f0; / Цвет фона левой колонки / } .header { font-size: 38px; / Размер текста в шапке / text-align: center; / Выравнивание текст шапки по центру / padding: 5px; / Отступы внутри блока шапки / background: #8fa09b; / Цвет фона шапки / color: #fff; / Цвет текста / } .sidebar { margin-top: 10px; width: 110px; / Ширина блока / padding: 0 10px; / Отступы внутри левого блока / float: right; / Обтекание блока по левому краю / } .content { margin-right: 130px; / Отступ справа / padding: 10px; / Отступы внутри правого блока / background: #fff; / Цвет фона правого блока / } .footer { background: #8fa09b; / Цвет фона нижнего блока-подвала / color: #fff; / Цвет текста подвала / padding: 5px; / Отступы внутри блока / clear: right; / Отменяем действие float / } </style> </head> <body> <div class="container"> <div class="header">BLOGGOOD.RU</div> <div class="sidebar"> <p><a href="#">Главная</a></p> <p><a href="#">Интервью</a></p> <p><a href="#">Вопросы</a></p> </div> <div class="content"> <h2>История, которая меня впечатлила…</h2> <p> Как часто вы задумываетесь над смыслом жизни? А находите ли вы ответ на вопрос «в чем смысл жизни»? Что уже успели сделать за дарованные вам годы жизни? Вот еще один год подходит к концу… Довольны ли вы тем, как вы его прожили? Я очень часто огорчаюсь от того, что за свои годы ничего существенного не достигла. Нет в моей жизни такого поступка, которым действительно можно было бы гордиться. И когда я познакомилась с историей этой маленькой девочки, я до глубины души была впечатлена! </p> </div> <div class="footer">&copy; Костаневич Степан - BlogGood.ru</div> </div> </body> </html>

Результат:

Двухколоночный макет

Примечание: чтобы поменять местами блоки, достаточно поменять значение в строках 30, 33, 41:

(слева контент, справа меню)

float: right; / Обтекание блока по левому краю /

margin-right: 130px; / Отступ справа /

clear: right; / Отменяем действие float /

(слева меню, справа контент)

float: left; / Обтекание блока по правому краю /

margin-left: 130px; / Отступ слева /

clear: left; / Отменяем действие float /

○ Другие варианты фиксированного макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

Двухколоночный макет

Код:

<html> <head> <title>Двухколоночный макет на BlogGood.ru</title> <style> html,body{margin:0;padding:0} body{font: 76% arial,sans-serif;text-align:center} p{margin:0 10px 10px} a{display:block;color: #981793;padding:10px} div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B} div#container{text-align:left} div#content p{line-height:1.4} div#navigation{background:#B9CAFF} div#extra{background:#FF8539} div#footer{background: #333;color: #FFF} div#footer p{margin:0;padding:5px 10px} div#container{width:700px;margin:0 auto} div#content{float:left;width:500px} div#navigation{float:right;width:200px} div#extra{float:right;clear:right;width:200px} div#footer{clear:both;width:100%} </style> </head> <body> <div id="container"> <div id="header"><h1>BlogGood.ru</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Контент.</strong> Как часто вы задумываетесь над смыслом жизни? А находите ли вы ответ на вопрос «в чем смысл жизни»? Что уже успели сделать за дарованные вам годы жизни? Вот еще один год подходит к концу… Довольны ли вы тем, как вы его прожили? Я очень часто огорчаюсь от того, что за свои годы ничего существенного не достигла. Нет в моей жизни такого поступка, которым действительно можно было бы гордиться. И когда я познакомилась с историей этой маленькой девочки, я до глубины души была впечатлена! Рейчел Беквит – американская девочка из Сиетла, которая родилась в 2002 году. Однажды в церкви, которую посещала ее семья, она узнала, что в Африке каждый день погибает 4,5 тысяч деток от страшных болезней, потому что им приходиться утолять свою жажду водой из грязных луж и зараженных болот. Эта статистика толкнула Рейчел на удивительный поступок. Перед празднованием своего 9-летия она попросила своих родных и близких, чтобы они не тратили деньги ей на игрушки, сладости или другие какие-либо подарки. Вместо этого она призвала их всех пожертвовать эти деньги благотворительной организации Charity Water, которая помогала людям в тех странах, где не хватало питьевой воды. </p> </div> </div> <div id="navigation"> <p><strong>2) Новости.</strong> Как управлять человечеством? Конечно же, установить законы. А какими бывают законы? Строгими, справедливыми, вечными, а еще … нелепыми! Прочитайте эту интересную статью и узнайте, в каких странах действуют эти нелепые законы. Я также постаралась найти причину возникновения каждого нелепого закона. </p> </div> <div id="extra"> <p><strong>3) Меню.</strong> Продолжаем узнавать интересные и невероятные факты. Тем, кто считает, что человеку свойственны пять чувств, спешу сказать, что их уже девять! Если вы интересуетесь интересными фактами о человеческом организме, то эта статья как раз для вас! Узнайте больше о себе и о своих органах чувств.</p> </div> <div id="footer"><p>BlogGood.ru</p></div> </div> </body> </html>

Результат:

Двухколоночный макет на BlogGood.ru

○ Другие варианты фиксированного макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

Двухколоночный макет на BlogGood.ru

Код:

<html> <head> <title>Двухколоночный макет на BlogGood.ru</title> <style> html,body{margin:0;padding:0} body{font: 76% arial,sans-serif;text-align:center} p{margin:0 10px 10px} a{display:block;color: #981793;padding:10px} div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B} div#container{text-align:left} div#content p{line-height:1.4} div#navigation{background:#B9CAFF} div#extra{background:#FF8539} div#footer{background: #333;color: #FFF} div#footer p{margin:0;padding:5px 10px} div#container{width:700px;margin:0 auto} div#content{float:right;width:500px} div#navigation{float:left;width:200px} div#extra{float:left;clear:left;width:200px} div#footer{clear:both;width:100%} </style> </head> <body> <div id="container"> <div id="header"><h1>BlogGood.ru</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Контент.</strong> Как часто вы задумываетесь над смыслом жизни? А находите ли вы ответ на вопрос «в чем смысл жизни»? Что уже успели сделать за дарованные вам годы жизни? Вот еще один год подходит к концу… Довольны ли вы тем, как вы его прожили? Я очень часто огорчаюсь от того, что за свои годы ничего существенного не достигла. Нет в моей жизни такого поступка, которым действительно можно было бы гордиться. И когда я познакомилась с историей этой маленькой девочки, я до глубины души была впечатлена! Рейчел Беквит – американская девочка из Сиетла, которая родилась в 2002 году. Однажды в церкви, которую посещала ее семья, она узнала, что в Африке каждый день погибает 4,5 тысяч деток от страшных болезней, потому что им приходиться утолять свою жажду водой из грязных луж и зараженных болот. Эта статистика толкнула Рейчел на удивительный поступок. Перед празднованием своего 9-летия она попросила своих родных и близких, чтобы они не тратили деньги ей на игрушки, сладости или другие какие-либо подарки. Вместо этого она призвала их всех пожертвовать эти деньги благотворительной организации Charity Water, которая помогала людям в тех странах, где не хватало питьевой воды. </p> </div> </div> <div id="navigation"> <p><strong>2) Новости.</strong> Как управлять человечеством? Конечно же, установить законы. А какими бывают законы? Строгими, справедливыми, вечными, а еще … нелепыми! Прочитайте эту интересную статью и узнайте, в каких странах действуют эти нелепые законы. Я также постаралась найти причину возникновения каждого нелепого закона. </p> </div> <div id="extra"> <p><strong>3) Меню.</strong> Продолжаем узнавать интересные и невероятные факты. Тем, кто считает, что человеку свойственны пять чувств, спешу сказать, что их уже девять! Если вы интересуетесь интересными фактами о человеческом организме, то эта статья как раз для вас! Узнайте больше о себе и о своих органах чувств.</p> </div> <div id="footer"><p>BlogGood.ru</p></div> </div> </body> </html>

Результат:

Двухколоночный макет на BlogGood.ru

Резиновый двухколоночный макет

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

○ Резиновый двухколоночный макет (слева меню, справа контент):

Резиновый двухколоночный макет

Теперь код:

<html> <head> <title>Резиновый двухколоночный макет на BlogGood.ru</title> <style> body { font: 14px Arial, Helvetica, sans-serif; / Рубленый шрифт текста / margin: 0; / Отступы на странице / } h1 { font-size: 36px; / Размер шрифта заголовка шапки / margin: 0; / Убираем отступы / color: #fc6; / Цвет текста заголовка шапки / } h2 { margin-top: 0; / Убираем отступ сверху / } .header { background: #0080c0; / Цвет фона шапки / padding: 10px; / Поля вокруг текста / } .sidebar { float: left; / Обтекание справа / border: 1px solid #333; / Рамка левого меню / width: 20%; / Ширина левой колонки / padding: 5px; / Поля внутри блока / margin: 10px 10px 20px 5px; / Значения отступа от блока / } .content { margin: 10px 5px 20px 25%; / Значения отступа от левого блока / padding: 5px; / Поля внутри блока / border: 1px solid #333; / Рамка контента / } .footer { background: #333; / Цвет фона подвал (футера) / padding: 5px; / Поля внутри блока / color: #fff; / Цвет текста футера / clear: left; / Отменяем действие float / } </style> </head> <body> <div class="header"><h1>Блог BlogGood.ru</h1></div> <div class="sidebar"> <p><a href="#">Главная</a></p> <p><a href="#">Интервью</a></p> <p><a href="#">Вопросы</a></p> </div> <div class="content"> <h2>История, которая меня впечатлила…</h2> <p> Как часто вы задумываетесь над смыслом жизни? А находите ли вы ответ на вопрос «в чем смысл жизни»? Что уже успели сделать за дарованные вам годы жизни? Вот еще один год подходит к концу… Довольны ли вы тем, как вы его прожили? Я очень часто огорчаюсь от того, что за свои годы ничего существенного не достигла. Нет в моей жизни такого поступка, которым действительно можно было бы гордиться. И когда я познакомилась с историей этой маленькой девочки, я до глубины души была впечатлена! </p> </div> <div class="footer">&copy; Костаневич Степан</div> </body> </html>

Результат:

Резиновый двухколоночный макет

 

 

 

○ Резиновый двухколоночный макет (справа меню, слева контент):

Резиновый двухколоночный макет

Чтобы поменять местами меню с контентом (справа меню, слева контент), достаточно в строке 22 (.sidebar) исправить значение leftна right:

float: right; / Обтекание справа /

и в строке 29 (.content) заменить числовое значение 10px 5px 20px 25% на 10px 25% 20px 5px

margin: 10px 25% 20px 5px; / Значения отступа от правого блока /

<html> <head> <title>Резиновый двухколоночный макет на BlogGood.ru</title> <style> body { font: 14px Arial, Helvetica, sans-serif; / Рубленый шрифт текста / margin: 0; / Отступы на странице / } h1 { font-size: 36px; / Размер шрифта заголовка шапки / margin: 0; / Убираем отступы / color: #fc6; / Цвет текста заголовка шапки / } h2 { margin-top: 0; / Убираем отступ сверху / } .header { background: #0080c0; / Цвет фона шапки / padding: 10px; / Поля вокруг текста / } .sidebar { float: right; / Обтекание справа / border: 1px solid #333; / Рамка левого меню / width: 20%; / Ширина левой колонки / padding: 5px; / Поля внутри блока / margin: 10px 10px 20px 5px; / Значения отступа от блока / } .content { margin: 10px 25% 20px 5px; / Значения отступа от правого блока / padding: 5px; / Поля внутри блока / border: 1px solid #333; / Рамка контента / } .footer { background: #333; / Цвет фона подвал (футера) / padding: 5px; / Поля внутри блока / color: #fff; / Цвет текста футера / clear: left; / Отменяем действие float / } </style> </head> <body> <div class="header"><h1>Блог BlogGood.ru</h1></div> <div class="sidebar"> <p><a href="#">Главная</a></p> <p><a href="#">Интервью</a></p> <p><a href="#">Вопросы</a></p> </div> <div class="content"> <h2>История, которая меня впечатлила…</h2> <p> Как часто вы задумываетесь над смыслом жизни? А находите ли вы ответ на вопрос «в чем смысл жизни»? Что уже успели сделать за дарованные вам годы жизни? Вот еще один год подходит к концу… Довольны ли вы тем, как вы его прожили? Я очень часто огорчаюсь от того, что за свои годы ничего существенного не достигла. Нет в моей жизни такого поступка, которым действительно можно было бы гордиться. И когда я познакомилась с историей этой маленькой девочки, я до глубины души была впечатлена! </p> </div> <div class="footer">&copy; Костаневич Степан</div> </body> </html>

Результат:

Резиновый двухколоночный макет

○ Другие варианты резинового макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

резиновый макет в две колонки

Код:

<html> <head> <title>Двухколоночный резиновый макет на BlogGood.ru</title> <style> html,body{margin:0;padding:0} body{font: 76% arial,sans-serif} p{margin:0 10px 10px} a{display:block;color: #981793;padding:10px} div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B} div#content p{line-height:1.4} div#navigation{background:#B9CAFF} div#extra{background:#FF8539} div#footer{background: #333;color: #FFF} div#footer p{margin:0;padding:5px 10px} div#wrapper{float:left;width:100%;margin-left:-200px} div#content{margin-left:200px} div#navigation{float:right;width:200px} div#extra{float:right;clear:right;width:200px} div#footer{clear:both;width:100%} </style> </head> <body> <div id="container"> <div id="header"><h1>BlogGood.ru</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Контент.</strong> Как часто вы задумываетесь над смыслом жизни? А находите ли вы ответ на вопрос «в чем смысл жизни»? Что уже успели сделать за дарованные вам годы жизни? Вот еще один год подходит к концу… Довольны ли вы тем, как вы его прожили? Я очень часто огорчаюсь от того, что за свои годы ничего существенного не достигла. Нет в моей жизни такого поступка, которым действительно можно было бы гордиться. И когда я познакомилась с историей этой маленькой девочки, я до глубины души была впечатлена! Рейчел Беквит – американская девочка из Сиетла, которая родилась в 2002 году. Однажды в церкви, которую посещала ее семья, она узнала, что в Африке каждый день погибает 4,5 тысяч деток от страшных болезней, потому что им приходиться утолять свою жажду водой из грязных луж и зараженных болот. Эта статистика толкнула Рейчел на удивительный поступок. Перед празднованием своего 9-летия она попросила своих родных и близких, чтобы они не тратили деньги ей на игрушки, сладости или другие какие-либо подарки. Вместо этого она призвала их всех пожертвовать эти деньги благотворительной организации Charity Water, которая помогала людям в тех странах, где не хватало питьевой воды. </p> </div> </div> <div id="navigation"> <p><strong>2) Новости.</strong> Как управлять человечеством? Конечно же, установить законы. А какими бывают законы? Строгими, справедливыми, вечными, а еще … нелепыми! Прочитайте эту интересную статью и узнайте, в каких странах действуют эти нелепые законы. Я также постаралась найти причину возникновения каждого нелепого закона. </p> </div> <div id="extra"> <p><strong>3) Меню.</strong> Продолжаем узнавать интересные и невероятные факты. Тем, кто считает, что человеку свойственны пять чувств, спешу сказать, что их уже девять! Если вы интересуетесь интересными фактами о человеческом организме, то эта статья как раз для вас! Узнайте больше о себе и о своих органах чувств.</p> </div> <div id="footer"><p>BlogGood.ru</p></div> </div> </body> </html>

Результат:

Двухколоночный резиновый макет на BlogGood.ru

○ Другие варианты резинового макета в две колонки. С левой стороны первый блок – это контент, с правой стороны второй блок – новости и под ними меню:

резиновый макет в две колонки

Код:

<html> <head> <title>Двухколоночный резиновый макет на BlogGood.ru</title> <style> html,body{margin:0;padding:0} body{font: 76% arial,sans-serif} p{margin:0 10px 10px} a{display:block;color: #981793;padding:10px} div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B} div#content p{line-height:1.4} div#navigation{background:#B9CAFF} div#extra{background:#FF8539} div#footer{background: #333;color: #FFF} div#footer p{margin:0;padding:5px 10px} div#wrapper{float:right;width:100%;margin-left:-200px} div#content{margin-left:200px} div#navigation{float:left;width:200px} div#extra{float:left;clear:left;width:200px} div#footer{clear:both;width:100%} </style> </head> <body> <div id="container"> <div id="header"><h1>BlogGood.ru</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Контент.</strong> Как часто вы задумываетесь над смыслом жизни? А находите ли вы ответ на вопрос «в чем смысл жизни»? Что уже успели сделать за дарованные вам годы жизни? Вот еще один год подходит к концу… Довольны ли вы тем, как вы его прожили? Я очень часто огорчаюсь от того, что за свои годы ничего существенного не достигла. Нет в моей жизни такого поступка, которым действительно можно было бы гордиться. И когда я познакомилась с историей этой маленькой девочки, я до глубины души была впечатлена! Рейчел Беквит – американская девочка из Сиетла, которая родилась в 2002 году. Однажды в церкви, которую посещала ее семья, она узнала, что в Африке каждый день погибает 4,5 тысяч деток от страшных болезней, потому что им приходиться утолять свою жажду водой из грязных луж и зараженных болот. Эта статистика толкнула Рейчел на удивительный поступок. Перед празднованием своего 9-летия она попросила своих родных и близких, чтобы они не тратили деньги ей на игрушки, сладости или другие какие-либо подарки. Вместо этого она призвала их всех пожертвовать эти деньги благотворительной организации Charity Water, которая помогала людям в тех странах, где не хватало питьевой воды. </p> </div> </div> <div id="navigation"> <p><strong>2) Новости.</strong> Как управлять человечеством? Конечно же, установить законы. А какими бывают законы? Строгими, справедливыми, вечными, а еще … нелепыми! Прочитайте эту интересную статью и узнайте, в каких странах действуют эти нелепые законы. Я также постаралась найти причину возникновения каждого нелепого закона. </p> </div> <div id="extra"> <p><strong>3) Меню.</strong> Продолжаем узнавать интересные и невероятные факты. Тем, кто считает, что человеку свойственны пять чувств, спешу сказать, что их уже девять! Если вы интересуетесь интересными фактами о человеческом организме, то эта статья как раз для вас! Узнайте больше о себе и о своих органах чувств.</p> </div> <div id="footer"><p>BlogGood.ru</p></div> </div> </body> </html>

Результат:

резиновый макет в две колонки

Триколоночные макеты (веб-страницы) Фиксированный макет в три колонки

Частенько макет как в три колонки используют для создания блога.

○ В первой колонке размещается контент, во второй колонке может находиться реклама или новости и в третей колонке меню:

Триколоночные макеты (веб-страницы)

Код:

<html> <head> <title>Фиксированный макет в три колонки на блоге BlogGood.ru</title> <style> html,body{margin:0;padding:0} body{font: 76% arial,sans-serif;text-align:center} p{margin:0 10px 10px} a{display:block;color: #981793;padding:10px} div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B} div#container{text-align:left} div#content p{line-height:1.4} div#navigation{background:#B9CAFF} div#extra{background:#FF8539} div#footer{background: #333;color: #FFF} div#footer p{margin:0;padding:5px 10px} div#container{width:700px;margin:0 auto} div#wrapper{float:left;width:100%} div#content{margin-right: 300px} div#navigation{float:left;width:150px;margin-left:-300px} div#extra{float:left;width:150px;margin-left:-150px} div#footer{clear:left;width:100%} </style> </head> <body> <div id="container"> <div id="header"><h1>BlogGood.ru</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Контент.</strong> Как часто вы задумываетесь над смыслом жизни? А находите ли вы ответ на вопрос «в чем смысл жизни»? Что уже успели сделать за дарованные вам годы жизни? Вот еще один год подходит к концу… Довольны ли вы тем, как вы его прожили? Я очень часто огорчаюсь от того, что за свои годы ничего существенного не достигла. Нет в моей жизни такого поступка, которым действительно можно было бы гордиться. И когда я познакомилась с историей этой маленькой девочки, я до глубины души была впечатлена! Рейчел Беквит – американская девочка из Сиетла, которая родилась в 2002 году. Однажды в церкви, которую посещала ее семья, она узнала, что в Африке каждый день погибает 4,5 тысяч деток от страшных болезней, потому что им приходиться утолять свою жажду водой из грязных луж и зараженных болот. Эта статистика толкнула Рейчел на удивительный поступок. Перед празднованием своего 9-летия она попросила своих родных и близких, чтобы они не тратили деньги ей на игрушки, сладости или другие какие-либо подарки. Вместо этого она призвала их всех пожертвовать эти деньги благотворительной организации Charity Water, которая помогала людям в тех странах, где не хватало питьевой воды. </p> </div> </div> <div id="navigation"> <p><strong>2) Новости.</strong> Как управлять человечеством? Конечно же, установить законы. А какими бывают законы? Строгими, справедливыми, вечными, а еще … нелепыми! Прочитайте эту интересную статью и узнайте, в каких странах действуют эти нелепые законы. Я также постаралась найти причину возникновения каждого нелепого закона. </p> </div> <div id="extra"> <p><strong>3) Меню.</strong> Продолжаем узнавать интересные и невероятные факты. Тем, кто считает, что человеку свойственны пять чувств, спешу сказать, что их уже девять! Если вы интересуетесь интересными фактами о человеческом организме, то эта статья как раз для вас! Узнайте больше о себе и о своих органах чувств.</p> </div> <div id="footer"><p>BlogGood.ru</p></div> </div> </body> </html>

Результат:

Триколоночные макеты (веб-страницы)

○ Следующий вариант фиксированного трехблочного макета, когда в первой колонке размещается меню, во второй колонке может находиться реклама или новости и в третей колонке контент:

Триколоночные макеты (веб-страницы)

Код:

<html> <head> <title>Фиксированный макет в три колонки на блоге BlogGood.ru</title> <style> html,body{margin:0;padding:0} body{font: 76% arial,sans-serif;text-align:center} p{margin:0 10px 10px} a{display:block;color: #981793;padding:10px} div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B} div#container{text-align:left} div#content p{line-height:1.4} div#navigation{background:#B9CAFF} div#extra{background:#FF8539} div#footer{background: #333;color: #FFF} div#footer p{margin:0;padding:5px 10px} div#container{width:700px;margin:0 auto} div#wrapper{float:left;width:100%} div#content{margin-left: 300px} div#navigation{float:left;width:150px;margin-left:-700px} div#extra{float:left;width:150px;margin-left:-550px} div#footer{clear:left;width:100%} </style> </head> <body> <div id="container"> <div id="header"><h1>BlogGood.ru</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Контент.</strong> Как часто вы задумываетесь над смыслом жизни? А находите ли вы ответ на вопрос «в чем смысл жизни»? Что уже успели сделать за дарованные вам годы жизни? Вот еще один год подходит к концу… Довольны ли вы тем, как вы его прожили? Я очень часто огорчаюсь от того, что за свои годы ничего существенного не достигла. Нет в моей жизни такого поступка, которым действительно можно было бы гордиться. И когда я познакомилась с историей этой маленькой девочки, я до глубины души была впечатлена! Рейчел Беквит – американская девочка из Сиетла, которая родилась в 2002 году. Однажды в церкви, которую посещала ее семья, она узнала, что в Африке каждый день погибает 4,5 тысяч деток от страшных болезней, потому что им приходиться утолять свою жажду водой из грязных луж и зараженных болот. Эта статистика толкнула Рейчел на удивительный поступок. Перед празднованием своего 9-летия она попросила своих родных и близких, чтобы они не тратили деньги ей на игрушки, сладости или другие какие-либо подарки. Вместо этого она призвала их всех пожертвовать эти деньги благотворительной организации Charity Water, которая помогала людям в тех странах, где не хватало питьевой воды. </p> </div> </div> <div id="navigation"> <p><strong>2) Новости.</strong> Как управлять человечеством? Конечно же, установить законы. А какими бывают законы? Строгими, справедливыми, вечными, а еще … нелепыми! Прочитайте эту интересную статью и узнайте, в каких странах действуют эти нелепые законы. Я также постаралась найти причину возникновения каждого нелепого закона. </p> </div> <div id="extra"> <p><strong>3) Меню.</strong> Продолжаем узнавать интересные и невероятные факты. Тем, кто считает, что человеку свойственны пять чувств, спешу сказать, что их уже девять! Если вы интересуетесь интересными фактами о человеческом организме, то эта статья как раз для вас! Узнайте больше о себе и о своих органах чувств.</p> </div> <div id="footer"><p>BlogGood.ru</p></div> </div> </body> </html>

Результат:

Триколоночные макеты (веб-страницы)

○ Следующий самый распространенный вариант фиксированного трехблочного макета, когда в первой колонке размещается меню, во второй колонке может находиться контент и в третьей колонке реклама или новости:

Триколоночные макеты (веб-страницы)

Код:

<html> <head> <title>Фиксированный макет в три колонки на блоге BlogGood.ru</title> <style> html,body{margin:0;padding:0} body{font: 76% arial,sans-serif;text-align:center} p{margin:0 10px 10px} a{display:block;color: #981793;padding:10px} div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B} div#container{text-align:left} div#content p{line-height:1.4} div#navigation{background:#B9CAFF} div#extra{background:#FF8539} div#footer{background: #333;color: #FFF} div#footer p{margin:0;padding:5px 10px} div#container{width:700px;margin:0 auto} div#wrapper{float:left;width:100%} div#content{margin: 0 150px} div#navigation{float:left;width:150px;margin-left:-700px} div#extra{float:left;width:150px;margin-left:-150px} div#footer{clear:left;width:100%} rgin-left:-550px} div#footer{clear:left;width:100%} </style> </head> <body> <div id="container"> <div id="header"><h1>BlogGood.ru</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Контент.</strong> Как часто вы задумываетесь над смыслом жизни? А находите ли вы ответ на вопрос «в чем смысл жизни»? Что уже успели сделать за дарованные вам годы жизни? Вот еще один год подходит к концу… Довольны ли вы тем, как вы его прожили? Я очень часто огорчаюсь от того, что за свои годы ничего существенного не достигла. Нет в моей жизни такого поступка, которым действительно можно было бы гордиться. И когда я познакомилась с историей этой маленькой девочки, я до глубины души была впечатлена! Рейчел Беквит – американская девочка из Сиетла, которая родилась в 2002 году. Однажды в церкви, которую посещала ее семья, она узнала, что в Африке каждый день погибает 4,5 тысяч деток от страшных болезней, потому что им приходиться утолять свою жажду водой из грязных луж и зараженных болот. Эта статистика толкнула Рейчел на удивительный поступок. Перед празднованием своего 9-летия она попросила своих родных и близких, чтобы они не тратили деньги ей на игрушки, сладости или другие какие-либо подарки. Вместо этого она призвала их всех пожертвовать эти деньги благотворительной организации Charity Water, которая помогала людям в тех странах, где не хватало питьевой воды. </p> </div> </div> <div id="navigation"> <p><strong>2) Новости.</strong> Как управлять человечеством? Конечно же, установить законы. А какими бывают законы? Строгими, справедливыми, вечными, а еще … нелепыми! Прочитайте эту интересную статью и узнайте, в каких странах действуют эти нелепые законы. Я также постаралась найти причину возникновения каждого нелепого закона. </p> </div> <div id="extra"> <p><strong>3) Меню.</strong> Продолжаем узнавать интересные и невероятные факты. Тем, кто считает, что человеку свойственны пять чувств, спешу сказать, что их уже девять! Если вы интересуетесь интересными фактами о человеческом организме, то эта статья как раз для вас! Узнайте больше о себе и о своих органах чувств.</p> </div> <div id="footer"><p>BlogGood.ru</p></div> </div> </body> </html>

Результат:

Триколоночные макеты (веб-страницы)

Резиновый макет в три колонки

Резиновый макет в три колонки

○ В первой колонке размещается контент, во второй колонке может находиться реклама или новости и в третьей колонке меню.

Код:

<html> <head> <title>Резиновый макет в три колонки на блоге BlogGood.ru</title> <style> html,body{margin:0;padding:0} body{font: 76% arial,sans-serif} p{margin:0 10px 10px} a{display:block;color: #981793;padding:10px} div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B} div#content p{line-height:1.4} div#navigation{background:#B9CAFF} div#extra{background:#FF8539} div#footer{background: #333;color: #FFF} div#footer p{margin:0;padding:5px 10px} div#wrapper{float:left;width:100%} div#content{margin-right: 50%} div#navigation{float:left;width:25%;margin-left:-50%} div#extra{float:left;width:25%;margin-left:-25%} div#footer{clear:left;width:100%} </style> </head> <body> <div id="container"> <div id="header"><h1>BlogGood.ru</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Контент.</strong> Как часто вы задумываетесь над смыслом жизни? А находите ли вы ответ на вопрос «в чем смысл жизни»? Что уже успели сделать за дарованные вам годы жизни? Вот еще один год подходит к концу… Довольны ли вы тем, как вы его прожили? Я очень часто огорчаюсь от того, что за свои годы ничего существенного не достигла. Нет в моей жизни такого поступка, которым действительно можно было бы гордиться. И когда я познакомилась с историей этой маленькой девочки, я до глубины души была впечатлена! Рейчел Беквит – американская девочка из Сиетла, которая родилась в 2002 году. Однажды в церкви, которую посещала ее семья, она узнала, что в Африке каждый день погибает 4,5 тысяч деток от страшных болезней, потому что им приходиться утолять свою жажду водой из грязных луж и зараженных болот. Эта статистика толкнула Рейчел на удивительный поступок. Перед празднованием своего 9-летия она попросила своих родных и близких, чтобы они не тратили деньги ей на игрушки, сладости или другие какие-либо подарки. Вместо этого она призвала их всех пожертвовать эти деньги благотворительной организации Charity Water, которая помогала людям в тех странах, где не хватало питьевой воды. </p> </div> </div> <div id="navigation"> <p><strong>2) Новости.</strong> Как управлять человечеством? Конечно же, установить законы. А какими бывают законы? Строгими, справедливыми, вечными, а еще … нелепыми! Прочитайте эту интересную статью и узнайте, в каких странах действуют эти нелепые законы. Я также постаралась найти причину возникновения каждого нелепого закона. </p> </div> <div id="extra"> <p><strong>3) Меню.</strong> Продолжаем узнавать интересные и невероятные факты. Тем, кто считает, что человеку свойственны пять чувств, спешу сказать, что их уже девять! Если вы интересуетесь интересными фактами о человеческом организме, то эта статья как раз для вас! Узнайте больше о себе и о своих органах чувств.</p> </div> <div id="footer"><p>BlogGood.ru</p></div> </div> </body> </html>

Результат:

Резиновый макет в три колонки на блоге BlogGood.ru

○ Следующий вариант резинового трехблочного макета, когда в первой колонке размещается меню, во второй колонке может находиться реклама или новости и в третьей колонке контент.

Резиновый макет в три колонки на блоге BlogGood.ru

Код:

<html> <head> <title>Резиновый макет в три колонки на блоге BlogGood.ru</title> <style> html,body{margin:0;padding:0} body{font: 76% arial,sans-serif} p{margin:0 10px 10px} a{display:block;color: #981793;padding:10px} div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B} div#content p{line-height:1.4} div#navigation{background:#B9CAFF} div#extra{background:#FF8539} div#footer{background: #333;color: #FFF} div#footer p{margin:0;padding:5px 10px} div#wrapper{float:left;width:100%} div#content{margin-left: 50%} div#navigation{float:left;width:25%;margin-left:-100%} div#extra{float:left;width:25%;margin-left:-75%} div#footer{clear:left;width:100%} </style> </head> <body> <div id="container"> <div id="header"><h1>BlogGood.ru</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Контент.</strong> Как часто вы задумываетесь над смыслом жизни? А находите ли вы ответ на вопрос «в чем смысл жизни»? Что уже успели сделать за дарованные вам годы жизни? Вот еще один год подходит к концу… Довольны ли вы тем, как вы его прожили? Я очень часто огорчаюсь от того, что за свои годы ничего существенного не достигла. Нет в моей жизни такого поступка, которым действительно можно было бы гордиться. И когда я познакомилась с историей этой маленькой девочки, я до глубины души была впечатлена! Рейчел Беквит – американская девочка из Сиетла, которая родилась в 2002 году. Однажды в церкви, которую посещала ее семья, она узнала, что в Африке каждый день погибает 4,5 тысяч деток от страшных болезней, потому что им приходиться утолять свою жажду водой из грязных луж и зараженных болот. Эта статистика толкнула Рейчел на удивительный поступок. Перед празднованием своего 9-летия она попросила своих родных и близких, чтобы они не тратили деньги ей на игрушки, сладости или другие какие-либо подарки. Вместо этого она призвала их всех пожертвовать эти деньги благотворительной организации Charity Water, которая помогала людям в тех странах, где не хватало питьевой воды. </p> </div> </div> <div id="navigation"> <p><strong>2) Новости.</strong> Как управлять человечеством? Конечно же, установить законы. А какими бывают законы? Строгими, справедливыми, вечными, а еще … нелепыми! Прочитайте эту интересную статью и узнайте, в каких странах действуют эти нелепые законы. Я также постаралась найти причину возникновения каждого нелепого закона. </p> </div> <div id="extra"> <p><strong>3) Меню.</strong> Продолжаем узнавать интересные и невероятные факты. Тем, кто считает, что человеку свойственны пять чувств, спешу сказать, что их уже девять! Если вы интересуетесь интересными фактами о человеческом организме, то эта статья как раз для вас! Узнайте больше о себе и о своих органах чувств.</p> </div> <div id="footer"><p>BlogGood.ru</p></div> </div> </body> </html>

Результат:

Резиновый макет в три колонки на блоге BlogGood.ru

○ Следующий самый распространенный вариант резинового трехблочного макета, когда в первой колонке размещается меню, во второй колонке может находиться контент и в третьей колонке может находиться реклама или новости:

Резиновый макет в три колонки на блоге BlogGood.ru

Код:

<html> <head> <title>Резиновый макет в три колонки на блоге BlogGood.ru</title> <style> html,body{margin:0;padding:0} body{font: 76% arial,sans-serif} p{margin:0 10px 10px} a{display:block;color: #981793;padding:10px} div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B} div#content p{line-height:1.4} div#navigation{background:#B9CAFF} div#extra{background:#FF8539} div#footer{background: #333;color: #FFF} div#footer p{margin:0;padding:5px 10px} div#footer a{display:inline;padding:0;color: #C6D5FD} div#wrapper{float:left;width:100%} div#content{margin: 0 25%} div#navigation{float:left;width:25%;margin-left:-25%} div#extra{float:left;width:25%;margin-left:-100%} div#footer{clear:left;width:100%} </style> </head> <body> <div id="container"> <div id="header"><h1>BlogGood.ru</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Контент.</strong> Как часто вы задумываетесь над смыслом жизни? А находите ли вы ответ на вопрос «в чем смысл жизни»? Что уже успели сделать за дарованные вам годы жизни? Вот еще один год подходит к концу… Довольны ли вы тем, как вы его прожили? Я очень часто огорчаюсь от того, что за свои годы ничего существенного не достигла. Нет в моей жизни такого поступка, которым действительно можно было бы гордиться. И когда я познакомилась с историей этой маленькой девочки, я до глубины души была впечатлена! Рейчел Беквит – американская девочка из Сиетла, которая родилась в 2002 году. Однажды в церкви, которую посещала ее семья, она узнала, что в Африке каждый день погибает 4,5 тысяч деток от страшных болезней, потому что им приходиться утолять свою жажду водой из грязных луж и зараженных болот. Эта статистика толкнула Рейчел на удивительный поступок. Перед празднованием своего 9-летия она попросила своих родных и близких, чтобы они не тратили деньги ей на игрушки, сладости или другие какие-либо подарки. Вместо этого она призвала их всех пожертвовать эти деньги благотворительной организации Charity Water, которая помогала людям в тех странах, где не хватало питьевой воды. </p> </div> </div> <div id="navigation"> <p><strong>2) Новости.</strong> Как управлять человечеством? Конечно же, установить законы. А какими бывают законы? Строгими, справедливыми, вечными, а еще … нелепыми! Прочитайте эту интересную статью и узнайте, в каких странах действуют эти нелепые законы. Я также постаралась найти причину возникновения каждого нелепого закона. </p> </div> <div id="extra"> <p><strong>3) Меню.</strong> Продолжаем узнавать интересные и невероятные факты. Тем, кто считает, что человеку свойственны пять чувств, спешу сказать, что их уже девять! Если вы интересуетесь интересными фактами о человеческом организме, то эта статья как раз для вас! Узнайте больше о себе и о своих органах чувств.</p> </div> <div id="footer"><p>BlogGood.ru</p></div> </div> </body> </html>

Результат:

Резиновый макет в три колонки на блоге BlogGood.ru

Постараюсь в следующей статье написать свои собственные макеты, может, мои решения вам покажутся лучше.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓ Последние новости категории: Похожие статьи Популярные статьи: Добавить комментарий

Метки: css, html, Дизайн и верстка

Как в css сделать отступ сверху Как в css сделать отступ сверху Как в css сделать отступ сверху Как в css сделать отступ сверху Как в css сделать отступ сверху

Лучшие статьи:



Шерстяные истории вязание тапочек

Праздничные открытки юбилей школы

Поделка из бытового материала

Схема вязаной кофты с открытыми плечами спицами

Как сделать форму торта украшения