Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Вопрос по относительному позиционированию DIV (https://javascript.ru/forum/xhtml-html-css/4356-vopros-po-otnositelnomu-pozicionirovaniyu-div.html)

XPOMOB 14.07.2009 20:05

Вопрос по относительному позиционированию DIV
 
Короче, есть длинный текст, где-то в серидине есть <span>слово</span> - нужно под этим "словом", поверх остального текста, вывести DIV.

<div style="position: relative; - делает перенос строки и вставляется в текст (а не поверх этого текста)

Дизайн тянется, и указать обсолютные координаты нельзя... Но можно использовать Javascript, т.к. DIV будет появлятся только при нажатии (наведении-не решил пока ещё...) мыши.

Смотрел много примеров, но нашел только где положение высчитывается относительно курсора мыши...

B~Vladi 15.07.2009 09:00

Всё это можно сделать на CSS;)

XPOMOB 15.07.2009 11:36

B~Vladi - мне лично пофигу на чем это можно сделать. К томуже в этой ветке форума почти ко всему такой ответ можно дать.

B~Vladi 15.07.2009 11:59

XPOMOB, спокойно;)

Для того, чтобы небыло переноса строк, диву нужно задать абсолютное позицианирование и всунуть его в span. Далее display:none; и спану position:relative;. Затем выравниваем див bottom:0;, left:0; и вешаем обработчик на спан, который будет менять диву display.

XPOMOB 15.07.2009 12:52

Цитата:

Сообщение от B~Vladi (Сообщение 24471)
Для того, чтобы небыло переноса строк, диву нужно задать абсолютное позицианирование и всунуть его в span. Далее display:none; и спану position:relative;. Затем выравниваем див bottom:0;, left:0; и вешаем обработчик на спан, который будет менять диву display.

Вот что я сделал. Советы помогли немного. Див стал появлятся под "словом" - это уже хорошо :) Но перенос строки остался. И ещё, если "слово" находится в непосредственно близости от правого края - при появлении дива появляется горизонтальная прокрутка. И ещё Опера как-то не полностью Див показывает (но это наверное потом можно будет как-то решить...) Так же при bottom:0; - див повялется в самом верху, а не под словом - пришлось заменить на 1 (хотя если поставить 100 или 200 - результат одинаковый)

И ещё: в примере встретился параметр visibility -может его использовать? или разници особой нет?

Дальше код JS
<script type="text/javascript">
function view(){ 
 test1.style.display="block"; //блок становится видимым 
 //test1.style.display="inline"; //блок становится видимым 
 //test1.style.visibility="visible"; //блок становится видимым 
}

function noview(){ 
 test1.style.display="none"; //блок становится невидимым 
}

</script>


И HTML

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
текст текст текст текст текст текстекст текст
текст текст текст текстекст текст текст текст
текст текстекст текст текст текст текст текс
текст текст текст
<span style="position: relative; " onmouseover="view()" onmouseout="noview()">
слово
<div id="test1" style="display: none; position: absolute; bottom:1; left:0; width: 150px; height: 150px; z-index: 1; background-color:#008000;">
текст_дива</div>

</span> текст текст текстекст текст
текст текст текст текстекст текст текст текст
текст текстекст текст текст текст текст текс
текст текст текст текст текст текстекст текст
текст текст текст текстекст текст текст текст
текст текстекст текст текст текст текст текс
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Где что я неправильно делаю?

B~Vladi 15.07.2009 13:21

Цитата:

Сообщение от XPOMOB
в примере встретился параметр visibility -может его использовать? или разници особой нет?

В вашем случае нет.
Цитата:

Сообщение от XPOMOB
Но перенос строки остался.

а при
Цитата:

Сообщение от XPOMOB
test1.style.display="inline";

тоже есть?! По идее не должно быть...

B~Vladi 15.07.2009 13:23

ЗЫ: див лучше поместить перед "словом".

XPOMOB 15.07.2009 13:32

Цитата:

Сообщение от B~Vladi (Сообщение 24482)
test1.style.display="inline";
тоже есть?! По идее не должно быть...

тоже есть :(

положение слова ничего не меняет, даже хуже становится. слово переносится на следующую строку, а див повляется в конце предыдущей.

B~Vladi 15.07.2009 13:44

Вобщем делать нада так:

<span>
<span style="display:none; position:absolute; margin-top:20px; background-color:#008000; ">текст_дива</span>
слово
</span>


и менять

test1.style.display="inline"

B~Vladi 15.07.2009 13:48

а если внешний span переделать в ссылку, можно тогда будет для него прописать:

a:hover span{
  display:inline;
}


и забыть про JS.


Часовой пояс GMT +3, время: 00:38.