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
Во-первых, он никак влияет на "сдвигаение" других элементов
Во-вторых, элементы должны быть позиционированы (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 код.
(Добавление)
css код.
CODE (htmlphp):
скопировать код в буфер обмена
скопировать код в буфер обмена
- body { background-color:#000; margin:0px;}
- /*Для общего дива настройка*/
- #osnovasayta { position:relative;width:100%; margin:0px; padding:0px;}
- #verhniyblock{background-color:#936;width:600px; height:60px}
- /*Для хедера верхнего настройка*/
- #verhmenu{ position:relative; display:block;background-color:#936;width:600px; height:50px;border-top-style:dashed; border-top-width:thin; border-top-color:#FFF;}
- /*Для верхней линии настройка*/
- 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;}
- li{ list-style-type:none;display:block; }
- a{cursor:pointer; text-decoration:none;color:#FFF;}
- /*/////////////////////////////////////////////////////////////////////////////////////////*/
- #knopa{color:#FC9; background-color:#C63; width:50px; height:28px; float:right;}
- #nachinka {width:600px;height:300px;background-color: #C9C; clear:both; }
- #nachinkadanuch{width:120px;height:300px;background-color:#633;float:right}
- #levoemenu{width:360px; height:300px;background-color:#C68; float:right; }
- #levoemenu1{width:120px; height:300px;background-color:#C66; float:left; }
- #nigneyemenu{width:600px; height:40px;background-color:#C99}
(Добавление)
html код.
CODE (html):
скопировать код в буфер обмена
скопировать код в буфер обмена
- <body>
- <div align="center" id="osnovasayta"><!--Konteyner1-->
- <div id="verhniyblock"></div>
- <div id="verhmenu">
- <ul>
- <li><a href="#">Menu1</a></li>
- <li><a href="#">Menu2</a></li>
- <li><a href="#">Menu3</a></li>
- <li><a href="#">Menu4</a></li>
- <li><a href="#">Menu5</a></li></ul>
- <ul>
- <li><a href="#">Menu1</a></li>
- <li><a href="#">Menu2</a></li>
- <li><a href="#">Menu3</a></li>
- <li><a href="#">Menu4</a></li>
- <li><a href="#">Menu5</a></li></ul>
- <ul>
- <li><a href="#">Menu1</a></li>
- <li><a href="#">Menu2</a></li>
- <li><a href="#">Menu3</a></li>
- <li><a href="#">Menu4</a></li>
- <li><a href="#">Menu5</a></li></ul>
- <ul>
- <li><a href="#">Menu1</a></li>
- <li><a href="#">Menu2</a></li>
- <li><a href="#">Menu3</a></li>
- <li><a href="#">Menu4</a></li>
- <li><a href="#">Menu5</a></li></ul></div>
- <!--<div id="knopa">Вход</div>-->
- <!--Konteyner2-->
- <div id="nachinka" align="left">
- <!--Konteyner3-->
- <div id="nachinkadanuch"></div><!--Konteyner5-->
- <div id="levoemenu"></div>
- <div id="levoemenu1"></div>
- </div><!--Konteyner3-->
- <div id="nigneyemenu"></div><!--Konteyner6-->
- </div><!--Konteyner1-->
- </body>