Поддержка → Проблемы и решения → Помгите вывести строчки в vmenu правильно.

Помгите вывести строчки в vmenu правильно.

  • Решено Drugman2

    (@drugman2)


    11 лет, 2 месяца назад

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

    http://pastebin.com/raw.php?i=kUnEb0Bi

    Сам сайт вот ‘avto-dop.org’

Просмотр 15 ответов — с 1 по 15 (всего 21)
1 2
  • Автор Drugman2

    (@drugman2)

    11 лет, 2 месяца назад

    наверное так правильнее будет

    .art-vmenublock
{
   background: #1B232D;
   -webkit-border-radius:8px;
   -moz-border-radius:8px;
   border-radius:8px;
   border:1px solid #D74B04;
   padding:5px;
   margin:7px;
}
div.art-vmenublock img
{
   margin: 0;
}

.art-vmenublockcontent
{
   margin:0 auto;
}

ul.art-vmenu, ul.art-vmenu ul
{
   list-style: none;
   display: block;
}

ul.art-vmenu, ul.art-vmenu li
{
   display: block;
   margin: 0;
   padding: 0;
   width: auto;
   line-height: 0;
}

ul.art-vmenu
{
   margin-top: 0;
   margin-bottom: 0;
   position: relative;
}

ul.art-vmenu>li>a
{
   -webkit-border-radius:6px;
   -moz-border-radius:6px;
   border-radius:6px;
   border:1px solid transparent;
   margin:0 auto;
   color: #FFFFFF;
   min-height: 30px;
   line-height: 30px;
}
ul.art-vmenu a
{
   display: block;
   cursor: pointer;
   z-index: 1;
   font-size: 13px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
   font-variant: normal;
   text-align: left;
   position:relative;
}

ul.art-vmenu ul, ul.art-vmenu li{
   position:relative;
}

ul.art-vmenu>li
{
   margin-top: 2px;
}
ul.art-vmenu>li:first-child
{
   margin-top:0;
}

ul.art-vmenu>li>a:hover, ul.art-vmenu>li>a.active:hover
{
   border:1px solid #D74B04;
   margin:0 auto;
}
ul.art-vmenu>li>a:hover, ul.art-vmenu>li>a.active:hover
{
   text-decoration: none;
}

ul.art-vmenu a:hover, ul.art-vmenu a.active:hover
{
   color: #FA681E;
}

ul.art-vmenu>li>a.active:hover>span.border-top, ul.art-vmenu>li>a.active:hover>span.border-bottom
{
   background-color: transparent;
}

ul.art-vmenu>li:hover>a
{
   color: #FA681E;
}

ul.art-vmenu>li>a.active
{
   margin:0 auto;
   text-decoration: none;
   color: #FFFFFF;
}

ul.art-vmenu ul:before
{
   background: #1B232D;
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
   -webkit-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.4);
   -moz-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.4);
   box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.4);
   border:1px solid #D74B04;
   margin:0 auto;
   display: block;
   position: absolute;
   content: ' ';
   z-index: -1;
   top: 30px;
   right: 30px;
   bottom: 30px;
   left: 12px;
}
ul.art-vmenu ul
{
   padding: 43px 43px 43px 25px;
   margin: -43px 0 0 2px;
   visibility: hidden;
   position: absolute;
   z-index: 10;
   background: none;
   min-height: 0;
   background-image: url('images/spacer.gif');
   /* left to right by default */
  left: 0;
   top:0;
}
ul.art-vmenu>li>ul
{
   padding-left: 24px;
   margin-left: -10px;
   padding-top: 43px;
   margin-top: -30px;
   top: 2px;
}
ul.art-vmenu ul.art-vmenu-left-to-right
{
   right: auto;
   left: 0;
   padding: 43px 43px 43px 25px;
   margin: -43px 0 0 2px;
}
ul.art-vmenu>li>ul.art-vmenu-left-to-right
{
   padding-left: 24px;
   margin-left: -10px;
   padding-top: 43px;
   margin-top: -30px;
}
ul.art-vmenu ul.art-vmenu-right-to-left
{
   left: auto;
   right: 0;
   padding: 43px 25px 43px 43px;
   margin: -43px 2px 0 0;
}
ul.art-vmenu>li>ul.art-vmenu-right-to-left
{
   padding-right: 24px;
   margin-right: -10px;
   padding-top: 43px;
   margin-top: -30px;
}

ul.art-vmenu>li>ul:before
{
   top: 30px;
   right: 30px;
   bottom: 30px;
   left: 11px;
}
ul.art-vmenu ul ul.art-vmenu-left-to-right:before {
   right: 30px;
   left: 12px;
}
ul.art-vmenu ul ul.art-vmenu-right-to-left:before {
   right: 12px;
   left: 30px;
}
ul.art-vmenu>li>ul.art-vmenu-left-to-right:before {
   right: 30px;
   left: 11px;
}
ul.art-vmenu>li>ul.art-vmenu-right-to-left:before {
   right: 11px;
   left: 30px;
}

ul.art-vmenu li li a
{
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
   margin:0 auto;
}

ul.art-vmenu ul a
{
   display: block;
   position: relative;
   min-height: 22px;
   overflow: visible;
   padding: 0;
   padding-left: 0;
   min-width: 7em;
   z-index: 0;
   line-height: 22px;
   color: #FFFFFF;
   font-size: 12px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
   font-variant: normal;
   text-align: left;
   text-indent: 0;
   word-spacing: 0;
   margin-left: 0;
   margin-right: 0;
   padding-right: 0;
}

ul.art-vmenu ul a:visited, ul.art-vmenu ul a.active:hover, ul.art-vmenu ul a:hover, ul.art-vmenu ul a.active
{
   line-height: 22px;
   color: #FFFFFF;
   font-size: 12px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
   font-variant: normal;
   text-align: left;
   text-indent: 0;
   word-spacing: 0;
   margin-left: 0;
   margin-right: 0;
}

ul.art-vmenu li li
{
   position: relative;
   margin-top: 3px;
}

ul.art-vmenu li li:first-child
{
   margin-top: 0;
}

ul.art-vmenu li  {
   position: relative;
}

ul.art-vmenu:after, ul.art-vmenu ul:after
{
   content: ".";
   height: 0;
   display: block;
   visibility: hidden;
   overflow: hidden;
   clear: both;
}

ul.art-vmenu li:hover
{
   z-index: 10000;
   white-space: normal;
}
ul.art-vmenu li:hover>ul
{
   visibility: visible;
   /* left to right by default */
  left: 100%;
}

ul.art-vmenu li:hover>ul.art-vmenu-left-to-right
{
   right: auto;
   left: 100%;
}
ul.art-vmenu li:hover>ul.art-vmenu-right-to-left
{
   left: auto;
   right: 100%;
}

ul.art-vmenu ul>li>a:hover, ul.art-vmenu ul>li>a.active:hover, ul.art-vmenu ul>li:hover>a
{
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
   margin:0 auto;
}
ul.art-vmenu ul li a:hover, ul.art-vmenu ul li a.active:hover
{
   text-decoration: none;
   color: #FA681E;
}

ul.art-vmenu ul a:hover:after
{
   background-position: center ;
}
ul.art-vmenu ul a.active:hover:after
{
   background-position: center ;
}
ul.art-vmenu ul a.active:after
{
   background-position: bottom ;
}

ul.art-vmenu ul li:hover>a
{
   color: #FA681E;
}

ul.art-vmenu ul>li>a.active
{
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
   margin:0 auto;
}
ul.art-vmenu ul a.active, ul.art-vmenu ul a:hover, ul.art-vmenu ul a.active:hover
{
   text-decoration: none;
   color: #FFFFFF;
}

ul.art-vmenu li li:after
{
   display: block;
   position: absolute;
   content: ' ';
   height: 1px;
   top: -3px;
   left: 0;
   right: 0;
   z-index: 1;
   border-bottom: 1px solid #872F03;
}

ul.art-vmenu li li:before
{
   display: block;
   position: absolute;
   content: ' ';
   left: 0;
   right: 0;
   top: -3px;
   z-index: 0;
   height: 3px;
}
ul.art-vmenu li li:first-child:before, ul.art-vmenu li li:first-child:after
{
   display: none;
} 

.art-block
{
   background: #1B232D;
   background: rgba(27, 35, 45, 0.8);
   -webkit-border-radius:8px;
   -moz-border-radius:8px;
   border-radius:8px;
   border:1px solid rgba(215, 75, 4, 0.8);
   padding:5px;
   margin:7px;
}
div.art-block img
{
   border: none;
   margin: 0;
}

