johnluxor Сообщение 12/03/2008 18:31 Копия темы
Поставить по центру (проблема решена) Есть дизайн. общая структура как на картинке.



Подскажите, Не могу сообразить как выставить желтый блок(контент) по центру страницы(ширина его фиксированная – 900px). При этом отступы справа и слева(серые) должны быть одинаковые и правая граница шапки должна совпадать с правой границей контента.



т.е. так сказать чтоб шапка была резиновая, а контент нет.

pavlick Сообщение 12/03/2008 18:33 Копия темы
выставить по центру можно так:
width: 900px;
margin: 0 auto 0 auto;

johnluxor Сообщение 12/03/2008 18:35 Копия темы
Ну это выставиться все по центру, а мне надо, чтобы шапка была прижата к левому краю с шириной – левый отступ(серый)+ширина контента(900px)

т.е. реализовать то что на картинке.

pavlick Сообщение 12/03/2008 18:38 Копия темы
с ходу видится только решение через JS

johnluxor Сообщение 12/03/2008 18:39 Копия темы
Ну вот на JS и сделано, в зависимости от разрешения монитора меняются отступы.

Но надо реализовать с помощью CSS

pritula Сообщение 12/03/2008 18:40 Копия темы
blog.html.it/layoutgala/
даю ссылку больше по памяти. там много способов показано, может, есть нужный

johnluxor Сообщение 12/03/2008 18:45 Копия темы
Спасибо за ссылку, но увы того что мне нужно нет :(

girichev Сообщение 12/03/2008 18:46 Копия темы
Обсуждалось www.free-lance.ru/blogs/v...

denmurz Сообщение 12/03/2008 18:46 Копия темы
эм, я хоть не занимаюсь сайтами, может и ошибусь. Но все же.
Берешь див номер одын (условно главный, равный ширине шапки, незнаю сколько там процентов), делаешь его резиновым. Дальше в этот див шапку шириной 100 процентов и контент по правому краю шириной 900 пикселей. Вот, вроде так.

johnluxor Сообщение 12/03/2008 18:51 Копия темы
Как блокКконтент разместить по центру и так понятно, вопрос стоит как растянуть шапку до нужного размера

denmurz Сообщение 12/03/2008 18:55 Копия темы
я ошибся (:

Black_Bird Сообщение 12/03/2008 18:58 Копия темы
Что-то типа этого bb.v-a-service.com/test.h...

Motiv Сообщение 12/03/2008 19:00 Копия темы
#content {
position:absolute;
top:200px;
left:50%;
margin-left:-450px;
}

#header {
position:absolute;
top:0px;
left:0px;
right:50%+450px;
}

Не проверял, но как-то так. Косяк: IE6 и аньше такое не поймет. СЕйчас еще подумаю, но что-то есть большие сомнения на этот счет

johnluxor Сообщение 12/03/2008 19:02 Копия темы
так и реализовано сейчас на JS, но при разных разрешениях ширина шапки в % разная

johnluxor Сообщение 12/03/2008 19:07 Копия темы
Да практически оно, да не практически а оно и есть, только вот шапка идет одним куском картинки(пейзаж).

Если бы был просто цвет ли просто бэкгроунд то все было бы супер.

Спасибо, моет щас чего нить надумаю.

Black_Bird Сообщение 12/03/2008 19:11 Копия темы
Разбей картинку в шапке на 2 куска и помести левый кусок в фон нижнего слоя (header-yellow) с нужными координатами, чтоб они справа состыковались... Что-нить типа этого...
Или, если не получится, запихай в header-yellow еще 1 блок с маргином справа 450px, вот и будет тебе ровно вторая часть шапки!

Motiv Сообщение 12/03/2008 19:16 Копия темы
Тоесть дальше середины контента активных элементов в шапке не будет? Тогда легко

johnluxor Сообщение 12/03/2008 19:20 Копия темы
Нет проблема в том что картинку совместить не получится.

Black_Bird Сообщение 12/03/2008 19:20 Копия темы
Дальше середины... Какой такой середины?

Motiv Сообщение 12/03/2008 19:21 Копия темы
#header {
position:absolute;
top:0px;
left:0px;
width:50%;
padding-right:450px; // дотягиваем шапку до конца контента
height:200px;
}

#content {
position:absolute;
top:200px;
left:50%;
width:900px;
height:200px; // поделитесь height 100% в xhtml варианте с валидацией =)
margin-left:-450px;
}

johnluxor Сообщение 12/03/2008 19:22 Копия темы
В шапке – примерно 200px занимает область где логотип итд, а слева идет картинка, которая показывается в ширину оставшейся части, а остальное прячется за пределами – ну как бэкгроунд сделан

Black_Bird Сообщение 12/03/2008 19:25 Копия темы
Все замечательно получается... bb.v-a-service.com/test.h...

johnluxor Сообщение 12/03/2008 19:27 Копия темы
То есть шапка выглядит вот так

Black_Bird Сообщение 12/03/2008 19:30 Копия темы
См. ссылку выше! ;)

johnluxor Сообщение 12/03/2008 19:31 Копия темы
Так то да, но справа есть область с логотипом,, которая фиксированная, допустим 200px а уже остальное картинка

johnluxor Сообщение 12/03/2008 19:32 Копия темы
т.е. не ровно на половине

unart Сообщение 12/03/2008 19:34 Копия темы
=))

Motiv Сообщение 12/03/2008 19:35 Копия темы
Ну и в чем проблема? Ладно, сделаем такой вариант
#header {
position:absolute;
top:0px;
left:0px;
width:50%;
padding-right:450px; // дотягиваем шапку до конца контента
height:200px;
}

#content {
position:absolute;
top:200px;
left:50%;
width:900px;
height:200px;
margin-left:-450px;
}

#logo {
position:absolute;
top:-200px;
right:0px;
width:200px; // ставим свое значение
height:200px;
}



Не тестировал, но должно работать=)

johnluxor Сообщение 12/03/2008 19:35 Копия темы
вроде разобрался,

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

Motiv Сообщение 12/03/2008 19:39 Копия темы
теги скушало |div id="header"||/div|
|div id="content"||div id="logo"||/div||/div|
=))))))))))))))))))

johnluxor Сообщение 12/03/2008 19:56 Копия темы
Работает, немного подрихтую и все ок

johnluxor Сообщение 12/03/2008 19:57 Копия темы
Спасибо огромное всем.

Особенно
Андрей ПтиЦын [Black_Bird]
и
Пандабанда_Святой Григорий [Motiv]

Motiv Сообщение 12/03/2008 20:02 Копия темы

Motiv Сообщение 12/03/2008 20:03 Копия темы
В шапке сообщения напиши что проблема решена, чтобы мозг больше не чесали=)