Каскадный режим | Линейный режим

Bot82 · 16-12-2010 17:27

Здравствуйте, дорогие сайтостроители!

Решил сделать для себя сайт, но возникла одна проблема (пока одна Big Grin

). Короче она такова: я использую блочную верстку (лучше бы использовал табличную, ею мне легче, но она здесь не прокатит) и мне необходимо сделать блок под меню и замостить его картинкой по ширине (сайт будет менять свою ширину в зависимости от браузера). Значит вот мой код:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<style>

body, .div{margin:0; padding:0; background:#444444;}

#header_bar{height:75px; max-width:1800px; min-width:900px; margin-left:28px; margin-right:28px; margin-bottom:0px; background:url('head_bar.jpg') center 0px #444444;}

#header{height:474px; min-width:956px; margin-top:58px; padding-left:28px; padding-top:26px; padding-right:28px; padding-bottom:208px; background:url('bg.jpg') center 0 repeat #444444;}

#h_glass{height:477px; max-width:1800px; min-width:900px; border:1px solid #c6e2fa; background:url('glass.jpg') center 0px repeat #444444; border-bottom-left-radius:5px; border-bottom-right-radius:5px; border-top-left-radius:5px; border-top-right-radius:5px;}

#menu_bar{height:55px; max-width:1800px; min-width:900px; margin-left:28px; margin-right:28px;}

#left_menu_bar{height:55px; width:15px; float:left; background:url(left_menu_bar.png) no-repeat;}

#center_menu_bar{height:55px; background:url(center_menu_bar.png) repeat-x;}

#right_menu_bar{height:55px; width:15px; float:right; background:url(right_menu_bar.png) no-repeat;}

#content{height:400px;background:#444444;}

</style>

</head>

<body>

<div id="header_bar" style="position:absolute; top:0px;">

</div>

<div id="header">

    <div id="h_glass">

        <center>Gallery goes here</center>

    </div>

</div>

<div id="menu_bar" style="position:absolute; top:574px;">

    <div id="left_menu_bar"></div>

        <div id="center_menu_bar"></div>

    <div id="right_menu_bar"></div>

</div>

<div id="content">

Content

</div>

</body>

</html>

Здесь блок id="menu_bar" и есть меню. Что я делаю, из-за моего дизайна, мне необходимо позиционировать мое меню "абсолютно". Тогда, почему-то оно маститься только до величины минимума: min-width:900px. Это первый касяк, не знаю как исправить!
Дальше, как видно из кода сам блок id="menu_bar" состоит из трех дочерних блоков. Это потому, что блок id="left_menu_bar" имеет начало картинки, которая отличаеться симметрией от картинки блока id="right_menu_bar". Ну а центральный блок это третья картинка которая повторяеться по оси Х. Вот скрин:

С данным кодом не получаеться отпозиционировать блок id="right_menu_bar", почему-то он получаеться ниже остальных!!! Вот скрин:

Так как мне его выровнять по горизонтали, относительно родительского, и почему ширина меньше чем блок id="h_glass"???

Надеюсь все понятно.
Заранее пасиба!

Bot82 · 17-12-2010 14:00

Ау, здесь есть кто-нить живой! Помогите пожалуйста. Очень нужно. Знаю что в коде есть ошибка. Проверьте люди знающие!

Brian · 17-12-2010 14:13

Лично я таки не понял что конкретно нужно сделать.
Если в коде есть ошибка то может валидатор поможет найти:
http://htmlhelp.com/tools/validator/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/ - на русском

Bot82 · 17-12-2010 15:18

(17-12-2010 14:13)Brian писал(а): Лично я таки не понял что конкретно нужно сделать.
Если в коде есть ошибка то может валидатор поможет найти:
http://htmlhelp.com/tools/validator/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/ - на русском

Так это мне сначало его надо куда-то залить? Где адрес-то я возьму?

Bot82 · 17-12-2010 15:20

Бля, извини за тупость! Там мона локальный файл проверить!!! Smile

Но там хрень каку-то выдает, набор фраз. Мне этого не понять!!

Еще будут какие-нить предложения?

Bot82 · 17-12-2010 16:03

Так с расположением блока id="right_menu_bar" разобрался. Я просто вложил его в блок id="center_menu_bar" )))

Осталось теперь с растягиванием блока id="left_menu_bar"! Я догадываюсь что он не растягиваеться по ширине браузера по причине абсолятного позиционирования. А почему до 900px, так это потому что прописан минимум min-width:900px.

Как сделать что бы он был отпозиционирован абсолютно по оси Y, но при этом менял ширину в зависимости от браузера?!!!

Bot82 · 17-12-2010 20:15

Так, теперь я вычитал, что абсолютное позиционирование изымает блок из нормального потока и помещает в указанное нами место. Нормальный поток при этом ничего НЕ ЗНАЕТ о нашем блоке!!! Отсюда вывод: т.к. блок id="menu_bar" отпозиционирован абсолютно, то он не будет растягиваться до величины блока id="h_glass", т.к. тот, в свою очередь, "не знает" о его существовании!!!
Афигеть!!!!
Так как мне сделать, чтобы блок id="menu_bar" слегка налазил на блок id="header" и растягивался по величине браузера при этом??? Люди ПАМАГИТЕ!!!!!!!!!!!!!!!!!!!!!!!!!

На этом форуме вообще есть кто?

Brian · 17-12-2010 20:21

А есть пример, на каком нибудь сайте может быть можно посмотреть, что конкретно нужно сделать?
Из скринов ничё не понятно.

Brian · 17-12-2010 20:33

(17-12-2010 20:15)Bot82 писал(а): Так, теперь я вычитал, что абсолютное позиционирование изымает блок из нормального потока и помещает в указанное нами место. Нормальный поток при этом ничего НЕ ЗНАЕТ о нашем блоке!!! Отсюда вывод: т.к. блок id="menu_bar" отпозиционирован абсолютно, то он не будет растягиваться до величины блока id="h_glass", т.к. тот, в свою очередь, "не знает" о его существовании!!!
Афигеть!!!!
Так как мне сделать, чтобы блок id="menu_bar" слегка налазил на блок id="header" и растягивался по величине браузера при этом???

Так правильно. Тот блок, "не знает" о его существовании, так и можно сделать чтобы блок id="menu_bar" слегка налазил на блок id="header". А чтобы растягивался по величине браузера при этом, то его нада сделать таким же просто как тот блок только отдельно. Ну это насколько я понимаю.

Kolyan · 17-12-2010 20:59

Вот тут - http://sitesco.ru/thread-7611-post-8073.html#pid8073 - есть пример кода, по моему идеального трехколоночного макета HTML страницы, причем эта страница "резиновая". Вот здесь - http://sitesco.ru/shablon.html - можно посмотреть. Может из этого макета у вас лучше получится сделать то что вам надо?

Похожие темы
Тема:		Автор	Ответов:	Просмотров:	Посл. сообщение
	Наложение двух картинок в background css	Zhur	0	2,288	27-10-2017 11:11 Посл. сообщение: Zhur

Каскадный режим \| Линейный режим Наложение блоков DIV один на другой
Автор	Сообщение