| |
 73 Кб |
|
| | Здравствуйте.
Проблема такая.
Имеется верстка - две колонки (слева меню, справа контент).
В левой колонке, сразу под меню имеется декоративная картинка высотой около 500 px.
Картинка привязана к низу меню, а высота меню переменная.
Как сверстать так, чтобы в случае когда мало контента, эта картинка "скрывалась".
См. рисунок.
Пока мысль только такая:
Абсолютом позиционировать футер к низу общего контейнера (wrap), таким образом он будет перекрывать картинку на свою высоту (162 px), а этого мало.
Буду очень благодарен за советы! | |
| |
|
|
| |
|
|
| |
для: Boris
(20.07.2010 в 08:25)
| | | думаю на картинку нужно вешать свойства position: absolute и z-index. это я думаю поможет сделать так, чтобы блок с картинкой не влиял на ширину основного контента | |
| |
|
|
| |
|
|
| |
для: psychomc
(20.07.2010 в 11:04)
| | | Спасибо, но думаю это не подойдет.
Основная проблема - привязать верх картинки к низу меню, но высота меню переменная (могут пункты добавитьс или подпункты раскрыться)
Поэтому координаты положения картинки определить однозначно нельзя.
position: absolute;
top: ????
left: 0; | |
| |
|
|
| |
|
|
| |
для: Boris
(20.07.2010 в 08:25)
| | | Когда сможете получать ответ на вопрос "мало ли контента или нет", сможете управлять своей картинкой. | |
| |
|
|
| |
|
|
| |
для: sim5
(20.07.2010 в 12:31)
| | | Как?
Не понял. Контент влияет на высоту всей верстки. Если контента нет вообще, то высота ограничивается только высотой блока menu.
<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>
|
| |
| |
|
|
| |
|
|
| |
для: Boris
(20.07.2010 в 12:48)
| | | Как хотите. А откуда вы будете знать, что контента именно мало, и картинку надо спрятать? И что значит мало, по отношению к чему? Величина "мало контента", это "фантом". | |
| |
|
|
| |
|
|
| |
для: sim5
(20.07.2010 в 12:55)
| | | Спасибо за беседу.
Приведу в цифрах :)
Пусть высота меню равна 200 px;
Высота футера 100 px;
Высота картинки 500 px;
1). Тогда, если в блоке content текст отсутствует, то моя верстка становится высотой 200+100=300 px - ограничивается высотой menu и картинку вообще не видно.
2). Если в content поместить столько текста, чтобы он растянул блок до высоты , ну, например 400 px, то высота верстки 400+100=500 px и картинку видно на 200px. | |
| |
|
|
| |
|
|
| |
для: Boris
(20.07.2010 в 13:19)
| | | Конкрентые значения не важны, главное, если меньше - скрыть. | |
| |
|
|
| |
|
|
| |
для: sim5
(20.07.2010 в 13:30)
| | | Ну да, в этом и вопрос. | |
| |
|
|
| |
|
|
| |
для: Boris
(20.07.2010 в 14:15)
| | | Ну и выполняйте, если высота div class="content" меньше или равна div class="left-col", не показываем. | |
| |
|
|
| |
|
|
| |
для: Boris
(20.07.2010 в 14:15)
| | | А у вас картинка в img или можно сделать bg?? | |
| |
|
|
| |
80 Кб |
|
| |
для: Usta
(20.07.2010 в 14:35)
| | | Желательно bg. | |
| |
|
|
| |
|
|
| |
для: Boris
(20.07.2010 в 14:39)
| | | Я решил определять высоту меню посредством Js.
Подскажите пожалуйста, как подставить в css вычисленную высоту?
Типа того:
.columns {
padding: 0 0 200px 0;
background: url(images/letters_in_left.gif) 0 [полученная высота] no-repeat;
}
|
| |
| |
|
|
| |
|
|
| |
для: Boris
(20.07.2010 в 16:07)
| | | document.getElementById('id_элемента').style.width = '....px'; | |
| |
|
|
| |
|
|
| |
для: psychomc
(20.07.2010 в 16:17)
| | | Спасибо за ответ, но у меня бекраунд. | |
| |
|
|
| |
|
|
| |
для: Boris
(20.07.2010 в 16:19)
| | | пардон
document.getElementById('id').style.backgroundPosition | |
| |
|
|
| |
|
|
| |
для: psychomc
(20.07.2010 в 16:17)
| | | Уверены? | |
| |
|
|
| |
|
|
| |
для: 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>
|
Но работает только в ИЕ :(( | |
| |
|
|
| |
|
|
| |
для: 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, а указывают стиль элементу. | |
| |
|
|
| |
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 в 17:43)
| | | Если у вас эта картинка фоновая для элемента, который является родителем для меню, то left bottom позиция ему, а меню его и будет перекрывать по мере своей. Вот я и не понимаю, зачем тогда вам вся эта кухня?
Если это изображение уж настолько ценно и необходимо, то измеряйте высоту контента, сравниваейте с выстой меню плюс высотой изображения, и изменяйте стиль позиции по высоте на top, например. | |
| |
|
|
| |
|
|
| |
для: sim5
(20.07.2010 в 17:56)
| | | Спасибо за внимание ко мне, но нужно чтобы его скрывало с низу, а меню ничего не перекрывало.
Вот в чем сложность!
Ну я же елочку не зря нарисовал. | |
| |
|
|
| |
|
|
| |
для: Boris
(20.07.2010 в 18:01)
| | | То есть можно обрезать снизу, а не скрывать его? Тогда зачем вычисления, поместите сразу под меню это изображение (не нравится, можете div c размером его и фоном этой картинки), поместите эти два элемента в родительский div со стилем overflow: hidden, высотой 100%, так чтобы она зависела от высоты блока контента, и все должно по идее получится так, как вам надо. | |
| |
|
|
| |
|
|
| |
для: 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>
|
| |
| |
|
|
