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

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"???

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

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

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