Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 08.12.2010, 04:49   #1
MarkStaver
 
Регистрация: 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>
к этому прилогается CSSка
Код 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% выбился из сил, вразумите плиз...
MarkStaver вне форума Ответить с цитированием
Старый 08.12.2010, 09:24   #2
MrJenika
Форумчанин
 
Аватар для MrJenika
 
Регистрация: 07.09.2009
Сообщений: 361
По умолчанию

проще изображение указать как фон для нужного дива .а не пытаться растянуть его внутри.
MrJenika вне форума Ответить с цитированием
Старый 08.12.2010, 10:01   #3
Виталий Желтяков
Старожил
 
Аватар для Виталий Желтяков
 
Регистрация: 19.04.2010
Сообщений: 2,702
По умолчанию

Если не ошибаюсь, Вам надо bpancont - 100%, а bpan5 - height: auto;
От себя:
- Как Я вижу вы пытаетесь сделать сложный фон - использовать дивную верстку в данном случаи не лучший способ.
Виталий Желтяков вне форума Ответить с цитированием
Старый 08.12.2010, 16:52   #4
MarkStaver
 
Регистрация: 22.01.2010
Сообщений: 9
По умолчанию

Спасибо Виталий я попытался объяснить это заказчику(сегодня) фон гардиентный полупрозрачный, в итоге получается шапка, штаны и тянущаяся рубашка(образно ).
Ваш вариант уже испробывал... результат Chrome тянет на всю страницу IE делает вид что ничего не случилось, Mozilla вообще начинает строить дивы волшебным образом.
Лечится точным указанием высоты для bpancont, но опять же работает только в опера, и хроме.
В принципе по моим соображениям нужно сделать чтобы размеры bpancont задавались до просчета содержимого если сегодня дойдут руки попробую потанцевать с z-index-ом.
MarkStaver вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
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