Блочная верстка

36

Redstuff

27 февраля 2011, 09:21

1109

Помогите реализовать верстку на блоках как на картинке, не получается сделать левую и контентную части, чтобы растягивались по высоте. Требуется, чтобы высота левого и правого блоков тянулись по высоте так, чтобы окно браузера было заполнено на 100%, высота футера и хедера заданна.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Âåðñòêà îò AD</title>

<style type="text/css">

html, body {margin:0;height:100%;}

#wrapper {height:auto !important;height:100%;min-height:100%;width:1100px; background: #ff0000; margin: auto;}

#header {height:200px; background: #ffff00;}

#left {float:left;width:200px; background: #0ff0aa; height:100%;}

#right {margin-left:200px; background: #0ff7f0; height:100%;}

#spacer {height:100px;}

#footer {height:100px;margin:-100px auto;; background: #ff00ff; width:1100px; }

.clear {clear:both;}

</style>

</head>

<body>

<div id='wrapper'>

<div id='header'>

<!-- Ñîäåðæèìîå õýäýðà -->

</div>

<div id='container'>

 <div id='left'>

 <!-- Ñîäåðæèìîå ëåâîé êîëîíêè -->

 left

 </div>

 <div id='right'>

 <!-- Ñîäåðæèìîå ïðàâîé êîëîíêè -->

 right

 </div>

</div>

<div class='clear'></div>

<div id='spacer'></div>

</div>

<div id='footer'>

<!-- Ñîäåðæèìîå ôóòåðà -->

</div>

</body>

</html>

jpg div.jpg

Создание сайта под ключ / Дизайн / Верстка /... пишите в ПМ или admin@redstuff.ru

T

67

Toy

27 февраля 2011, 09:47

#1

Есть множество сервисов в сети, которые могут помочь генерировать макет. Например http://www.dynamicdrive.com/style/layouts/category/C9/ (первый который попался). Гуглите по фразу two columns

36

Redstuff

27 февраля 2011, 10:00

#2

Toy:
Есть множество сервисов в сети, которые могут помочь генерировать макет. Например http://www.dynamicdrive.com/style/layouts/category/C9/ (первый который попался). Гуглите по фразу two columns

я над этим уже бьюсь 2й день, все варианты, что находил не подходят и их даже не доработать...

готов заплатить или оставить хороший отзыв(-ы) за готовый код, пишите в аську 569316

Рейтинг организации в Яндекс.Справочнике Как сэкономить 3 000 Яндекс: 301-й редирект полностью

675

vandamme

27 февраля 2011, 10:08

#3

выбрось утот редактор говеный, что на скрине и возьми обычный блокнот или notepad++

36

Redstuff

27 февраля 2011, 10:31

#4

vandamme:
выбрось утот редактор говеный, что на скрине и возьми обычный блокнот или notepad++

давайте Вы не будете говорить, что мне делать и я не скажу Вам куда идти (больше всего не люблю выскочек, которые флудят не по делу)

П.С. наболело

L

181

Locker

27 февраля 2011, 10:36

#5

vandamme дело говорит. Верстать надо ручками в блокноте, а не с помощью программ.

189

LeonCrab

27 февраля 2011, 10:41

#6

Поищите похожий тут: http://blog.html.it/layoutgala/

Помощь в создании сайтов на MODX, Laravel, Slim. В личку. Хостинг, которому я доверяю (https://beget.com/p181956).

36

Redstuff

27 февраля 2011, 11:02

#7

LeonCrab:
Поищите похожий тут: http://blog.html.it/layoutgala/

знаю этот ресурс, нету подходящего

Locker, странно было бы если я верстал ногами, не правда ли и блокнот это тоже программа ;) Вам туда же куда и vandamme ->

AH

96

Andy_ham

27 февраля 2011, 11:08

#8

Одно из готовых решений http://blog.sjinks.pro/css/209-cross-browser-liquid-three-column-layout-full-height/

А вообще надо верстать в notepad++, быстро приходит опыт. :)

Делаю все на Joomla! и для Joomla!

36

Redstuff

27 февраля 2011, 11:51

#9

Уважаемые умники, ок раз уж вы такие крутые "блокноточники", сверстайте требуемый макет, я готов оплатить работу.

ТЗ:

страница фиксированной ширины 1100px;

расположение по центру;

левый блок ширина 200пх;

правый блок ширина 900пх

высота хедера 110пх

высота футера 100пх

высота левого и правого блоков = (100% высота окна браузера)-(высота футера+высота хедера)

цвета блоков должны быть разными

между блоками должна быть линия в 1пх

Redstuff добавил 27.02.2011 в 14:53

П.С. отличительной чертой этого форума неадекватные форумчане? которые еще не соблюдают правил форума и угрожают в личку? xD

Как правильно оптимизировать карточку Как сделать красивое письмо Google допускает разный контент

T

67

Toy

27 февраля 2011, 11:58

#10

Redstuff, обратитесь пожалуйста ко мне, я помогу http://toydestroyer.com/

Что делать, если ваша email-рассылка попала в спам

В 2023 году 36,9% всех DDoS-атак пришлось на сферу финансов