Создать ответ 
 
Рейтинг темы:
  • Голосов: 16 - Средняя оценка: 2
  • 1
  • 2
  • 3
  • 4
  • 5
Наложение блоков DIV один на другой
Автор Сообщение
Bot82 Не на форуме
Junior Member
**

Сообщений: 8
Зарегистрирован: 16-12-2010
Рейтинг: 0
Сообщение: #1
Наложение блоков DIV один на другой
Здравствуйте, дорогие сайтостроители!

Решил сделать для себя сайт, но возникла одна проблема (пока одна 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"???

Надеюсь все понятно.
Заранее пасиба!
16-12-2010 17:27
Найти все сообщения Цитировать это сообщение
Bot82 Не на форуме
Junior Member
**

Сообщений: 8
Зарегистрирован: 16-12-2010
Рейтинг: 0
Сообщение: #2
RE: Наложение блоков DIV один на другой
Ау, здесь есть кто-нить живой! Помогите пожалуйста. Очень нужно. Знаю что в коде есть ошибка. Проверьте люди знающие!
17-12-2010 14:00
Найти все сообщения Цитировать это сообщение
Brian Не на форуме
Member
***

Сообщений: 182
Зарегистрирован: 08-07-2008
Рейтинг: 7
Сообщение: #3
RE: Наложение блоков DIV один на другой
Лично я таки не понял что конкретно нужно сделать.
Если в коде есть ошибка то может валидатор поможет найти:
http://htmlhelp.com/tools/validator/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/ - на русском
17-12-2010 14:13
Найти все сообщения Цитировать это сообщение
Bot82 Не на форуме
Junior Member
**

Сообщений: 8
Зарегистрирован: 16-12-2010
Рейтинг: 0
Сообщение: #4
RE: Наложение блоков DIV один на другой
(17-12-2010 14:13)Brian писал(а):  Лично я таки не понял что конкретно нужно сделать.
Если в коде есть ошибка то может валидатор поможет найти:
http://htmlhelp.com/tools/validator/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/ - на русском

Так это мне сначало его надо куда-то залить? Где адрес-то я возьму?
17-12-2010 15:18
Найти все сообщения Цитировать это сообщение
Bot82 Не на форуме
Junior Member
**

Сообщений: 8
Зарегистрирован: 16-12-2010
Рейтинг: 0
Сообщение: #5
RE: Наложение блоков DIV один на другой
Бля, извини за тупость! Там мона локальный файл проверить!!! Smile

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

Еще будут какие-нить предложения?
17-12-2010 15:20
Найти все сообщения Цитировать это сообщение
Bot82 Не на форуме
Junior Member
**

Сообщений: 8
Зарегистрирован: 16-12-2010
Рейтинг: 0
Сообщение: #6
RE: Наложение блоков DIV один на другой
Так с расположением блока id="right_menu_bar" разобрался. Я просто вложил его в блок id="center_menu_bar" )))

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

Как сделать что бы он был отпозиционирован абсолютно по оси Y, но при этом менял ширину в зависимости от браузера?!!!
17-12-2010 16:03
Найти все сообщения Цитировать это сообщение
Bot82 Не на форуме
Junior Member
**

Сообщений: 8
Зарегистрирован: 16-12-2010
Рейтинг: 0
Сообщение: #7
RE: Наложение блоков DIV один на другой
Так, теперь я вычитал, что абсолютное позиционирование изымает блок из нормального потока и помещает в указанное нами место. Нормальный поток при этом ничего НЕ ЗНАЕТ о нашем блоке!!! Отсюда вывод: т.к. блок id="menu_bar" отпозиционирован абсолютно, то он не будет растягиваться до величины блока id="h_glass", т.к. тот, в свою очередь, "не знает" о его существовании!!!
Афигеть!!!!
Так как мне сделать, чтобы блок id="menu_bar" слегка налазил на блок id="header" и растягивался по величине браузера при этом??? Люди ПАМАГИТЕ!!!!!!!!!!!!!!!!!!!!!!!!!

На этом форуме вообще есть кто?
17-12-2010 20:15
Найти все сообщения Цитировать это сообщение
Brian Не на форуме
Member
***

Сообщений: 182
Зарегистрирован: 08-07-2008
Рейтинг: 7
Сообщение: #8
RE: Наложение блоков DIV один на другой
А есть пример, на каком нибудь сайте может быть можно посмотреть, что конкретно нужно сделать?
Из скринов ничё не понятно.
17-12-2010 20:21
Найти все сообщения Цитировать это сообщение
Brian Не на форуме
Member
***

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

Так правильно. Тот блок, "не знает" о его существовании, так и можно сделать чтобы блок id="menu_bar" слегка налазил на блок id="header". А чтобы растягивался по величине браузера при этом, то его нада сделать таким же просто как тот блок только отдельно. Ну это насколько я понимаю.
17-12-2010 20:33
Найти все сообщения Цитировать это сообщение
Kolyan Не на форуме
Member
***

Сообщений: 107
Зарегистрирован: 08-07-2008
Рейтинг: 1
Сообщение: #10
RE: Наложение блоков DIV один на другой
Вот тут - http://sitesco.ru/thread-7611-post-8073.html#pid8073 - есть пример кода, по моему идеального трехколоночного макета HTML страницы, причем эта страница "резиновая". Вот здесь - http://sitesco.ru/shablon.html - можно посмотреть. Может из этого макета у вас лучше получится сделать то что вам надо?

Заработок на сайте, Раскрутка сайта
17-12-2010 20:59
Найти все сообщения Цитировать это сообщение
Создать ответ 


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



Пользователи просматривают эту тему: 1 Гость(ей)
Обратная связьSitesCo.ruВернуться к началуВернуться к содержимомуЛёгкий режимСписок RSS