| |
 11.7 Кб |
|
| | Как сделать блок, который растягивался бы на высоту контента и имел бы какой-нибудь БГ, я знаю.
Но пришла идея сделать так, чтобы не нужно было создавать много вложенных блоков, а сделать один, в котором бы лежали блоки с необходимыми бекграундами РАЗДЕЛЬНО друг от друга. Так, чтобы не было большой вложенности.
Качайте аттачи, там все понятно.
Главному, родительскому, блоку задал position:relative; для блоков с бекграудами position:absolute; ну и в нужное место их спозиционировал.
Для угловых блоков задал z-index:2; Дальше задача - сделать, чтобы блоки, которые имеют в БГ фон, который должен растягиваться по высоте и ширине имел высоту родительского блока. Сделал через CSS-свойство :inherit; но как оказалось ИЕ его не воспринимает. Пришлось прибегнуть к expression. Тут, после некоторой возни понял что придется все-таки положить основной предок в ещё один блок, т.к. для предка указал width:100%; height:100%; (для того чтобы эти свойства наследовались где надо). А при помощи ещё одного внешнего блока регулировать родителя по ширине (и/или высоте). Проблема возникла в ИЕ6, если создать такой управляющий блок, то блоки, которые должны растягиваться по высоте ни в какую этого делать не хотят. Почему? (это смотрите в аттаче1)
Пока писал придумал ещё один способ, но там снова грабли. Убрал управляющий блок, задал для родительского высоту и ширину, а для блоков с БГ, который должны наследовать его высоту убрал :expression; и :inherit; и задал height:100%; Все вроде работает. Осталось сделать так, чтобы основной блок растягивался, когда много контента. Ну и чтобы он имел какую-то минимальную высоту. Для родителя указал min-height:400px; (дальше знаменитый хак, чтоб в ИЕ работало) height:auto !important; height:400px;. Проверяю, в ИЕ6 снова не пашет. (аттач2)
Хочется как-то реализовать идею. Может кто чего толкового посоветовать?
Кстати второй вариант наверняка лучше чем первый. | |
| |
|
|
| |
|
|
| |
для: ~Z0RR0~
(11.03.2008 в 18:30)
| | | а нужно на все случаи жизни придумать или под конкретные требования? | |
| |
|
|
| |
|
|
| |
для: AlexSol
(11.03.2008 в 19:01)
| | | Ну хотелось бы конечно чтобы универсально было. Там ведь и так на все случаи, только в ИЕ6 проблема. Или это ещё не на все случаи? | |
| |
|
|
| |
|
|
| |
для: ~Z0RR0~
(11.03.2008 в 19:04)
| | | на помощь придло свойство zoom к сожалению не знаю за что оно отвечает, знаю что для ослика...
<div style="position:relative; zoom:1; overflow:hidden; height:auto">
<div style="background:#666666; position:absolute; width:20px; padding-bottom:3000px"></div>
<div style="background:#666666; position:absolute; right:0; width:20px; padding-bottom:3000px"></div>
<div style="background:#006600; position:absolute; height:20px; padding-right:3000px"></div>
<div style="background:#006600; position:absolute; height:20px; bottom:0; padding-right:3000px"></div>
<p style="padding:80px">
dskdskj hdksjh dksjbhd ksjhdksj gdskjdg ksjdg <br>
dskdskj hdksjh dksjbhd ksjhdksj gdskjdg ksjdg <br>
dskdskj hdksjh dksjbhd ksjhdksj gdskjdg ksjdg <br>
dskdskj hdksjh dksjbhd ksjhdksj gdskjdg ksjdg <br>
dskdskj hdksjh dksjbhd ksjhdksj gdskjdg ksjdg <br>
dskdskj hdksjh dksjbhd ksjhdksj gdskjdg ksjdg <br>
dskdskj hdksjh dksjbhd ksjhdksj gdskjdg ksjdg <br>
dskdskj hdksjh dksjbhd ksjhdksj gdskjdg ksjdg <br>
</p>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: AlexSol
(11.03.2008 в 19:55)
| | | Спасибо, нормальное решение. Возьму на заметку.
Хотя задумка была немножко другая. Так чтобы не скрывался БГ за пределы, а занимал область блока. Но похоже что пока 6 ослик жив стоит забить.
Кстати работает в ИЕ6 и без zoom. =) | |
| |
|
|
