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 :: float и z-index, как заставить работать в паре.

 PHP.SU

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


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

> Без описания
Поиск в теме | Версия для печати
strengerst
Отправлено: 02 Августа, 2013 - 19:11:35
Post Id


Частый гость


Покинул форум
Сообщений всего: 172
Дата рег-ции: Нояб. 2010  


Помог: 0 раз(а)
У меня есть меню, блочные элементы организованны по свойству float:left. Но вот не задача к этому же меню ну в край надо приминить свойство z-index; что бы при наведении мышкой когда это меню выползает у меня не сдвигались блочные обьекты. Position:relative - стоит, и все равно не как.

(Отредактировано автором: 02 Августа, 2013 - 19:18:54)

 
 Top
IllusionMH
Отправлено: 02 Августа, 2013 - 19:23:40
Post Id



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


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
strengerst, причем тут z-index?
Во-первых, он никак влияет на "сдвигаение" других элементов
Во-вторых, элементы должны быть позиционированы (position: relative)

В вашем же случае нужно что-то похожее на position: absolute, но тут не прокатит float, либо ошибка в верстке(в плане реализации идеи).
Лучше опишите что именно нужно?
Если это вложеный выпадающий список, то родителю position: relative а ему position: absolute
 
 Top
strengerst
Отправлено: 02 Августа, 2013 - 19:33:44
Post Id


Частый гость


Покинул форум
Сообщений всего: 172
Дата рег-ции: Нояб. 2010  


Помог: 0 раз(а)
У меня мокет выстроен, но список который в дальнейшем должен при наведеннии выежать у меня стоит в dipley:none; а когда я его для проверки выcтавляю в display:block; то он смещает нижнею часть. Думал устранить z-index. Чтобы он на позицию был выше. Но не получилось.
 
 Top
IllusionMH
Отправлено: 02 Августа, 2013 - 19:37:25
Post Id



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


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
strengerst, прочесть полностью сообщение(ну не документацию ж по CSS свойствам) не судьба?
IllusionMH пишет:
родителю position: relative а ему position: absolute

элемент будет вырван из потока и не будет двигать другие элементы
 
 Top
strengerst
Отправлено: 02 Августа, 2013 - 19:42:28
Post Id


Частый гость


Покинул форум
Сообщений всего: 172
Дата рег-ции: Нояб. 2010  