.art-blockcontent
{
   margin:0 auto;
   color: #FFFFFF;
   font-size: 13px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   text-align: left;
   line-height: 175%;
}
.art-blockcontent table,
.art-blockcontent li,
.art-blockcontent a,
.art-blockcontent a:link,
.art-blockcontent a:visited,
.art-blockcontent a:hover
{
   color: #FFFFFF;
   font-size: 13px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   text-align: left;
   line-height: 175%;
}

.art-blockcontent p
{
   margin: 0 5px;
}

.art-blockcontent a, .art-blockcontent a:link
{
   color: #FFFFFF;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   text-decoration: none;
}

.art-blockcontent a:visited, .art-blockcontent a.visited
{
   color: #FFFFFF;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   text-decoration: none;
}

.art-blockcontent a:hover, .art-blockcontent a.hover
{
   color: #FA6419;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   text-decoration: none;
}
.art-block li
{
   font-size: 13px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   line-height: 175%;
   color: #FFFFFF;
   margin: 5px 0 0 10px;
}

    Artem Frolov

    (@dikiy_forester)

    11 лет, 2 месяца назад

    Попробуйте так:
    .art-vmenu-left-to-right{ width: 250px; }

    Artem Frolov

    (@dikiy_forester)

    11 лет, 2 месяца назад

    Лучше дополните этот код

    ul.art-vmenu > li > ul.art-vmenu-left-to-right {
padding-left: 24px;
margin-left: -10px;
padding-top: 43px;
margin-top: -30px;
}

    так:

    ul.art-vmenu > li > ul.art-vmenu-left-to-right {
padding-left: 24px;
margin-left: -10px;
padding-top: 43px;
margin-top: -30px;
width: 250px;
}

    А вот «с нуля» вы зря сказали, много людей очень долго трудились чтобы создать тот «нуль» с которого вы начали. Не обижайте их.

    Автор Drugman2

    (@drugman2)

    11 лет, 2 месяца назад

    Спасибо! Знать бы еще куда его ставить, что бы попробовать. (

    Автор Drugman2

    (@drugman2)

    11 лет, 2 месяца назад

    Честно, первый сайт который от и до сделан самостоятельно. Шаблон рисовал в артистиере, это наверное 25 редакция его, остальное все из сети. Вот только с меню не нашел. Поставил плагин контактной формы.

    Artem Frolov

    (@dikiy_forester)

    11 лет, 2 месяца назад

    Честно, первый сайт который от и до сделан самостоятельно. Шаблон рисовал в артистиере, это наверное 25 редакция его, остальное все из сети. Вот только с меню не нашел. Поставил плагин контактной формы.

    Это все прекрасно, а скрипт WordPress? 😉

    Автор Drugman2

    (@drugman2)

    11 лет, 2 месяца назад

    Этот код у меня, по моему, в двух местах встречается, в каждом менять или я что-то не досмотрел? И как текст кода так красиво вставлять подскажите.

    Автор Drugman2

    (@drugman2)

    11 лет, 2 месяца назад

    Какой скрипт, я просто терминологией еще не владею. )

    Автор Drugman2

    (@drugman2)

    11 лет, 2 месяца назад

    Жаль, но без изменений

    Модератор Yuri

    (@yube)

    11 лет, 2 месяца назад

    [жуткий оффтоп]
    Помню времена, когда «создал сайт с нуля» подразумевало
    vi index.html
    🙁

    Автор Drugman2

    (@drugman2)

    11 лет, 2 месяца назад

    Я тогда пешком под стол ходил )))

    Artem Frolov

    (@dikiy_forester)

    11 лет, 2 месяца назад

    Этот скрипт у вас в одном месте встречается, ищите полное соответствие.
    Ну или вставьте первый вариант в конец вашего файла.

    Оборачивайте код в обратные апострофы (как написано внизу под полем ввода комментария) или кнопкой с надписью code над полем.

    Какой скрипт, я просто терминологией еще не владею. )

    WordPress это ведь не просто слово, не так ли? Его же кто-то до вас разработал…

    Artem Frolov

    (@dikiy_forester)

    11 лет, 2 месяца назад

    F5 нажмите.

    Автор Drugman2

    (@drugman2)

    11 лет, 2 месяца назад

    Таки да.

    Автор Drugman2

    (@drugman2)

    11 лет, 2 месяца назад

    Спасибо! Проблема решена. Объясните неуку, почему просто перезаход на сайт не помог?

Просмотр 15 ответов — с 1 по 15 (всего 21)
1 2
  • Тема «Помгите вывести строчки в vmenu правильно.» закрыта для новых ответов.

Метки темы

Просмотр