| |
|
|
| | Здравствуйте Уважаемое сообщество.
Посмотрите страницу http://my-page45.narod.ru/
Здесь возник вопрос с вёрсткой тянущегося бокса состоящего из 3 областей.
http://my-page45.narod.ru/3box.html
Сейчас код этого участка такой
html
<div id="top_left">
</div>
<div id="top_center">
<img src="images/bg_top_in_center.jpg" width="100%" height="75" alt="" />
</div>
<div id="top_right">
</div>
|
css
#top_left { float:left; width:15px; height:75px; background:url(../images/bg_top_in_left.jpg) left top no-repeat; }
#top_center { float:left; width:91%; height:75px; }
#top_right { float:right; width:6px; height:75px; background:url(../images/bg_top_in_right.jpg) left top no-repeat; }
|
Посмотрите может что в коде неправильно сделано.
Может есть какой другой способ создания резинового бокса из 3 областей. | |
| |
|
|
| |
|
|
| |
для: pautina
(16.11.2010 в 19:30)
| | | Смотрите в чем проблема.
Мне нужно сделать резиновый блок.
Есть 3 div - top_left, top_center, top_right - Левая, ценрральная и правая часть блока.
В области в центре должен быть рисунок тянущийся на всю ширину
<img src="images/bg_top_in_center.jpg" width="100%" height="75" alt="" />
|
Но код реализован не совсем правильно, для блока top_center мне приходится указывать ширину не 100% а 91%, чтоб рисунок в центре не перекрыл левый и правый рисунок.
#top_center { float:left; width:91%; height:75px; }
|
Это не правильно, правильнее указывать 100%.
Как можно это реализовать? | |
| |
|
|
| |
|
|
| |
для: pautina
(17.11.2010 в 10:58)
| | | Может подскажете как здесь быть.
http://my-page57.xmldesign.ru/
В левом сайдбаре в центральной области, черные полосы слева и справа не заполняются по всей высоте.
html
<td class="center">
<div id="center_left">
</div>
<div id="center_center">
... код для меню ...
</div>
<div id="center_right">
</div>
</td>
|
css
td.center { vertical-align:top; width:100%; height:100%; background-color:#e6e6e6; }
#center_left { float:left; width:10px; height:100%; background:url(../images/bg_center_in_left.jpg) left top repeat-y; }
#center_center { float:left; width:92%; height:100%; background-color:#e6e6e6; }
#center_right { float:right; width:6px; height:100%; [code]background:url(../images/bg_center_in_right.jpg) left top repeat-y;
|
}
[/code]
Для левой и правой части указано background:url(../images/bg_center_in_left.jpg) left top repeat-y;
Но и так в Opera код не работает пришлось скрипт писать, чтоб высоты приравнивал.
<script>
onload = function ()
{
var iH = document.getElementById('center_center').offsetHeight;
var iH2 = document.getElementById('center_left').offsetHeight;
var iH3 = document.getElementById('center_right').offsetHeight;
if(iH>iH2) {
document.getElementById('center_left').style.height = iH+'px';
document.getElementById('center_right').style.height = iH+'px';
}
}
</script>
|
Можно заполнить полное наполнение фона в случее если приравнять высоту таблицы td.center к высоте области #center_center
Только как это сделать скриптом? Вот в чём вопрос. | |
| |
|
|
