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 21:05

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

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

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

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

B~Vladi 15.07.2009 10:00

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

XPOMOB 15.07.2009 12:36

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

B~Vladi 15.07.2009 12:59

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

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

XPOMOB 15.07.2009 13: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 14:21

Цитата:

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

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

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

а при
Цитата:

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

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

B~Vladi 15.07.2009 14:23

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

XPOMOB 15.07.2009 14:32

Цитата:

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

тоже есть :(

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

B~Vladi 15.07.2009 14: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 14:48

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

a:hover span{
  display:inline;
}


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

XPOMOB 15.07.2009 16:50

Цитата:

Сообщение от B~Vladi (Сообщение 24490)
Вобщем делать нада так:

Сделал. Работает, но только в IE. В Опере не работает. Переделал...

function view3(){ 
  test3.style.visibility="visible"; 
}

function noview3(){ 
  test3.style.visibility="hidden";
}



<span onmouseover="view3()" onmouseout="noview3()">
 <span id="test3" style="visibility: hidden; display:inline; position:absolute; margin-top:20px; background-color:#007070; ">
  текст2_дива2
 </span>
2слово2  
</span>


Но все же это как-то не так получается. Во первых FrontPage подвисает и не дает вставлять внутрь <span id="test3" никакие теги, во вторых если слово около правого края - фигня с дизайном получается...

Наверное придется дважды прочитать статью и начать все заново
javascript.ru/ui/offset

B~Vladi 15.07.2009 17:02

Цитата:

Сообщение от XPOMOB
В Опере не работает.

Как не работает, когда работает?!:)
Цитата:

Сообщение от XPOMOB
FrontPage подвисает

А вы не используйте его. Верстайте руками.
Цитата:

Сообщение от XPOMOB
фигня с дизайном получается

Вы про появление скрола?! Так и должно быть. Если хотите "умную" подсказку, тогда точно
Цитата:

Сообщение от XPOMOB
придется дважды прочитать статью



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