Помог: 0 раз(а)
Не получилось, так как у дочернего элемента стоит свойств float и оно все сместило. Все стало одной линией.
(Добавление)
css код.
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. body { background-color:#000; margin:0px;}
  3. /*Для общего дива настройка*/
  4. #osnovasayta { position:relative;width:100%; margin:0px;  padding:0px;}
  5. #verhniyblock{background-color:#936;width:600px; height:60px}
  6. /*Для хедера верхнего настройка*/
  7. #verhmenu{ position:relative; display:block;background-color:#936;width:600px; height:50px;border-top-style:dashed; border-top-width:thin; border-top-color:#FFF;}
  8. /*Для верхней линии настройка*/
  9.  
  10.  
  11. ul{ margin:0px;padding:0px;float:left; color:#FC9; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#936; width:120px; border:dotted;}
  12.  
  13. li{ list-style-type:none;display:block; }
  14. a{cursor:pointer; text-decoration:none;color:#FFF;}
  15.  
  16.  
  17.  
  18. /*/////////////////////////////////////////////////////////////////////////////////////////*/
  19. #knopa{color:#FC9; background-color:#C63; width:50px; height:28px; float:right;}
  20. #nachinka {width:600px;height:300px;background-color: #C9C; clear:both; }
  21. #nachinkadanuch{width:120px;height:300px;background-color:#633;float:right}
  22. #levoemenu{width:360px; height:300px;background-color:#C68; float:right; }
  23. #levoemenu1{width:120px; height:300px;background-color:#C66; float:left; }
  24. #nigneyemenu{width:600px; height:40px;background-color:#C99}
  25.  

(Добавление)
html код.
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <body>
  3. <div align="center" id="osnovasayta"><!--Konteyner1-->
  4. <div id="verhniyblock"></div>
  5. <div id="verhmenu">
  6. <ul>
  7. <li><a href="#">Menu1</a></li>
  8. <li><a href="#">Menu2</a></li>
  9. <li><a href="#">Menu3</a></li>
  10. <li><a href="#">Menu4</a></li>
  11. <li><a href="#">Menu5</a></li></ul>
  12. <ul>
  13. <li><a href="#">Menu1</a></li>
  14. <li><a href="#">Menu2</a></li>
  15. <li><a href="#">Menu3</a></li>
  16. <li><a href="#">Menu4</a></li>
  17. <li><a href="#">Menu5</a></li></ul>
  18. <ul>
  19. <li><a href="#">Menu1</a></li>
  20. <li><a href="#">Menu2</a></li>
  21. <li><a href="#">Menu3</a></li>
  22. <li><a href="#">Menu4</a></li>
  23. <li><a href="#">Menu5</a></li></ul>
  24. <ul>
  25. <li><a href="#">Menu1</a></li>
  26. <li><a href="#">Menu2</a></li>
  27. <li><a href="#">Menu3</a></li>
  28. <li><a href="#">Menu4</a></li>
  29. <li><a href="#">Menu5</a></li></ul></div>
  30.  
  31. <!--<div id="knopa">Вход</div>-->
  32. <!--Konteyner2-->
  33. <div id="nachinka" align="left">
  34. <!--Konteyner3-->
  35. <div id="nachinkadanuch"></div><!--Konteyner5-->
  36. <div id="levoemenu"></div>
  37. <div id="levoemenu1"></div>
  38.  
  39. </div><!--Konteyner3-->
  40. <div id="nigneyemenu"></div><!--Konteyner6-->
  41.  
  42. </div><!--Konteyner1-->
  43. </body>
  44.  
По умалчанию li{ list-style-type:none;display:none;}

(Отредактировано автором: 02 Августа, 2013 - 19:51:25)

 
 Top
imya
Отправлено: 02 Августа, 2013 - 19:50:24
Post Id



Участник


Покинул форум
Сообщений всего: 1472
Дата рег-ции: Сент. 2012  
Откуда: Запорожье, Украина


Помог: 19 раз(а)
А покажите ваш css


-----
PHP:
скопировать код в буфер обмена
  1. do {box != cat;} while (cat != box);


Когда нормальный человек, уезжая из дома одевает на жену пояс верности, веб-дизайнер ставит на нее счетчик...
 
My status
 Top
strengerst
Отправлено: 02 Августа, 2013 - 19:52:39
Post Id


Частый гость


Покинул форум
Сообщений всего: 172
Дата рег-ции: Нояб. 2010  


Помог: 0 раз(а)
Перед html выложил.
(Добавление)
CODE (html):
скопировать код в буфер обмена
  1.  
  2.  
  3. body { background-color:#000; margin:0px;}
  4.  
  5. /*Для общего дива настройка*/
  6.  
  7. #osnovasayta { position:relative;width:100%; margin:0px;  padding:0px;}
  8.  
  9. #verhniyblock{background-color:#936;width:600px; height:60px}
  10.  
  11. /*Для хедера верхнего настройка*/
  12.  
  13. #verhmenu{ position:relative; display:block;background-color:#936;width:600px; height:50px;border-top-style:dashed; border-top-width:thin; border-top-color:#FFF;}
  14.  
  15. /*Для верхней линии настройка*/
  16.  
  17.  
  18.  
  19.  
  20.  
  21. ul{ margin:0px;padding:0px;float:left; color:#FC9; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; background-color:#936; width:120px; border:dotted;}
  22.  
  23.  
  24.  
  25. li{ list-style-type:none;display:block; }
  26.  
  27. a{cursor:pointer; text-decoration:none;color:#FFF;}
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34.  
  35. /*/////////////////////////////////////////////////////////////////////////////////////////*/
  36.  
  37. #knopa{color:#FC9; background-color:#C63; width:50px; height:28px; float:right;}
  38.  
  39. #nachinka {width:600px;height:300px;background-color: #C9C; clear:both; }
  40.  
  41. #nachinkadanuch{width:120px;height:300px;background-color:#633;float:right}
  42.  
  43. #levoemenu{width:360px; height:300px;background-color:#C68; float:right; }
  44.  
  45. #levoemenu1{width:120px; height:300px;background-color:#C66; float:left; }
  46.  
  47. #nigneyemenu{width:600px; height:40px;background-color:#C99}
  48.  

(Отредактировано автором: 02 Августа, 2013 - 19:56:39)

 
 Top
imya
Отправлено: 02 Августа, 2013 - 19:56:32
Post Id



Участник


Покинул форум
Сообщений всего: 1472
Дата рег-ции: Сент. 2012  
Откуда: Запорожье, Украина


Помог: 19 раз(а)
facepalm...

Почитайте про вёрстку, это ужас какой-то...
(Добавление)
http://www[dot]webmascon[dot]com/topics/coding/42a.asp


-----
PHP:
скопировать код в буфер обмена
  1. do {box != cat;} while (cat != box);


Когда нормальный человек, уезжая из дома одевает на жену пояс верности, веб-дизайнер ставит на нее счетчик...
 
My status
 Top
strengerst
Отправлено: 02 Августа, 2013 - 19:57:52
Post Id


Частый гость


Покинул форум
Сообщений всего: 172
Дата рег-ции: Нояб. 2010  


Помог: 0 раз(а)
Ну скинь сылку если это ужас прочитаю. Чего там ужасного.
 
 Top
DelphinPRO
Отправлено: 02 Августа, 2013 - 19:59:01
Post Id



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


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
Хватит ржать где вас только учат...

Задаем стили для первого уровня меню (горизонтального)
CODE (css):
скопировать код в буфер обмена
  1. /* стандртный clearfix */
  2. .menu:after {
  3.   content: "";
  4.   display: block;
  5.   height: 0;
  6.   clear: both;
  7. }
  8. .menu > li {
  9.   float:left;
  10.   position:relative; /* позиционирование для дочерних пунктов */
  11. }

вложенные скрываем и вырываем из потока
CODE (css):
скопировать код в буфер обмена
  1. .menu ul {
  2.   dislay:none;
  3.   position:absolute;
  4. }

стилизуем вложенные пункты
CODE (css):
скопировать код в буфер обмена
  1. menu ul li {
  2.   ...
  3. }


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
strengerst
Отправлено: 02 Августа, 2013 - 19:59:08
Post Id


Частый гость


Покинул форум
Сообщений всего: 172
Дата рег-ции: Нояб. 2010  


Помог: 0 раз(а)
о

(Отредактировано автором: 02 Августа, 2013 - 19:59:44)

 
 Top
DelphinPRO
Отправлено: 02 Августа, 2013 - 20:01:17
Post Id



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


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
Цитата:
<div id="levoemenu"></div>
<div id="levoemenu1"></div>

ужас. никогда не используйте ID для задания стилей (за редким исключением). Для этого существуют классы.


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
strengerst
Отправлено: 02 Августа, 2013 - 20:02:01
Post Id


Частый гость


Покинул форум
Сообщений всего: 172
Дата рег-ции: Нояб. 2010  


Помог: 0 раз(а)
DelphinPRO пишет:
вложенные скрываем и вырываем из потока
CODE (css):
скопировать код в буфер обмена
.menu ul {  dislay:none;  position:absolute;}


А как вы выравняете при такой позиции. Он же к левому краю будет липнуть.

(Отредактировано автором: 02 Августа, 2013 - 20:02:55)

 
 Top
DelphinPRO
Отправлено: 02 Августа, 2013 - 20:06:14
Post Id



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


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
а для чего по вашему я здесь relative поставил:
CODE (css):
скопировать код в буфер обмена
  1. .menu > li {
  2.   float:left;
  3.   position:relative; /* позиционирование для дочерних пунктов */
  4. }

?


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
strengerst
Отправлено: 02 Августа, 2013 - 20:09:42
Post Id


Частый гость


Покинул форум
Сообщений всего: 172
Дата рег-ции: Нояб. 2010  


Помог: 0 раз(а)
Подождите не уходите счас исправлю покажу что получится.
 
 Top
Поиск в теме | Версия для печати
Страниц (2): [1] 2 »
Сейчас эту тему просматривают: 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