Вход Регистрация
Создать Тикет
Создать сайт бесплатно   Регистрация домена
Menu
Создать Тикет Редактировать Тикет

Главная » Служба технической поддержки по uCoz » Тикет # 43 ↓

Статус тикета: Вопрос закрыт

Горизонтальное меню

В общем решил поставить на сайт горизонтальное меню, но стандартный шаблон не устроил, и я его немного изменил, добавив по бокам смайлики. Шаблон, соответственно изменился по размерам, и само меню осталось висеть в углу сайта. Передвинуть у меня его получилось, но назрела небольшая проблемка...текст в подменю(которые "выпадающие") сместился на то расстояние, на которое я двигал основное меню. Можно ли как то передвинуть все вместе?
Объяснять я не мастер, посему вот вам скрин...теперь, я думаю все понятно будет.

И кстати, вот линк на мой сайт. Меню я пока не двигал.
http://xd-tm.do.am/
Прикрепления: Архив: Нет | Изображения: Изображение 1
Дата: 18.05.2024 | Ответов: 43

Ответ #1 - Написал Prochtenniy
12.01.2013 (14:20 Суббота) Спам
Передвинуть меню полностью - должно получиться.
Сейчас оно стоит вверху, а вам надо ниже по средине как на скриншоте? Из описания не совсем понятно, что происходит с выпадающим меню. Опишите именно это детальнее или установите на сайте и дайте ссылку тогда.

Ну вообще, проблема может быть из-за неудачного место положения меню, конфликты могут быть в CSS или даже в html. Так же, может влиять и данные в CSS меню, т.е вы там не изменили показания расстояний и положения меню и по этому идёт смещение.
Ответ #2 - Написал SparK51
12.01.2013 (14:54 Суббота) Спам
В общем кнопки из подменю должны были переместится вниз вместе с самим меню, а они ушли в два раза дальше и поэтому в подменю ничего нету. Прямоугольник с вопросительным знаком показывает, где примерно кнопки находятся после перемещения
Ответ #3 - Написал Prochtenniy
12.01.2013 (15:46 Суббота) Спам
На тестовом сайте, меню переноситься полностью и корректно. Возможно ошибки у вас на сайте из-за сбитого кода. Или ставите меню туда, где на него что-то влияет.
Ответ #4 - Написал SparK51
12.01.2013 (16:17 Суббота) Спам
Не подскажете, как вы его перенести?
Ответ #5 - Написал SparK51
12.01.2013 (16:37 Суббота) Спам
Так это же не тот код. Он в css. А это править ссылки в самом меню?
Ответ #6 - Написал Prochtenniy
12.01.2013 (16:40 Суббота) Спам
Это html код меню, а в ксс его стили. Стили я не трогал. Только код меню.
Ответ #7 - Написал SparK51
12.01.2013 (16:41 Суббота) Спам
Да. Но у меня этот код и так стоит, с его помощью меню не переносится...Мне надо перенести меню вниз
Ответ #8 - Написал SparK51
12.01.2013 (16:43 Суббота) Спам
вот css
Код

#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background: url('/HORMENssdU.png') no-repeat scroll 0 0 transparent;
clear: both;
font-size: 12px;
height: 280px;
padding: 0 0 0 9px;
position: relative;
width: 1119px;
}
#nav ul {
background-color: #222;
border:1px solid #222;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
position: absolute;
top: -9999px;
z-index: 2;

-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);

-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;

-moz-transition: -moz-transform 0.1s linear;
-ms-transition: -ms-transform 0.1s linear;
-o-transition: -o-transform 0.1s linear;
-webkit-transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear;
}
#nav li {
background: url('http://wallaby.ucoz.ru/images_site/menu_line.png') no-repeat scroll right 5px transparent;
float: left;
position: relative;
}
#nav li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 30px;
padding: 23px 20px 0;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
background: none repeat scroll 0 0 #121212;
outline: 0 none;
}
#nav li:hover ul.subs {
left: 0;
top: 53px;
width: 180px;

-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
#nav ul li {
background: none;
width: 100%;
}
#nav ul li a {
float: none;
}
#nav ul li:hover > a {
background-color: #121212;
color: #00B4FF;
}
#lavalamp {
background: url('http://wallaby.ucoz.ru/images_site/lavalamp.png') no-repeat scroll 0 0 transparent;
height: 16px;
left: 13px;
position: absolute;
top: 0px;
width: 64px;

