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
Форумы портала PHP.SU :: Версия для печати :: Горизонтальное меню.
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Горизонтальное меню.

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

1. winddancer - 10 Мая, 2015 - 10:18:38 - перейти к сообщению
PHP:
скопировать код в буфер обмена
  1. $link_menu = "<a href=index.php?page=$key>$value</a>";
  2. echo "<div id=\"Navigation\"><ul class=\"Navigation\">";
  3. echo "<li>";
  4. echo $link_menu;
  5. echo "</ul></div>";
  6. echo "</li>";




CODE (htmlphp):
скопировать код в буфер обмена
  1. .Navigation{
  2.         height: 50px;
  3.     padding: 0;
  4.         margin: 0;
  5. }
  6.  
  7. .Navigation li  {
  8.         height: auto;
  9.         width: 150px;
  10.         float: center;
  11.         text-align: center;
  12.         list-style: none;
  13.         font:12px "Bonveno", "Century Gothic";
  14.         padding: 0;
  15.         margin: none;
  16.         background-color: #eee;
  17.         border: 1px solid #ccc;
  18.         box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
  19.         border-radius: 3px;
  20.         margin:auto;
  21. }
  22.  
  23. .Navigation a{                                                 
  24.         padding:13px;
  25.         text-decoration: none;
  26.         color:#333;
  27.         text-shadow: 0 1px #fff;
  28.         display: block;
  29. }
  30. .Navigation li ul{
  31.         display: block;
  32.         height: auto;                                                                  
  33.         margin-left: auto;
  34.         padding: 0;            
  35. }                              
  36.  
  37. .Navigation li:hover ul{
  38.         display: block;
  39. }
  40.  
  41. .navbar li ul li {
  42.         background-color:#eee;
  43.         border: 1px solid #ccc;
  44. }
  45.  
  46. .Navigation li:hover, a:hover {
  47.          background: #e8e8e8;
  48. }



Вопрос. Почему отображает вертикальный список меню, а не горизонтальный?
2. DelphinPRO - 10 Мая, 2015 - 12:55:55 - перейти к сообщению
float: center;
Float может принимать три значения left, right, none
3. IllusionMH - 10 Мая, 2015 - 12:57:55 - перейти к сообщению
winddancer, а что такое float: center;? Такого значения для свойства нет. left скорее должен быть.

DelphinPRO, опередил Улыбка
4. winddancer - 10 Мая, 2015 - 13:37:46 - перейти к сообщению
DelphinPRO пишет:
float: center;
Float может принимать три значения left, right, none

Прошу простить за рачество. Я просто комбинировал данные с попыткой исправить.
Смотрите. Есть вот этот ресурс с этим СSS "http://codepen.io/ScottMarshall/pen/ranqd"

Я пытаюсь привинтить его к своему сайту. Выводя без CSS обычными ссылками - без проблем. Всё в один рядок.

При использовании CSS и кода, что там - у меня выводится только последний из всех линков(получаю из таблицы MySQL)

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

В чём проблема? Подскажите.
5. DelphinPRO - 10 Мая, 2015 - 16:50:30 - перейти к сообщению
не мешайте все кучу.
задача 1 - вывести меню в виде списка ul > li. т.е. в вашем случае, вам нужно сгенерировать html-разметку такую же, как в примере на кодпене.
задача 2 - оформить меню с помощью CSS. Тут вам и делать ничего не надо - просто скопируйте оттуда css
6. winddancer - 10 Мая, 2015 - 20:11:39 - перейти к сообщению
DelphinPRO пишет:
не мешайте все кучу.
задача 1 - вывести меню в виде списка ul > li. т.е. в вашем случае, вам нужно сгенерировать html-разметку такую же, как в примере на кодпене.
задача 2 - оформить меню с помощью CSS. Тут вам и делать ничего не надо - просто скопируйте оттуда css


Смеяться будете.
Задача 1 - выполнено.
Задача 2 - выполнено.
Результат:
1. Не меняя СSS - выводит только один из всех списков ul > li.
2. Меняя - выводит либо слева, либо вертикально в центре.

Сижу, стучусь о стол.
Потом дальше пошёл. Попробовал другое CSS меню.

PHP:
скопировать код в буфер обмена
  1. echo "<ul class=css-menu-2>";
  2. echo "<li><a href=index.php?page=$key>$value</a></li>";
  3. echo "</ul>";


CODE (htmlphp):
скопировать код в буфер обмена
  1. ul.css-menu-2 {
  2. list-style: none;
  3. float:left;
  4. border-bottom: 1px #888899 solid;
  5. padding-bottom: 10px;
  6. }
  7.  
  8. ul.css-menu-2 li {
  9. display: inline;
  10. margin-right: 5px
  11. }
  12.  
  13. ul.css-menu-2 li a {
  14. color: #888899;
  15. text-decoration: none;
  16. background: #f7f7f9;
  17. border: 1px #bbbbcc solid;
  18. border-bottom: none;
  19. padding: 10px 14px
  20. }
  21.  
  22. ul.css-menu-2 li a:hover {
  23. padding: 14px 14px 10px 14px
  24. }
  25.  
  26. ul.css-menu-2 li a.selected {
  27. color: #555566;
  28. background: #ffffff;
  29. border: 1px #888899 solid;
  30. border-bottom: 1px #ffffff solid;
  31. padding: 14px 14px 10px 14px
  32. }


Результат - всё меню слева, либо справа(в зависимости от значения float:n).
По центру не получается никак. Даже обыкновенный Сopy-Paste Голливудская улыбка
7. broshurkaplus - 02 Июля, 2015 - 14:18:01 - перейти к сообщению
порядок ваших тегов
:
CODE (html):
скопировать код в буфер обмена
  1. <div id=\"Navigation\"><ul class=\"Navigation\">
  2.     <li>"
  3.         <a href=index.php?page=$key>$value</a>
  4.         </ul>
  5.         </div>";
  6.     </li>";


может порядок не тот?

 

Powered by ExBB FM 1.0 RC1