| |
|
|
| | Доброго всем дня! Я только что зарегился и это мой первый пост. Если вдруг такая тема была, прошу меня простить, ибо по поиску я не нашел того, что хотел. Собственно вот Проблема. Есть горизонтальное меню фиксированной ширины, в ней один за другим тянутся пункты меню (о нас, о вас, о них, о том, о сем и т.д.) При наведении на на раздел я сделал так, что слово (текст) увеличивается на пару пикселей, текст толкает соседний пункт меню и он перескакивает вниз, ибо отступы от родительского блока нулевые: Можно ли каким нибудь образом сделать так, чтобы пункт меню, который увеличивается или к примеру сдвигается влево-вправо при наведении не толкал соседние пункты, а наезжал на них. Пробовал с атрибутами position. Ничего не вышло. Надеюсь разжевал понятно, и еще больше надеюсь на помошь. Спасибо! | |
| |
|
|
| |
|
|
| |
для: STRIFER
(24.06.2011 в 14:39)
| | | Плохо пробовал с атрибутами position, значит. )
смысл в том, чтобы при наведении элемент выпадал из общего ряда, резервируя за собой стандартной ширины место. Стандартная ширина бывает у блочных элементов. Если надо изменить размер блока, не потревожив соседние, надо а) поместить этот блок в другой, и б) тому, другому, назначить видимое переполнение.
<html>
<head>
<style>
ul{margin:20px;}
ul, ul li{float:left; font-size:20px;}
li{
list-style:none;
margin:2px;
display:block;
overflow:visible;
width:50px;
}
ul li a{
display:block;
color:red;
position:relative;
text-align:center
}
ul li a:hover{
width:80px;
position:relative;
left:-15px;
bottom:11px;
font-size:30px;
}
</style>
</head>
<body>
<ul>
<li><a href=".">о вас</a></li>
<li><a href=".">о нас</a></li>
<li><a href=".">о них</a></li>
<li><a href=".">о том</a></li>
<li><a href=".">о сем</a></li>
<li><a href=".">и т д</a></li>
</ul>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(24.06.2011 в 15:35)
| | | плохо плохо, просто постеснялся сказать ) да и не подкован я пока что во всем этом, активно учусь. Спасибо за детальный, четкий ответ с примером. Но как всегда не все гладко прошло. Пункты меню на самом деле другие) слова разной длины, и между ними растояния то большие, товообще друг на друге сидят. и блок меню ФИКСИРОВАННОЙ ШИРИНЫ, то есть я не могу сделать его меньше, больше (резиновым) - нарушает гармонию моего прелестного дизайна)))
Вот например:
<html>
<head>
<style>
ul{margin:20px;
width:600px; - обязательный атрибут
}
ul, ul li{float:left; font-size:20px;}
li{
list-style:none;
margin:2px;
display:block;
overflow:visible;
width:50px;
}
ul li a{
display:block;
color:red;
position:relative;
text-align:center
}
ul li a:hover{
width:80px;
position:relative;
left:-15px;
bottom:11px;
font-size:30px;
}
</style>
</head>
<body>
<ul>
<li><a href=".">о вас не хотим</a></li> - пункты меню будут не красиво расположены
<li><a href=".">о нас с радостью</a></li>
<li><a href=".">о них позже</a></li>
<li><a href=".">о том о сем</a></li>
<li><a href=".">и т д</a></li>
</ul>
</body>
</html>
|
или я что-то опять туплю? | |
| |
|
|
| |
|
|
| |
для: STRIFER
(24.06.2011 в 17:35)
| | | Я бы посоветовал все же вставить ссылки меню в блоки фиксированной ширины. Иначе для надувания очередного пункта придется использовать джаваскрипт - фиксировать и позже возвращать текущую ширину. К тому же, имея такой уж обязательный атрибут, неплохо бы кратно поделить ширину всего меню на количество пунктов, и всем поровну ширины выдать. Фиксированной, ага. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(24.06.2011 в 18:37)
| | | Ок. Сделаю по проще что нибудь. Спасибо | |
| |
|
|