-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
#lavalamp:hover {
-moz-transition-duration: 3000s;
-ms-transition-duration: 3000s;
-o-transition-duration: 3000s;
-webkit-transition-duration: 3000s;
transition-duration: 3000s;
}
#nav li:nth-child(1):hover ~ #lavalamp {
left: 13px;
}
#nav li:nth-child(2):hover ~ #lavalamp {
left: 90px;
}
#nav li:nth-child(3):hover ~ #lavalamp {
left: 170px;
}
#nav li:nth-child(4):hover ~ #lavalamp {
left: 250px;
}
#nav li:nth-child(5):hover ~ #lavalamp {
left: 330px;
}
#nav li:nth-child(6):hover ~ #lavalamp {
left: 410px;
}
#nav li:nth-child(7):hover ~ #lavalamp {
left: 490px;
}
#nav li:nth-child(8):hover ~ #lavalamp {
left: 565px;
}
Ответ #10 - Написал Prochtenniy
12.01.2013 (16:49 Суббота) Спам
У вас просто на сайте испорчен код шаблона. Поэтому там сложно разобраться и правильно сделать. Вам надо поставить шаблон корректно и если надо меню в шапку по средине поставить, то правильно это сделать. Возможно предаётся немного переверстать шапку.

Если поставить это меню на другом шаблоне или на голой странице - то оно работает в любой точке сайта одинаково.
Ответ #9 - Написал SparK51
12.01.2013 (16:48 Суббота) Спам
Нашел бекап с перемещенным меню, он сейчас стоит на сайте, можете глянуть

вот его код
Код

#nav,#nav ul {  
  list-style: none outside none;  
  margin: 0;  
  padding: 0;  
  }  
  #nav {  
  background: url('/HORMENU.png') no-repeat scroll 0 0 transparent;  
  clear: both;  
  font-size: 12px;  
  height: 280px;  
  padding: 0 0 0 9px;  
  position: relative;  
  width: 1119px;  
  }  
  #nav ul {  
  background-color: #222;  
  border:1px solid #222;  
  border-radius: 0 5px 5px 5px;  
  border-width: 0 1px 1px;  
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);  
  left: -9999px;  
  overflow: hidden;  
  position: absolute;  
  top: -9999px;  
  z-index: 2;  

  -moz-transform: scaleY(0);  
  -ms-transform: scaleY(0);  
  -o-transform: scaleY(0);  
  -webkit-transform: scaleY(0);  
  transform: scaleY(0);  

  -moz-transform-origin: 0 0;  
  -ms-transform-origin: 0 0;  
  -o-transform-origin: 0 0;  
  -webkit-transform-origin: 0 0;  
  transform-origin: 0 0;  

  -moz-transition: -moz-transform 0.1s linear;  
  -ms-transition: -ms-transform 0.1s linear;  
  -o-transition: -o-transform 0.1s linear;  
  -webkit-transition: -webkit-transform 0.1s linear;  
  transition: transform 0.1s linear;  
  }  
  #nav li {  
  background: url('http://wallaby.ucoz.ru/images_site/menu_line.png') no-repeat scroll right 5px transparent;  
  float: left;  
  position: relative;
  top: 220px;
  left: 240px;
  }  
  #nav li a {  
  color: #FFFFFF;  
  display: block;  
  float: left;  
  font-weight: normal;  
  height: 30px;  
  padding: 26px 20px 0;  
  position: relative;
  top: 0px;
  left: 0px;
  text-decoration: none;  
  text-shadow: 1px 1px 1px #000000;  
  }  
  #nav li:hover > a {  
  color: #00B4FF;  
  }  
  #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {  
  background: none repeat scroll 0 0 transparent;  
  outline: 0 none;  
  }  
  #nav li:hover ul.subs {  
  left: 0;  
  top: 53px;  
  width: 180px;  

  -moz-transform: scaleY(1);  
  -ms-transform: scaleY(1);  
  -o-transform: scaleY(1);  
  -webkit-transform: scaleY(1);  
  transform: scaleY(1);  
  }  
  #nav ul li {  
  background: none;  
  width: 100%;  
  }  
  #nav ul li a {  
  float: none;  
  }  
  #nav ul li:hover > a {  
  background-color: #121212;  
  color: #00B4FF;  
  }  
  #lavalamp {  
  background: url('http://wallaby.ucoz.ru/images_site/lavalamp.png') no-repeat scroll 0 0 transparent;  
  height: 16px;  
  left: 272px;  
  position: absolute;  
  top: 220px;  
  width: 64px;  

  -moz-transition: all 300ms ease;  
  -ms-transition: all 300ms ease;  
  -o-transition: all 300ms ease;  
  -webkit-transition: all 300ms ease;  
  transition: all 300ms ease;  
  }  
  #lavalamp:hover {  
  -moz-transition-duration: 3000s;  
  -ms-transition-duration: 3000s;  
  -o-transition-duration: 3000s;  
  -webkit-transition-duration: 3000s;  
  transition-duration: 3000s;  
  }  
  #nav li:nth-child(1):hover ~ #lavalamp {  
  left: 272px;  
  }  
  #nav li:nth-child(2):hover ~ #lavalamp {  
  left: 352px;  
  }  
  #nav li:nth-child(3):hover ~ #lavalamp {  
  left: 437px;  
  }  
  #nav li:nth-child(4):hover ~ #lavalamp {  
  left: 525px;  
  }  
  #nav li:nth-child(5):hover ~ #lavalamp {  
  left: 609px;  
  }  
  #nav li:nth-child(6):hover ~ #lavalamp {  
  left: 695px;  
  }  
  #nav li:nth-child(7):hover ~ #lavalamp {  
  left: 780px;  
  }
