VPF::Позиционирование через css - Форум программистов

IBS

Дата 1.8.2008, 16:55 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 214
Регистрация: 29.7.2008
Где: Белоруссия

Репутация: 2
Всего: 6

У меня возникли проблемы с позиционированием блока, который появляется при наведении на ссылку - дело в том, что он отступает от самой ссылки и в результате блоки от разных ссылок находятся на разных местах, возможно ли сделать так чтобы они появлялись в одном месте. Сайт находится здесь vesenni.jino.ru(он в стадии разработки)

bars80080

Дата 1.8.2008, 17:01 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

сдаётся мне без js никак, да и голову ломать не стоит. там просто размещаешь этот блок там где надо, а затем по событиям мыши открываешь его или закрываешь

IBS

Дата 2.8.2008, 23:45 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 214
Регистрация: 29.7.2008
Где: Белоруссия

Репутация: 2
Всего: 6

Может кто подкинет хоть основу, как можно осуществить такое через JS а-то я уже голову сломал - ничего не получается у меня с JS(я тока самые основы знаю) в чужие скрипты въезжаю что там к чему, а самому не удаётся пока что ничего наклепать

bars80080

Дата 3.8.2008, 00:25 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

ну как, как?
размещаешь этот блок на странице, где надо. просто помещаешь
<div id="blok"></div>
потом в стилях ему прописываешь #blok { display: none; } это ты его выкинул
затем для каждого пункта меню прописываешь:

Код


<div id="menu">
<span onmouseover="showblok(0, true);" onmouseout="showblok(0, false);">1 пункт меню</span>
<span onmouseover="showblok(1, true);" onmouseout="showblok(1, false);">2 пункт меню</span>
<span onmouseover="showblok(2, true);" onmouseout="showblok(2, false);">3 пункт меню</span>
</div>

пишешь функцию js

Код


var mtxt = new Array('текст для блока номер 0', 'текст для блока номер 1', 'текст для блока номер 2');
function showblok(x, y) {
var el = document.getElementById('blok');
if(!y) el.style.display = 'none'; return;
el.innerHTML = mtxt[x];
el.style.display = 'block';
}

IBS

Дата 3.8.2008, 01:21 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 214
Регистрация: 29.7.2008
Где: Белоруссия

Репутация: 2
Всего: 6

Самое главное не работает - текст в блоке не появляется

bars80080

Дата 3.8.2008, 09:55 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

а у тебя тэги html, body присутствуют? а то в ИЕ без них вставка не прокатывает

IBS

Дата 3.8.2008, 13:50 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 214
Регистрация: 29.7.2008
Где: Белоруссия

Репутация: 2
Всего: 6

Цитата

а у тебя тэги html, body присутствуют? а то в ИЕ без них вставка не прокатывает

Ну ты спросил, однако! Не на столько ж я тупой

Вот в таком варианте ничего не работает:

Код


<html>
<style>
#blok { display: none; position:absolute; top:20;left:20;}
</style>

<script language="JavaScript">


var mtxt = new Array('текст для блока номер 0', 'текст для блока номер 1', 'текст для блока номер 2');
function showblok(x, y) {
var el = document.getElementById('blok');
if(!y) el.style.display = 'none'; return;
el.innerHTML = mtxt[x];
el.style.display = 'block';

}
</script>

<body>
<div id="menu">
<span onmouseover="showblok(0, true);" onmouseout="showblok(0, false);"><a href="">1 пункт меню</a></span><br>
<span onmouseover="showblok(1, true);" onmouseout="showblok(1, false);"><a href="">2 пункт меню</a></span><br>
<span onmouseover="showblok(2, true);" onmouseout="showblok(2, false);"><a href="">3 пункт меню</a></span><br>

<div id="blok"></div>
</div>
</body></html>

Это сообщение отредактировал(а) IBS - 3.8.2008, 14:03

bars80080

Дата 3.8.2008, 14:08 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

простая ошибка, забыл действия по условию в скобки обернуть

Код


<html>
<style>
#blok { display: none; position:absolute; top:20;left:20;}
</style>

<script language="JavaScript">


var mtxt = new Array('текст для блока номер 0', 'текст для блока номер 1', 'текст для блока номер 2');
function showblok(x, y) {
var el = document.getElementById('blok'); 
if(!y) { el.style.display = 'none'; return; }
el.innerHTML = mtxt[x]; 
el.style.display = 'block';

}
</script>

<body>
<div id="menu">
<span onmouseover="showblok(0, true);" onmouseout="showblok(0, false);"><a href="">1 пункт меню</a></span><br>
<span onmouseover="showblok(1, true);" onmouseout="showblok(1, false);"><a href="">2 пункт меню</a></span><br>
<span onmouseover="showblok(2, true);" onmouseout="showblok(2, false);"><a href="">3 пункт меню</a></span><br>

<div id="blok"></div>
</div>
</body></html>

Добавлено через 1 минуту и 32 секунды
кстати, в стилях укажи top и left размерность, а то мжет сбоить в разных браузерах px или pt или % или em

IBS

Дата 3.8.2008, 14:12 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 214
Регистрация: 29.7.2008
Где: Белоруссия

Репутация: 2
Всего: 6

Цитата

забыл действия по условию в скобки обернуть

Я думал что так и надо smile

Спасибо тебе за помощь smile

- сработало smile

Iktash

Дата 3.8.2008, 15:32 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 1.8.2008
Где: Украина

Репутация: нет
Всего: нет

А если как здесь сделать?

Это сообщение отредактировал(а) Iktash - 3.8.2008, 15:33

IBS

Дата 3.8.2008, 15:36 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 214
Регистрация: 29.7.2008
Где: Белоруссия

Репутация: 2
Всего: 6

Iktash, я тоже видел эту страницу, но в моём случае это работает не так, потому что у меня на странице выпадающее меню на css,
сделанное через ul li, и если делать аналогично указанной странице то отступы будут задаваться не от краёв страницы, а от границы li.
В результате от каждой ссылки свой отступ и бегающая по монитору табличка smile

Iktash

Дата 3.8.2008, 15:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 1.8.2008
Где: Украина

Репутация: нет
Всего: нет

IBS, интересно. А абсолютное позиционирование не помогает?

bars80080

Дата 3.8.2008, 15:50 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

смотря относительно чего абсолютное позиционирование. блоки задаются внутри li, следовательно если у li position != static, то полюбому позиция будет отсчитывать от них, даже если у блока абсолютное позиционирование

Iktash

Дата 3.8.2008, 15:55 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 1.8.2008
Где: Украина

Репутация: нет
Всего: нет

bars80080, да, только что посмотрел спецификацию и сам понял...

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »