|
| |
|
|
| |
для: sim5
(20.07.2010 в 18:07)
| | | Ключевая фраза
"чтобы она зависела от высоты блока контента"
Когда контент превышает высоту экрана, появляется прокрутка, но ограниченный (overflow: hidden) блок с моей картинкой так и остается ограниченным высотой экрана.
Я в тупике.
<body>
<style>
html, body {
height:100%;
margin: 0;
padding: 0;
}
.wrap {
height:100%;
background: blue;
float: left;
}
#inner_block_1{
height:100%;
min-height:100%;
background-color: red;
overflow: hidden;
width: 500px;
float: left;
}
#inner_block_2{
height:auto!important;
height:100%;
min-height:100%;
width: 500px;
}
.menu {
background: pink;
width: 500px;
height: 400px;
}
.img {
background: brown;
width: 100px;
height: 500px;
}
.content {
width: 400px;
float: right;
height: 2000px;
background: orange;
}
</style>
<body>
<div class="wrap">
<div id="inner_block_1">
<div id="inner_block_2">
<div class="menu">menu</div>
<div class="img">img</div>
</div>
</div>
<div class="content">content</div>
</div>
</body>
|
| |
| |
|
|
| |
|
|
| |
для: Boris
(20.07.2010 в 16:19)
| | | пардон
document.getElementById('id').style.backgroundPosition | |
| |
|
|
| |
|
|
| |
для: Boris
(20.07.2010 в 18:01)
| | | То есть можно обрезать снизу, а не скрывать его? Тогда зачем вычисления, поместите сразу под меню это изображение (не нравится, можете div c размером его и фоном этой картинки), поместите эти два элемента в родительский div со стилем overflow: hidden, высотой 100%, так чтобы она зависела от высоты блока контента, и все должно по идее получится так, как вам надо. | |
| |
|
|
| |
|
|
| |
для: sim5
(20.07.2010 в 17:56)
| | | Спасибо за внимание ко мне, но нужно чтобы его скрывало с низу, а меню ничего не перекрывало.
Вот в чем сложность!
Ну я же елочку не зря нарисовал. | |
| |
|
|
| |
|
|
| |
для: Boris
(20.07.2010 в 17:43)
| | | Если у вас эта картинка фоновая для элемента, который является родителем для меню, то left bottom позиция ему, а меню его и будет перекрывать по мере своей. Вот я и не понимаю, зачем тогда вам вся эта кухня?
Если это изображение уж настолько ценно и необходимо, то измеряйте высоту контента, сравниваейте с выстой меню плюс высотой изображения, и изменяйте стиль позиции по высоте на top, например. | |
| |
|
|
| |
 70.6 Кб |
|
| |
для: sim5
(20.07.2010 в 17:05)
| | | >background: url(images/letters_in_left.gif) 0 [полученная высота] - у вас оно что, резиновое?
В квадратных скобках указывается значение, на которое бекраунд смещается относительно верхней границы блока для которого он задан.
background: url(images/letters_in_left.gif) 0 0 no-repeat;
|
- прижать бекраунд в верхний левый угол.
>Такой элемент будет сдвигаться вниз в зависимости от высоты меню, и его в зависимости от высоты элемента контента нужно либо показать, либо скрыть.
только его нужно скрывать постепенно.
См. рисунок. | |
| |
|
|
| |
|
|
| |
для: Boris
(20.07.2010 в 16:07)
| | | Какая-то лажа у вас непонятная. Вот ваши элементы:
<div class="columns">
<div class="left-col">
<div class="menu">
<ul><li>....</li></ul>
</div>
</div>
<div class="content">content</div>
</div>
<div class="footer">footer</div>
|
Если картинка, это фон под меню, то от чего тогда такая головная боль? Меню либо будет ее перекрывать, либо нет, но уж двигать ее никак не сможет. Зачем тогда вы вставляете это изображение? И если это просто декоративный фон, то зачем прятать изображение?
Понятно еще, что внизу меню есть элемент, в котором изобажение, или фон у него изображение. Такой элемент будет сдвигаться вниз в зависимости от высоты меню, и его в зависимости от высоты элемента контента нужно либо показать, либо скрыть.
background: url(images/letters_in_left.gif) 0 [полученная высота] - у вас оно что, резиновое? Узнавать надо не высоту изображения фонового, вы и так ее по идее знать должны, а высоту родительского контейнера меню и высоту контейнера контента. Если высота контента плюс/минус условие, меньше высоты меню плюс высота изображения, значит скрыть изображение (элемент с ним).
Подставляют не в CSS, а указывают стиль элементу. | |
| |
|
|
| |
|
|
| |
для: sim5
(20.07.2010 в 16:40)
| | | Да, я узнаю высоту блока Меню и на это значение смещаю вниз бекраунд (картинку) в блоке columns.
Картинка оказывается прямо под блоком Меню. См. рисунок парой постов выше.
Это тренировочный пример. Тут просто задача поместить бекраунд под блоком div_id.
<body onload="SetItem();">
<style>
#div_id {
background: red;
}
#columns {
padding: 0 0 200px 0;
}
</style>
<div id="columns" style="padding: 0 0 200px 0">
<div id="div_id">
dfdfdfdf<br><br>
fgffgfgfgfg<br><br>
fgffgfgfgfg<br><br>
fgffgfgfgfg
</div>
</div>
<script language="JavaScript" type="text/javascript">
function SetItem()
{
var oBlock = document.getElementById('div_id');
var el = document.getElementById('columns');
el.style.background = "url(images/letters_in_left.gif) 0px "+oBlock.offsetHeight+"px no-repeat;"
}
</script>
|
Но работает только в ИЕ :(( | |
| |
|
|
| |
|
|
| |
для: psychomc
(20.07.2010 в 16:17)
| | | Уверены? | |
| |
|
|
| |
|
|
| |
для: psychomc
(20.07.2010 в 16:17)
| | | Спасибо за ответ, но у меня бекраунд. | |
| |
|
|
|
