Форум Сайтостроение Веб-строительство

Как при помощи css закрепить меню

[Удален]
4770

Здравствуйте!

Скажите, пожалуйста что нужно прописать в css, чтобы меню не двигалось(съезжает рубрика на рубрику при смене разрешения).

Не очень разбираюсь в css, понимаю что надо как-то ее зафиксировать.

Надеюсь на ответ.

сайт http://front.pllaneta.ru/

M2
На сайте с 11.01.2011
Offline
341
mark2011
#1

Если вы про боковое меню, то лично у меня ничего никуда не едет. А если про верхнее - то последний пункт у меня при любом разрешении на другой строке. Здесь надо просто ширину блока расширить.

------------------- Крутые VPS и дедики. Качество по разумной цене ( http://cp.inferno.name/view.php?product=1212&gid=1 ) VPS25OFF - скидка 25% на первый платеж по ссылке выше
[Удален]
#2

Спасибо, так просто :)

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

M2
На сайте с 11.01.2011
Offline
341
mark2011
#3

Я советую ко всему блоку выпадающего меню применять 


position: relative;

left: x;

top: y;

где x и y некоторые цифры, которые вам нужно вычислить опытным путём, изменяя их каждый раз и всматриваясь, как меняется местоположение меню на сайте. Да, и не забывайте про таких "корифеев" как IE, ранние версии оперы... под них, скорее всего, придётся использовать CSS-хаки.

Индексирующий робот Яндекса начал Управление ставками в контекстной Google учит оптимизировать ресурсы
oux
На сайте с 07.02.2010
Offline
83
oux
#4
Подскажите, пожалуйста, где можно подробно почитать о том, как настраивать координаты выпадающего меню. Никак не могу разобраться.

Съзжает из-за класса pureCssMenu pureCssMenum0, уменьши ширину и на меньших разрешениях экрана ничего съезжать не должно.

[Удален]
#5
mark2011:
Я советую ко всему блоку выпадающего меню применять 


position: relative;

left: x;

top: y;


Можете подсказать куда? Вот код

#Menu {

width:1000px; /* ширина меню */

margin:0 auto;

}

#pcm{display:none;}

ul.pureCssMenu ul{display:none} /* прячет выпадающее меню до наведения */

ul.pureCssMenu li:hover>ul{display:block} /* отображает впадение блока при наведении */

ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}

ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;} /* выкидывает в сторону выпадающее меню 3 уровня */

ul.pureCssMenu,ul.pureCssMenu ul {

margin:0px;

list-style:none;

padding:0px 2px 2px 0px;

background-color:#lll;

background-repeat:repeat;

border-color:#808080;

border-width:1px;

border-style:solid;

}

ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {

display:table;

zoom:1;

height:21px;

float: left;

}

ul.pureCssMenu ul{

width:133.35px;/* ширина всплывающего окна */

}

ul.pureCssMenu li{

display:block;

margin:2px 0px 0px 2px;

font-size:0px;

}

ul.pureCssMenu a:active, ul.pureCssMenu a:focus {

outline-style:none;

}

ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {

display:block;

vertical-align:middle;

background-color:#FFFFFF;

border-width:1px;

border-color:#D8D8D8;

border-style:solid;

text-align:center;

text-decoration:none;

padding:2px 5px 5px 10px;

_padding-left:0;

font:normal 11px Tahoma;

color: #D8D8D8;

text-decoration:none;

cursor:default;

}

ul.pureCssMenu span{

overflow:hidden;

}

ul.pureCssMenu li {

float:left;

}

ul.pureCssMenu ul li {

float:none;

}

ul.pureCssMenu ul a {

text-align:left;

white-space:nowrap;

}

ul.pureCssMenu li.sep{

text-align:left;

padding:0px;

line-height:0;

height:100%;

}

ul.pureCssMenu li.sep span{

float:none; padding-right:0;

width:3px;

height:100%;

display:inline-block;

background-color:#808080; background-image:none;}

ul.pureCssMenu ul li.sep span{

width:100%;

height:3px;

}

ul.pureCssMenu li:hover{

position:relative;

}

ul.pureCssMenu li:hover>a{

background-color:#DBF0F9;

border-color:#45ADE4;

border-style:solid;

font:normal 11px Tahoma;

color: #444;

text-decoration:none;

}

ul.pureCssMenu li a:hover{

position:relative;

background-color:#DBF0F9;

border-color:#45ADE4;

border-style:solid;

font:normal 11px Tahoma;

color: #444;

text-decoration:none;

}

ul.pureCssMenu li.dis a {

color: #557D4F !important;

}

ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;

height:16px;

}

ul.pureCssMenu ul img {width:16px;

height:16px;

}

ul.pureCssMenu img.over{display:none}

ul.pureCssMenu li.dis a:hover img.over{display:none !important}

ul.pureCssMenu li.dis a:hover img.def {display:inline !important}

ul.pureCssMenu li:hover > a img.def {display:none}

ul.pureCssMenu li:hover > a img.over {display:inline}

ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}

ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}

ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}

ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}

ul.pureCssMenu span{

display:block;

background-image:url(./images/arrv_white.gif);

background-position:right center;

background-repeat: no-repeat;

padding-right:30px;}

ul.pureCssMenu ul span{background-image:url(./images/arr_black.gif)}

ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white.gif);}

ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span,ul.pureCssMenu table a:hover a:hover a:hover span{background-image:url(./images/arr_white.gif)}

ul.pureCssMenu table a:hover table span,ul.pureCssMenu table a:hover a:hover table span{background-image:url(./images/arr_black.gif)}

ul.pureCssMenu li.pureCssMenui0 {

width:auto;min-width:100px; /* растягивает кнопку по длине слова */

height:23px;

}

ul.pureCssMenu li a.pureCssMenui0{

height:100%;

background-color: #D8D8D8;/* цвет первого слоя меню */

border-width:0px;

font:normal 17px Calibri;

color:#7A7A7A;

}

ul.pureCssMenu li a.pureCssMenui0:hover{

background-color: #82b818;/* цвет второго слоя меню, при наведении */

font:normal 17px Calibri;

color:#FFFFFF;

height: 34px;

}

ul.pureCssMenum0 {

background-color:transparent;

border-width:0px;

height: 40px;

padding:0px 0px 0px 0px;

background-color: #D8D8D8;/* цвет нижнего слоя меню */

background-repeat: repeat-x;

width:100% /* растягивает все меню на ширину блога */

}

ul.pureCssMenum0>li>a {

padding:8px 17px 0px 17px; /*17 делает отступ с правого и левого края кнопки, относительно надписи */

}

ul.pureCssMenum0 a {

padding:8px 10px 0px 10px;

}

ul.pureCssMenum0 ul a {

padding:2px 5px 5px 10px; /*высота выпадающего меню, ширина окна,высота выпадающего меню, отступ текста */

}

ul.pureCssMenum0>li {

margin:0px 0px 0px 0px;

}

ul.pureCssMenum0 li {

margin:0px 0px 0px 0px;

}

ul.pureCssMenum0 li li {

margin:2px 0px 0px 2px;

position: relative;

}

Google: как сделать статические Как можно наказать за SEO для стартапов: подробный
oux
На сайте с 07.02.2010
Offline
83
oux
#6

ТС, я же написал, задайте ширину для ul.pureCssMenum0. Если не разбираетесь в этом - в личку скиньте номер icq, сделаю.

[Удален]
#7
oux:
ТС, я же написал, задайте ширину для ul.pureCssMenum0. Если не разбираетесь в этом - в личку скиньте номер icq, сделаю.

Огромное спасибо за желание помочь, с шапкой меню я уже час назад разобрался. Сейчас речь идет о выпадающем меню, которое я не могу настроить, чтобы не налазило друг на друга.

Вот мне и предложили прописать код

position: relative;

left: x;

top: y;

Только не знаю куда...

gores добавил 05.07.2011 в 17:48

Спасибо, разобрался.

Нужна помощь с CSS Отвечу на ваши вопросы Проблема с png при

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий