Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Проблема с наложением блоков

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: не могу догадаться, как спозиционировать подпункт меню
Поиск в теме | Версия для печати
koka
Отправлено: 21 Июня, 2011 - 17:53:57
Post Id



Гость


Покинул форум
Сообщений всего: 115
Дата рег-ции: Июнь 2010  
Откуда: Россия, Ижевск


Помог: 1 раз(а)
Здравствуйте!!! Пытался написать меню с выпадающими подпунктами

Код html

CODE (html):
скопировать код в буфер обмена
  1. <div class='menublock'>
  2.  
  3.  
  4. <a href="" class='menu'><div class='menu'>Главная</div></a>
  5. <a href="" class='menu' onmouseover="sub()"><div class='menu'>Продукция</div></a>
  6. <ul id='submenu'>
  7. <li>  Защиты </li>
  8. <li>  Ковры </li>
  9. <li>  Запчасти </li>
  10. </ul>
  11. <a href="" class='menu'><div class='menu'>О нас</div></a>
  12. </div>


Код css:

CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2.  
  3. .menublock
  4. {
  5. height: 40px;
  6. overflow: hidden;
  7. }
  8.  
  9. /* Стили меню */
  10.  
  11. .menu
  12. {
  13. float: left;
  14. padding: 10px;
  15. height: 100%;
  16. background-image: url('http://rulevoi.net/img/beta/knopka.jpg');
  17. z-index: 1;
  18. position: relative;
  19. }
  20.  
  21. a.menu
  22. {
  23. text-decoration: none;
  24. color: gold;
  25. padding: 0px;
  26. margin: 0px;
  27. font-weight: bold;
  28. font-family: Verdana;
  29. }
  30.  
  31. .menu:hover
  32. {
  33. background-image: url('http://rulevoi.net/img/beta/knopka_press.jpg');
  34. }
  35.  
  36. a.menu:hover
  37. {
  38. color: green;
  39. }
  40.  
  41. #submenu
  42. {
  43. display: none;
  44. background-color: grey;
  45. position: absolute;
  46. z-index: 5;
  47.  
  48. }


Вот сама страница: http://rulevoi[dot]net/index2.php

Вообщем, хочу сделать выпадающее меню. Не могу догадаться, как спозиционировать выпадающий список. Если задать ему position: relative то список не влазит в menublock и закрывает собой другие пункты меню. Если задавать position: absolute , то ни могу придумать, как правильно задать абсолютные координаты для этого списка. Пожалуйста, подскажите.

Вот JS код

CODE (javascript):
скопировать код в буфер обмена
  1. function sub()
  2. {
  3. window.document.getElementById('submenu').style.display='block';
  4. }


-----
http://rulevoi[dot]net - запчасти для иномарок в Ижевске
 
 Top
Давит
Отправлено: 21 Июня, 2011 - 20:56:18
Post Id



Частый гость


Покинул форум
Сообщений всего: 147
Дата рег-ции: Май 2011  


Помог: 2 раз(а)
если так ?

CODE (htmlphp):
скопировать код в буфер обмена
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <html>
  4. <head>
  5.         <title>Untitled</title>
  6. <style type="text/css">
  7.   #div { display:block; width:10;}
  8.   #div:hover UL {
  9.    display: block; /* При выделении пункта курсором мыши отображается подменю */
  10.         margin-top:0;
  11.         border:solid 1px #999;
  12.   }
  13.   #ul {
  14.    list-style: none; /* Для списка убираем маркеры */
  15.    margin: 0; /* Нет отступов вокруг */
  16.    padding: 0; /* Убираем поля вокруг текста */
  17.    font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
  18.    font-size: 10pt; /* Размер названий в пункте меню */
  19.         background-color:#F9F9F9;
  20.         position: absolute; /* Подменю позиционируются абсолютно */
  21.    display: none; /* Скрываем подменю */
  22.    margin-left: 0px; /* Сдвигаем подменю вправо */
  23.    margin-top: 3px; /* Сдвигаем подменю вверх */
  24.  
  25.   }
  26.   #div_a {
  27.            
  28.    width: 100%; /* Ширина меню */
  29.         font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
  30.    font-size: 10pt; /* Размер названий в пункте меню */
  31.         font-weight:800;
  32.    text-decoration: none; /* Подчеркивание у ссылок убираем */
  33.    color: #666; /* Цвет текста */
  34.   }  
  35.      
  36.   #div_a:hover {color: #00F; /* Цвет текста активного пункта */}
  37.   #li_a {
  38.    display:block;
  39.         padding:3;
  40.    text-decoration: none; /* Подчеркивание у ссылок убираем */
  41.    color: #666; /* Цвет текста */
  42.         font-size: 10pt;
  43.         font-weight:600;
  44.   }  
  45.   #li_a:hover {color: #00F; /* Цвет текста активного пункта */}
  46.   #b {font-size:1.5em;}
  48. </style>
  49. </head>
  50.  
  51. <body>
  52.  
  53. <div id="div"><a id="div_a">text1</a>
  54. <ul id="ul">
  55.      <b>text2</b>
  56.      <li id="li"><a id="li_a" href="#">page1</a></li>
  57.      <li id="li"><a id="li_a" href="#">page2</a></li>
  58.      <li id="li"><a id="li_a" href="#">page3</a></li>
  59. </ul>
  60. </div>
  61.  
  62. </body>
  63. </html>
  64.  

