Форум Сайтостроение Веб-строительство

Панель дивами

mff
На сайте с 21.02.2008
Offline
266
mff
617

Как такое сверстать дивами, учитывая что панель имеет динамичную высоту?

Вот что я наваял: 

<div style="width:16px; height:15px; float:left; background: url(menu_header_l.png) right no-repeat;">1</div>

<div style="width:240px; height:15px; float:left; background: url(menu_header_c.png) center repeat-x;">2</div>

<div style="width:16px; height:15px; float:left; background: url(menu_header_r.png) left no-repeat;">3</div>

<div style="clear:both;"></div>



<div style="width:16px; float:left; background: url(menu_l.png) right repeat-y;">

	<div style="width:12px; height:15px; background:#cae4fd; margin-left:4px;">4</div>

</div>

<div style="width:240px; float:left; background:#ffffff;">

	<div style="width:240px; height:15px; background:#cae4fd;">&nbsp;</div>

	<br /><br /><br /><br /><br />текст

</div>

<div style="width:16px; float:left; background: url(menu_r.png) left repeat-y;">

	<div style="width:12px; height:15px; background:#cae4fd; margin-right:4px;">6</div>

</div>

<div style="clear:both;"></div>



<div style="width:16px; height:15px; float:left; background: url(menu_footer_l.png) right no-repeat;">7</div>

<div style="width:240px; height:15px; float:left; background: url(menu_footer_c.png) center repeat-x;">8</div>

<div style="width:16px; height:15px; float:left; background: url(menu_footer_r.png) left no-repeat;">9</div>

<div style="clear:both;"></div>

но, слои по бокам не опускаются по длине:

:(

zip design_1.zip
Nunan
На сайте с 15.08.2008
Offline
78
Nunan
#1

Лучше делать не так

верхние три части объедини в одну

нижние три части объедини в одну

сделай из центральных трех часте - бекграунд

<style>

.m{width:272px;}

.m .t {height:15px;background:url(top.png) no-repeat;}

.m .c {background;url(center.png) repeat-x;}

.m .b {height:15px;background:url(bottom.png) no-repeat;}

</style>

<div class='m'>

<div class='t'></div>

<div class='c'>TEXT TEXT TEXT</div>

<div class='b'></div>

</div>

https://maker.su/
mff
На сайте с 21.02.2008
Offline
266
mff
#2

Nunan, спасибо, но тогда я не смогу менять ширину. В разных частях сайта она разная. Это придется для каждой ширины делать рисунок отдельный. :(

P8
На сайте с 10.07.2009
Offline
4
pashalit85
#3

<style>

.top {

background: #9B8448 url(t.jpg) top repeat-x;

}

.top .top1 {

background: url(r.jpg) right repeat-y;

}

.top .top1 .top2 {

background: url(b.jpg) bottom repeat-x;

}

.top .top1 .top2 .top3 {

background: url(l.jpg) left repeat-y;

}

.top .top1 .top2 .top3 .top4 {

background: url(t-l.jpg) top left no-repeat;

}

.top .top1 .top2 .top3 .top4 .top5 {

background: url(t-r.jpg) top right no-repeat;

}

.top .top1 .top2 .top3 .top4 .top5 .top6 {

background: url(b-r.jpg) bottom right no-repeat;

}

.top .top1 .top2 .top3 .top4 .top5 .top6 .top7 {

background: url(b-l.jpg) bottom left no-repeat;

}

</style>

<div class="top">

<div class="top1">

<div class="top2">

<div class="top3">

<div class="top4">

<div class="top5">

<div class="top6">

<div class="top7">

text

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

T.R.O.N
На сайте с 18.05.2004
Offline
314
T.R.O.N
#4

1. Делаем рисунок для квадратов 1 и 2 (Запас длинны)

2. //-// 7 и 8 (Запас длинны)

3. Для Квадрата TEXT делаем фон с линией справа

4. Дорисовываем рисунки для 3 и 9

5. Левая граница ложится с перекрытием из квадрата 3

От воздержания пока никто не умер. Хотя никто и не родился! Prototype.js был написан теми, кто не знает JavaScript, для тех, кто не знает JavaScript (Richard Cornford)
DeveloperRu
На сайте с 27.02.2009
Offline
72
DeveloperRu
#5

ответ тут

http://www.drupal.ru/node/19727

Ответы на вопросы (http://telenok.com)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий