Всплывающие div'ы

[Trol]

Всем привет! Прошу помощи!!!Скрипты не предлагать!! Создал страницу на которой отображаются div(общий)-->div(внутренний):картинка ->(ниже картинки) div(внутренний, но скрыт) и <--в этом то div'е краткое описание содержимой картинки! Далее поставил кнопочку(оформил стилями) и при наведении на нее курсора вплывает этот скрытый div с описанием картинки! Проблема такая: сборок с картинками много и к каждой такое скрытое описание, но нижние элементы при просмотре описания всплывают вниз за границы экрана и части текста не видно(приходится прокручивать вниз вручную) ! Есть ли возможность всплытия вниз так что описание выходило полностью пусть и страница немного прокрутится сама вниз! Или я тупой или такой возможности нет!

[Gaspode]

Вы код покажите.

[Trol]

Это код страницы

<div class="acessel" >

<!--название картинки-->

<div class="headcol">

<span class="colh">Заголовок</span>

</div>

<!--сама картинка-->

<div class="img"><img alt="" src="acces_iphone/image/handsfree.png" /></div>

<!--краткое описание картинки-->

<div class="botwrap">(краткое описание )

<div class="actbutt"> <!-- ниже кнопочка-->

<a style="text-decoration: none" href="#"><span class="butt">Подробнее...<img alt="" src="acces_iphone/image/arrow-down.png" /></span></a>

<!--вот тут уже всплывающий div-->

<div class="infoblock">

<p>Полное описание картинки</p>

</div>

</div>

</div>

</div>

теперь стили

.acessel{

position:relative;

width:50%;

display: inline;

float:left;

background-color:#FFFFFF;

height:auto;

box-shadow:0px 1px 3px rgba(0,0,0,0.3);

-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;

-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;

}

.botwrap{

border-top:1px solid #CCCCCC;

display: block;

background: -moz-linear-gradient(#F9F9F9,#EBEBEB);

background: -webkit-gradient(linear, 0 0, 0 100%, from(#F9F9F9), to(#EBEBEB));

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#EBEBEB');

max-width:100%;

margin:0 auto;

height:auto;

padding:5px;

}

div.actbutt{

display: inline;

position:relative;

}

.butt{

text-align:center;

color:#FFFFFF;

font-weight:bold;

background: -moz-linear-gradient(#CCCCCC,#999999);

background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCCCCC), to(#999999));

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCCC', endColorstr='#999999');

-moz-border-radius:6px;

-webkit-border-radius: 6px;

box-shadow:0px 1px 3px rgba(0,0,0,0.3);

-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;

-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;

width: 50%;

margin: 0 auto;

display: block;

}

.infoblock{

position:relative;

width:100%;

margin:0 auto;

height:auto;

display:none;

overflow:visible;

}

.actbutt:hover .infoblock { top: 1px; display:block; }

вот собственно то что относится только к этим элементам.

[Great Rash]

Только скриптом.

[psywalker]

Дружище, ты лучше покажи нам пару скринов. Того, как должно быть и как не должно.

[Trol]

Вот страница

Так выходит

а хотелось бы так

Т.е при разворачивании дива прокручивался экран для показа содержимого полностью!

Edited April 21, 2011 by Trol

[psywalker]

А почему див обрезается?

[Trol]

В смысле обрезается? Он просто при всплывании выходит за границу вниз и видно только часть содержимого! А я подумал может есть такая реализация чтоб при всплытии он не часть показывал а (расширял)прокручивал страницу чтоб содержимое отобразить полностью!

[psywalker]

В смысле обрезается? Он просто при всплывании выходит за границу вниз и видно только часть содержимого!

А почему он уходит вниз? Непонятно. Почему бы не делать например нужный отступ сразу элементу, в котором лежит всплывающий див, на то расстояние, которое хватит, чтобы всплывающий пациент не обрезался.

[Trol]

А почему он уходит вниз? Непонятно. Почему бы не делать например нужный отступ сразу элементу, в котором лежит всплывающий див, на то расстояние, которое хватит, чтобы всплывающий пациент не обрезался.

Я нужную высоту не знаю и ставлю на авто! Вдруг я захочу чего-то туда добавить но так чтоб мне не приходилось беспокоиться о высоте!

Может я что-то не понимаю!

[psywalker]

Я нужную высоту не знаю и ставлю на авто! Вдруг я захочу чего-то туда добавить но так чтоб мне не приходилось беспокоиться о высоте!

Может я что-то не понимаю!

Тогда походу и правда только ЖС. Иначе тебе же нужно как то высоту узнавать.

[Trol]

Тогда походу и правда только ЖС. Иначе тебе же нужно как то высоту узнавать.

Что ж спс за ответы! Жаль канечно! Просто задумка сайта не огромная и я решил ограничиться только css, поэтому и надежды были на него!

[psywalker]

Что ж спс за ответы! Жаль канечно! Просто задумка сайта не огромная и я решил ограничиться только css, поэтому и надежды были на него!

Просто дело в том, что всплывающие подсказки как правило делаются на абсолюте, а ему пофигу на поток.

[Trol]

Просто дело в том, что всплывающие подсказки как правило делаются на абсолюте, а ему пофигу на поток.

У меня еще была мысля такая: сделать кнопочки со свойством :active и чтоб при нажатии выходили дивы, но беда в том что свойство :active срабатывает на нажатие, а не отпускание кнопки.

А так можно было бы нажатием открыть и нажатием закрыть! Но опять же без ЖС не обойтись(насколько я знаю)!

[psywalker]

А так можно было бы нажатием открыть и нажатием закрыть! Но опять же без ЖС не обойтись(насколько я знаю)!

Да, тут без ЖС никуда.