Ответ #11 - Написал SparK51
12.01.2013 (16:52 Суббота) Спам
Понятно...просто опыта работы с сайтами практически нету, так что наврядли что то сделаю. Спасибо за ответ!
Ответ #12 - Написал Prochtenniy
12.01.2013 (17:00 Суббота) Спам
Вам надо просто ставить код меню куда надо, а не ксс его настраивать. Так будет правильно.
Ответ #13 - Написал SparK51
12.01.2013 (22:03 Суббота) Спам
В том то и дело, что я вставил туда куда надо. Мне просто нужно подкорректировать ее положение под шаблон. Если его, шаблон, не менять, то все будет нормально, но так как я его поменял(старый не понравился) он изменился в размерах, и теперь мне нужно подогнать меню под него. Вот так.
Ответ #14 - Написал Prochtenniy
12.01.2013 (22:13 Суббота) Спам
Необходимо ставить код меню туда куда надо, при этом не трогать для этого его ксс. Не надо менять размеры и отступы в ксс меню, для регулирования его положения. Надо само меню, так как оно есть двигать. Для этого уже коду меню, можно присвоить класс или id и уже ему задать нужные отступы и положения.
Ответ #15 - Написал SparK51
12.01.2013 (23:33 Суббота) Спам
Вот! Именно это мне и нужно. Только я не знаю не как это сделать - ну айди присвоить
Ответ #16 - Написал Prochtenniy
13.01.2013 (01:02 Воскресенье) Спам
Пример:

присваиваем id тегу div

<div id="menushead">тут html код меню</div>

это в ксс

#menushead {padding-top:12px;margin-left:54px;}
Ответ #17 - Написал SparK51
13.01.2013 (17:41 Воскресенье) Спам
Это то что нужно, но когда в html я поменял код

<div id="menushead">
сюда вставил код меню
</div>

меню из графического превратилось в текстовое(
Ответ #18 - Написал SparK51
13.01.2013 (17:48 Воскресенье) Спам
Прошлую проблему я решил, но это код для того, что бы двигать всю верхнюю часть. а мне нужно передвинуть только эти кнопочки из меню
Ответ #19 - Написал Prochtenniy
13.01.2013 (17:52 Воскресенье) Спам
Как понять верхнюю часть?
Ответ #20 - Написал SparK51
13.01.2013 (17:57 Воскресенье) Спам
Ну вот сейчас я поменял код меню в html

<div id="menushead">
сюда вставил код меню
</div>

потом вставил в ксс

#menushead {padding-top:12px;margin-left:54px;}

поменял значение 12 на 100 и 54 на 100 и у меня сверху появилось голое место, а мне нужно, чтобы переместилось только меню
Ответ #21 - Написал SparK51
13.01.2013 (17:58 Воскресенье) Спам
То есть появился отступ сверху и слева по 100px
Вот сейчас на сайте
Ответ #22 - Написал Prochtenniy
13.01.2013 (18:24 Воскресенье) Спам
У вас, фоном меню прописана картинка со смайликами - поэтому сдвигаться с меню и она. Поэтому стоит попробовать так,

Код
#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background: url('http://xd-tm.do.am/HORMENssdU.png') no-repeat scroll 0 0 transparent;
clear: both;
font-size: 12px;
height: 280px;
padding: 200 0 0 9px;
position: relative;
width: 1119px;
}
#nav ul {
background-color: #222;
border:1px solid #222;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
position: absolute;
top: -9999px;
z-index: 2;

-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);

-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;

-moz-transition: -moz-transform 0.1s linear;
-ms-transition: -ms-transform 0.1s linear;
-o-transition: -o-transform 0.1s linear;
-webkit-transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear;
}
#nav li {
background: url('http://wallaby.ucoz.ru/images_site/menu_line.png') no-repeat scroll right 5px transparent;
float: left;
position: relative;
}
#nav li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 30px;
padding: 23px 20px 0;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
background: none repeat scroll 0 0 #121212;
outline: 0 none;
}
#nav li:hover ul.subs {
left: 0;
top: 53px;
width: 180px;

-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
#nav ul li {
background: none;
width: 100%;
}
#nav ul li a {
float: none;
}
#nav ul li:hover > a {
background-color: #121212;
color: #00B4FF;
}
#lavalamp {
background: url('http://wallaby.ucoz.ru/images_site/lavalamp.png') no-repeat scroll 0 0 transparent;
height: 16px;
left: 13px;
position: absolute;
top: 200px;
width: 64px;

-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
#lavalamp:hover {
-moz-transition-duration: 3000s;
-ms-transition-duration: 3000s;
-o-transition-duration: 3000s;
-webkit-transition-duration: 3000s;
transition-duration: 3000s;
}
#nav li:nth-child(1):hover ~ #lavalamp {
left: 13px;
}
#nav li:nth-child(2):hover ~ #lavalamp {
left: 90px;
}
#nav li:nth-child(3):hover ~ #lavalamp {
left: 170px;
}
#nav li:nth-child(4):hover ~ #lavalamp {
left: 250px;
}
#nav li:nth-child(5):hover ~ #lavalamp {
left: 330px;
}
#nav li:nth-child(6):hover ~ #lavalamp {
left: 410px;
}
#nav li:nth-child(7):hover ~ #lavalamp {
left: 490px;
}
#nav li:nth-child(8):hover ~ #lavalamp {
left: 565px;
}


без menushead
Ответ #23 - Написал SparK51
13.01.2013 (20:56 Воскресенье) Спам
Уже ближе к истине...

если просто вставить ваш код, то теперь отступ появится снизу, но я отрегулировал его, сменив значение

Код

#nav {
background: url('http://xd-tm.do.am/HORMENssdU.png') no-repeat scroll 0 0 transparent;
clear: both;
font-size: 12px;
height: 280px;
padding: 200 0 0 9px;
position: relative;
width: 1119px;
}


Heigt поменял на 80 и отступ снизу ушел.
Теперь вопрос, как вы сдвинули кнопки относительно фона.
Ответ #24 - Написал Prochtenniy
13.01.2013 (21:08 Воскресенье) Спам
padding: 200 0 0 9px;
Ответ #25 - Написал SparK51
13.01.2013 (23:08 Воскресенье) Спам
Аллилуйя, это то что мне нужно было. Правда теперь у меня бэкграунд сдвинулся влево-_-. справа черная полоса. и еще в Menu 1 и Menu 3 если курсор опустить ниже первого пункта она исчезает
Ответ #26 - Написал SparK51
13.01.2013 (23:09 Воскресенье) Спам
Еще и снизу полоса
Ответ #27 - Написал Prochtenniy
13.01.2013 (23:19 Воскресенье) Спам
Ну по поводу смещения бекграунда и полосы справа - это ошибки в html. Это называют поехавшим шаблоном. Когда ставишь одно, оно действует на второе и третье... Нужно для настройки шаблона подходит комплексно, чтобы устранить ошибки. А так, то там подправит, то там - так долго, не верно и может даже быть безрезультативно.

А по поводу Menu 1 и Menu 3 и полосы внизу - когда они появились? Что-то ещё меняли?
Ответ #28 - Написал SparK51
13.01.2013 (23:32 Воскресенье) Спам
Насчет menu 1 и 3 я так и не допер, но полосы появились из за смены значений padding. я поставил 220 0 0 350px
Ответ #29 - Написал SparK51
13.01.2013 (23:32 Воскресенье) Спам
возможно это как то взаимосвязано
Ответ #30 - Написал SparK51
13.01.2013 (23:34 Воскресенье) Спам
К ним еще и второе меню присоединилось... сейчас попробую полностью удалить меню и поставить снова...
1-20 21-32