(Отредактировано автором: 21 Июня, 2011 - 20:57:07)

 
 Top
koka
Отправлено: 21 Июня, 2011 - 21:02:10
Post Id



Гость


Покинул форум
Сообщений всего: 115
Дата рег-ции: Июнь 2010  
Откуда: Россия, Ижевск


Помог: 1 раз(а)
Давит, спасибо, сейчас буду разбираться.


-----
http://rulevoi[dot]net - запчасти для иномарок в Ижевске
 
 Top
DeepVarvar Супермодератор
Отправлено: 21 Июня, 2011 - 22:14:38
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
Никаких жабаскриптов не нужно.
Файл в аттаче
Скачать файл: genres.tar.gz
Скачан раз: 69
 
 Top
koka
Отправлено: 23 Июня, 2011 - 09:57:55
Post Id



Гость


Покинул форум
Сообщений всего: 115
Дата рег-ции: Июнь 2010  
Откуда: Россия, Ижевск


Помог: 1 раз(а)
Разобрался с меню, но появился новый вопрос.

Хочу растянутьменю на всю страницу, для этого создал дополнительный блок

CODE (html):
скопировать код в буфер обмена
  1. .menulastblock
  2. {
  3. background-image: url('http://rulevoi.net/img/beta/knopka.jpg');
  4. width: 100%;
  5. height: 40px;
  6. }


Вот html код меню

CODE (html):
скопировать код в буфер обмена
  1. <div id='menublock'>
  2.  
  3.  
  4. <ul id="menu">
  5.  
  6.     <li><a href="http://rulevoi.net">Главная</a></li>
  7.     <li>
  8.         <a href="#">Товары</a>
  9.         <ul>
  10.             <li><a href="http://rulevoi.net/content/zapchasti">Запчасти</a></li>
  11.             <li><a href="http://rulevoi.net/content/zashita">Защиты картера</a></li>
  12.             <li><a href="http://rulevoi.net/content/kover">Ковры</a></li>
  13.             <li><a href="http://rulevoi.net/obvec"> Навесное оборудование </a></li>
  14.             <li><a href="http://rulevoi.net/content/oil"> Оригинальные масла </a></li>
  15.             <li><a href="http://rulevoi.net/content/registrator">Видео регистраторы </a></li>
  16.         </ul>
  17.     </li>
  18.     <li>
  19.         <a href="http://rulevoi.net/content/komission">Комисионные запчасти</a>
  20.         </li>
  21.     <li>
  22.     <a href="http://client.rulevoi.net/zapros.php">Узнать цену</a>
  23.     </li>
  24.    
  25. </ul>
  26.  
  27. <div class='menulastblock'> </div>
  28.  
  29.  
  30. </div>
  31.  
  32.  
  33. <div class='clear'></div>
  34. <div class='leftblock'>



Сообственно, меню нормально растягивается во всех браузерах кроме IE, хотя и указала в стиле для ul float:left.
Что для него можно придумать, чтобы блок не переходил на новую строку.

Могу выложить, если надо, css стили меню.

Вот сам адрес страницы, http://rulevoi[dot]net/index2.php .
(Добавление)
И ещё вопрос - как выровнять блоки по высоте???
Нашёл вот такой javascript b переделал его.
К сожалению, не работает. Ошибка в скрипте???

CODE (javascript):
скопировать код в буфер обмена
  1. function setHeight()
  2. {
  3.    var b1 = document.getElementById('leftblock');
  4.    var b2 = document.getElementById('centerblock');
  5.    var b3 = document.getElementById('rightblock');
  6.    if (!b1 || !b2 || b3) return;
  7.    var h1 = b1.offsetHeight;
  8.    var h2 = b2.offsetHeight;
  9.    var h3 = b3.offsetHeight;
  10.    alert (h1);
  11.    if ((h1 > h2)&&(h1>h3)) {
  12.       b3.style.height = (h1 - 10) + 'px';
  13.       b2.style.height = (h1 - 10) + 'px';
  14.       b1.style.height = (h1 - 10) + 'px';
  15.    }else if ((h2 > h1)&&(h2>h3)) {
  16.       b1.style.height = (h2 - 10) + 'px';
  17.       b2.style.height = (h2 - 10) + 'px';
  18.       b3.style.height = (h2 - 10) + 'px';
  19.    }
  20.    else
  21.   {
  22.       b1.style.height = (h3 - 10) + 'px';
  23.       b2.style.height = (h3 - 10) + 'px';
  24.       b3.style.height = (h3 - 10) + 'px';
  25.    }
  26. }
  27.  
  28. window['onload'] = setHeight();
  29.  


-----
http://rulevoi[dot]net - запчасти для иномарок в Ижевске
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB