ВопросРезиновая шапка на пяти блоках...
Здравствуйте!
Очень нужна помощь,а по содержимому вашего сайта, видно, что Вы разбираетесь...
Тема такая... Нужно создать резиновую шапку, в которой левое центральное и правое поля имеют фиксированные размеры и центральное и правое перемещаются в зависимости от размера экрана. Промежуточные должны растягиваться в зависимости от размера экрана и являются подложками под основные...
В простом html файле у меня всё получилось:
Файл index.html
<div id="window"> <div id="window2"> <div id="container"> <div id="ll"><img height="180" width="190" alt="" style="float: left; margin: 0pt; padding: 0pt;" src="index_files/ll.gif" /></div> <div id="lr"><img height="180" width="190" alt="" style="float: left; margin: 0pt; padding: 0pt;" src="index_files/lr.gif" /></div> <div id="lc"><img height="180" width="600" alt="" style="margin: 0pt; padding: 0pt;" src="index_files/lc.gif" /></div> <div id="lc2"> <div id="ll2"></div> <div id="lr2"></div> </div> </div>
Файл styles.css:
BODY {font-weight: normal; border: 0; margin: 3; padding: 0; background: #fff; color: #000000; font-size: 14; text-decoration:none; text-align: center;}
/*-width: height: float: border: margin: padding: top: bottom: background: color: font-family: font-size: text-indent: text-decoration: text-align: font-family: Tahoma, Verdana, sans-serif;-*/ #window {clear:both; position: relative; min-width: 1000px; width:expression(document.body.clientWidth < 1000? "1000px": "auto"); margin: 2; padding: 0px;} #window2 {position: relative; width: 100%; height: 180px; margin: 0 auto; padding: 0px;} #container {float: left; Z-INDEX: 1; position: relative; width: 100%; height: 180px; border: 0; margin: 0; padding: 0;} #ll {float: left; Z-INDEX: 4; position: relative; width: 190; height: 180; border: 0; margin: 0; background: #7cbfe1; text-align: left;} #ll2 {float: left; Z-INDEX: 2; position: relative; width: 49%; height: 180; border: 0; margin: 0; background: #7cbfe1; text-align: left;} #lc {float: left; Z-INDEX: 3; position:absolute; left: 0px; width: 100%; height: 180px; border: 0px; margin: 0 auto; text-align: center; background: filter: alpha(opacity=50) opacity: 0;} #lc2 {float: left; Z-INDEX: 2; position: absolute; left: 0px; width: 100%; height: 180px; border: 0px; margin: 0; background: #ffffff; text-align: center;} #lr {float: right; Z-INDEX: 4; position: relative; width: 190; height: 180; border: 0; margin: 0; background: #7cbfe1; text-align: left;} #lr2 {float: left; Z-INDEX: 2; position: relative; width: 49%; height: 180; border: 0; margin: 0; background: #7cbfe1; text-align: left;}
Здесь:
ll,lc,lr - левое, центральное и правое поле соответственно...
ll2,lr2 - поля растягивающиеся при изменении размеров экрана. Находятся на заднем плане...
lc2 - Блок для абсолютного позиционирования ll2,lr2.
Так вот, в таком варианте всё работает и в разных браузерах, а вот внедрить это в Друпал стало проблемой.... Дело видимо в том, что шаблон блока переопределяет размеры "дивов" которые я определил в page.tpl.php и задал в style.css.
На сколько я понял, мне нужно создать новый шаблон блока, в котором и нужно будет задать стили для вывода шапки...
Но в моей теме (ad_blueprint) нет файла block.tpl.php... Возможно, при отсутствии этого файла тема использует стандартный из стандартной темы?
Можно, конечно, тупо прописать вывод шапки в page.tpl.php, но, на мой взгляд, это просто, но не совсем правильно...
Помогите пожалуйста!
Думаю эта тема будет и другим интересна...
Спасибо!
- Гость
- 03.05.2011
- 3551