|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
08.12.2010, 04:49 | #1 |
Регистрация: 22.01.2010
Сообщений: 9
|
Div-овая верска тянущаяся по вертикали
Собственно столкнулся с довольно тривиальной задачей и....
Код HTML:
<div id="bpancont"> <div id="bpantop" class="clear"> <div id="bpan1"></div> <div id="bpan2"></div> <div id="bpan3"></div> </div> <div class="clear" id="bpancen"> <div id="bpan4"><img src="image/A_Csly_09.png" width="19" /></div> <div id="bpan5"><img src="image/A_Csly_10.png" /> <div> Что то там различного содержания. </div> </div> <div id="bpan6"><img src="image/A_Csly_11.png" /></div> </div> <div id="bpanbot" class="clear"> <div id="bpan7"></div> <div id="bpan8"></div> <div id="bpan9"></div> </div> </div> Код HTML:
#bpan1 { width: 19px; height: 20px; background: url(image/A_Csly_05.png); float:left; } #bpan2 { width: 178px; height: 20px; background:url(image/A_Csly_06.png); float:left; } #bpan3 { width: 20px; height: 20px; background:url(image/A_Csly_07.png); float:left; } #bpantop { width: 217px; height: 20px; float:none; } #bpanbot { width: 217px; height: 20px; float:none; } #bpancen { width: 217px; height: auto; float: none; position: relative; } #bpan4 { width: 19px; float:left; position: relative; } #bpan4 img { width: 100%; height: 100%; } #bpan5 { width: 178px; float:left; position: relative; } #bpan5 img { width: 100%; height: 100%; } #bpan5 div { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; } #bpan6 { width: 20px; float:left; position: relative; } #bpan6 img { width: 100%; height: 100%; } #bpan7 { width: 19px; height: 20px; background:url(image/A_Csly_12.png); float:left; } #bpan8 { width: 178px; height: 20px; background:url(image/A_Csly_13.png); float:left; } #bpan9 { width: 20px; height: 20px; background:url(image/A_Csly_14.png); float:left; } #bpancont { width: 217px; height: auto; } .clear { width:100%; overflow:hidden; } суть в том, чтобы сделать тянущуюся по вертикали таблицу дивами... Поскольку всегда верстал смесью, или таблицами, а теперь пришлось жестко следовать правилам хочу понять как бы разрезинить #bpancen по вертикали растягивая изображения 100% на 100% выбился из сил, вразумите плиз... |
08.12.2010, 09:24 | #2 |
Форумчанин
Регистрация: 07.09.2009
Сообщений: 361
|
проще изображение указать как фон для нужного дива .а не пытаться растянуть его внутри.
|
08.12.2010, 10:01 | #3 |
Старожил
Регистрация: 19.04.2010
Сообщений: 2,702
|
Если не ошибаюсь, Вам надо bpancont - 100%, а bpan5 - height: auto;
От себя: - Как Я вижу вы пытаетесь сделать сложный фон - использовать дивную верстку в данном случаи не лучший способ. |
08.12.2010, 16:52 | #4 |
Регистрация: 22.01.2010
Сообщений: 9
|
Спасибо Виталий я попытался объяснить это заказчику(сегодня) фон гардиентный полупрозрачный, в итоге получается шапка, штаны и тянущаяся рубашка(образно ).
Ваш вариант уже испробывал... результат Chrome тянет на всю страницу IE делает вид что ничего не случилось, Mozilla вообще начинает строить дивы волшебным образом. Лечится точным указанием высоты для bpancont, но опять же работает только в опера, и хроме. В принципе по моим соображениям нужно сделать чтобы размеры bpancont задавались до просчета содержимого если сегодня дойдут руки попробую потанцевать с z-index-ом. |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
div тег как нижний слой для второго div тега | dadli | HTML и CSS | 2 | 30.07.2010 01:12 |
Как отменить прозрачность div в прозрачном div | zeharon | HTML и CSS | 0 | 24.07.2010 16:56 |
Высота div-a в котором есть другой div | Antoha | HTML и CSS | 2 | 07.08.2009 18:16 |
Позиционирование двух плавающих DIV внутри одного DIV | allocator | HTML и CSS | 5 | 22.07.2009 13:48 |
Верска div-ами (не получается) | Ururu | HTML и CSS | 1 | 06.04.2009 19:46 |