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

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

1. strengerst - 02 Августа, 2013 - 19:11:35 - перейти к сообщению
У меня есть меню, блочные элементы организованны по свойству float:left. Но вот не задача к этому же меню ну в край надо приминить свойство z-index; что бы при наведении мышкой когда это меню выползает у меня не сдвигались блочные обьекты. Position:relative - стоит, и все равно не как.
2. IllusionMH - 02 Августа, 2013 - 19:23:40 - перейти к сообщению
strengerst, причем тут z-index?
Во-первых, он никак влияет на "сдвигаение" других элементов
Во-вторых, элементы должны быть позиционированы (position: relative)

В вашем же случае нужно что-то похожее на position: absolute, но тут не прокатит float, либо ошибка в верстке(в плане реализации идеи).
Лучше опишите что именно нужно?
Если это вложеный выпадающий список, то родителю position: relative а ему position: absolute
3. strengerst - 02 Августа, 2013 - 19:33:44 - перейти к сообщению
У меня мокет выстроен, но список который в дальнейшем должен при наведеннии выежать у меня стоит в dipley:none; а когда я его для проверки выcтавляю в display:block; то он смещает нижнею часть. Думал устранить z-index. Чтобы он на позицию был выше. Но не получилось.
4. IllusionMH - 02 Августа, 2013 - 19:37:25 - перейти к сообщению
strengerst, прочесть полностью сообщение(ну не документацию ж по CSS свойствам) не судьба?
IllusionMH пишет:
родителю position: relative а ему position: absolute

элемент будет вырван из потока и не будет двигать другие элементы
5. strengerst - 02 Августа, 2013 - 19:42:28 - перейти к сообщению
Не получилось, так как у дочернего элемента стоит свойств 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;}
6. imya - 02 Августа, 2013 - 19:50:24 - перейти к сообщению
А покажите ваш css
7. strengerst - 02 Августа, 2013 - 19:52:39 - перейти к сообщению
Перед 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.  
8. imya - 02 Августа, 2013 - 19:56:32 - перейти к сообщению
facepalm...

Почитайте про вёрстку, это ужас какой-то...
(Добавление)
http://www[dot]webmascon[dot]com/topics/coding/42a.asp
9. strengerst - 02 Августа, 2013 - 19:57:52 - перейти к сообщению
Ну скинь сылку если это ужас прочитаю. Чего там ужасного.
10. DelphinPRO - 02 Августа, 2013 - 19:59:01 - перейти к сообщению
Хватит ржать где вас только учат...

Задаем стили для первого уровня меню (горизонтального)
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. }
11. strengerst - 02 Августа, 2013 - 19:59:08 - перейти к сообщению
о
12. DelphinPRO - 02 Августа, 2013 - 20:01:17 - перейти к сообщению
Цитата:
<div id="levoemenu"></div>
<div id="levoemenu1"></div>

ужас. никогда не используйте ID для задания стилей (за редким исключением). Для этого существуют классы.
13. strengerst - 02 Августа, 2013 - 20:02:01 - перейти к сообщению
DelphinPRO пишет:
вложенные скрываем и вырываем из потока
CODE (css):
скопировать код в буфер обмена
.menu ul {  dislay:none;  position:absolute;}


А как вы выравняете при такой позиции. Он же к левому краю будет липнуть.
14. DelphinPRO - 02 Августа, 2013 - 20:06:14 - перейти к сообщению
а для чего по вашему я здесь relative поставил:
CODE (css):
скопировать код в буфер обмена
  1. .menu > li {
  2.   float:left;
  3.   position:relative; /* позиционирование для дочерних пунктов */
  4. }

?
15. strengerst - 02 Августа, 2013 - 20:09:42 - перейти к сообщению
Подождите не уходите счас исправлю покажу что получится.

 

Powered by ExBB FM 1.0 RC1