Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Неправильно отображается меню сайта (меню отображается неровно)
Неправильно отображается меню сайта
Marker_ya
Сообщений: 3
Репутация: 2

Сообщение # 1 | 18:47:36
Добрый день! Буду максимально краток и приступлю сразу к делу. В заранее большое спасибо. Разрабатываю один сайт. Приобрёл его уже в готовых шаблонах от uTemplete.Pro, вот ссылка самого шаблона в магазине uTemplete: Перейти. Всё делаю сам, пока всё отлично, тьфу, тьфу тьфу. Но вот только возникла проблема с меню. В оригинале меню должно быть такое: Перейти на демо сайт платного шаблона от uTemplete.Pro. А когда установил шаблон, всё заработало идеально, но вот только появился косяк с меню, не стоит так как требуется. Вот как у меня получилось: стоит не ровно, и меню не прибито к самому верху и ходит вместе создавая дырку вверху так быть не должно, лучше не объясняться словами, а посмотреть: Фото 1 (не ровное меню, не как на демо-сайте) Фото 2 (меню не прибито и ходит и создает пространство сверху, если продолжать идти вниз сайта). Данная проблема, создает дополнительные проблемы, так как если заходить в другие разделы сайта (внутренние), он закрывает не мало кнопок. Например такие как: добавить, изменить, удалить и так далее, то что под себя настроил.

- Ссылка на сам Сайт

Кидаю пока, только верхнюю часть сайта исходный код.
И жду, чтобы в мою сторону были ещё запросы.
Но может, эту как-то эту проблему, можно решить всего одной строкой.
Код
<header>
<div class="container">
<div class="social">
<a href="/"></a>
<a href="/"></a>
<a href="/"></a>
</div>
<div class="contacts">
<span>European Union, Latvia, Riga.</span>
<span>E-Mail: <a href="">autoklavs-support@gmail.com</a></span>
<span>+371-25-66-03-03</span>
</div>
</div>
</header>
<nav>
     <div class="container"><a href="$HOME_PAGE_LINK$" class="logo">AUTOKLAVS<span>net</span>$NMENU_1$</a></div>
</nav>


С Ucoz, работаю 7 лет идеальные года. Но такой вопрос к сожалению решить не смог. И по сею минуту решаю.
_VITALIK_
Сообщений: 696
Репутация: 115
Уровень замечаний:

Сообщение # 2 | 19:28:02
Marker_ya, Сам сайт бы посмотреть


Добавлено (03 Мар 2016, 19:28:02)
---------------------------------------------
Вот чо мешает

Цитата
<div class="container">
<a href="http://buildinc-demo.ucoz.net/" class="logo">AUTOKLAVS<span>net</span></a>
<div id="uNMenuDiv1" class="uMenuV"><ul class="uMenuRoot">
<li><a class=" uMenuItemA" href="/"><span>Главная</span></a></li>
<li><a class=" uMenuItemA" href="/"><span>Услуги компании</span></a></li>
<li><a class=" uMenuItemA" href="/"><span>Наш ассортимент</span></a></li>
<li><a class=" uMenuItemA" href="/"><span>О компании</span></a></li>
<li><a class=" uMenuItemA" href="/"><span>Отзывы</span></a></li></ul></div></div>
</nav>




наглядно
Прикрепления: 7520022.jpg(16Kb) · 0623992.jpg(29Kb)

Сообщение отредактировал _VITALIK_ - Четверг, 03 Мар 2016, 20:23:16
Танюшка_Украина
Сообщений: 3
Репутация: 0

Сообщение # 3 | 22:29:29
Подыму тему, раз уж по другому не получается.
Меню отображается маркированным списком.Как верхнее, так и нижнее. раньше было все путем. Но после обновления браузеров ( проверено на Яндексе, Гугле, Мозиле, Эксплоурере) наблюдаем стандартные маркеры в виде кружков. Тег в таблице стилей list-style-type отображен со значением none.Все оба раза, что он там включен.Сильно подозреваю, что теперь его надо добавить еще раз. Вопрос в какой class?
Вот как это выглядит сейчас


Вот адрес сайта http://www.foldkittens.ru
Прикрепления: 6626925.jpg(54Kb)
webanet
Личный менеджер
Сообщений: 22849
Репутация: 4857

Сообщение # 4 | 23:52:06
Танюшка_Украина, у вас отвалилась картинка list-style-image: url("/33.png");
Цитата
Тег в таблице стилей list-style-type отображен со значением none.
в какой таблице?

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
Solaris(Olga)
Сообщений: 342
Репутация: 238

Сообщение # 5 | 00:59:50
Цитата Танюшка_Украина ()
Вопрос в какой class?

Код
#menufon ul li {list-style-type: none;}
Танюшка_Украина
Сообщений: 3
Репутация: 0

Сообщение # 6 | 16:38:11
Цитата webanet ()
в какой таблице?
В таблице стилей или CSS.
Цитата Solaris(Olga) ()
#menufon ul li {list-style-type: none;}
Так и было до обновления.
Проблема с маркерами решилась после добавления вот этого

Код
ul, menu, dir {
list-style-type: none;}

Осталась интересная проблема.При первой загрузке страницы название каждой кнопки меню выстраивается в две строки, что "разрывает" меню. После некоторого времени, либо смены масштаба отображения страницы названия кнопок меню выстраиваются в одну строку.И разрыв уходит.Замечено в яндекс браузере. В Фаерфоксе разрыв меньше, но названия кнопок в одну строку и перезагрузка, масштаб не влияют на разрыв.. Гугл и Эксплоурер читает все корректно.И как лечить?
Рассматриваю варианты увеличить подложку меню по ширине. Но это скорее косметический ремонт. Что-то влияет.Буду благодарна за подсказку, что именно.
Solaris(Olga)
Сообщений: 342
Репутация: 238

Сообщение # 7 | 16:58:40
Цитата Танюшка_Украина ()
Буду благодарна за подсказку

Лучше сделать меню вручную, а то это ужасно.

Вот у вас запутанные стили css, код меню 250(!) строк и 8 кб(!) А на что? По-сути на несколько ссылок...

Код
<div id="menufon">
<!-- <block1> -->
<div class="blockcontent">
<!-- <bc> -->
<div id="uMenuDiv1" class="uMenuV" style="position:relative;">
   <ul class="uMenuRoot">
      <li>
         <div class="umn-tl">
            <div class="umn-tr">
               <div class="umn-tc"></div>
            </div>
         </div>
         <div class="umn-ml">
            <div class="umn-mr">
               <div class="umn-mc">
                  <div class="uMenuItem"><a href="/"><span>Главная страница</span></a></div>
               </div>
            </div>
         </div>
         <div class="umn-bl">
            <div class="umn-br">
               <div class="umn-bc">
                  <div class="umn-footer"></div>
               </div>
            </div>
         </div>
      </li>
      <li>
         <div class="umn-tl">
            <div class="umn-tr">
               <div class="umn-tc"></div>
            </div>
         </div>
         <div class="umn-ml">
            <div class="umn-mr">
               <div class="umn-mc">
                  <div class="uMenuItem"><a href="/index/nashi_koshki/0-13"><span>Наши кошки  (Females)</span></a></div>
               </div>
            </div>
         </div>
         <div class="umn-bl">
            <div class="umn-br">
               <div class="umn-bc">
                  <div class="umn-footer"></div>
               </div>
            </div>
         </div>
      </li>
      <li style="position:relative;">
         <div class="umn-tl">
            <div class="umn-tr">
               <div class="umn-tc"></div>
            </div>
         </div>
         <div class="umn-ml">
            <div class="umn-mr">
               <div class="umn-mc">
                  <div class="uMenuItem">
                     <div class="uMenuArrow"></div>
                     <a href="/index/0-2"><span>Наши коты (Males)</span></a>
                  </div>
               </div>
            </div>
         </div>
         <div class="umn-bl">
            <div class="umn-br">
               <div class="umn-bc">
                  <div class="umn-footer"></div>
               </div>
            </div>
         </div>
         <ul style="display:none;">
            <li>
               <div class="uMenuItem"><a href="http://www.foldkittens.ru/index/dzhulian/0-37"><span>Джулиан</span></a></div>
            </li>
            <li>
               <div class="uMenuItem"><a href="http://www.foldkittens.ru/index/zhigolo/0-35"><span>Жиголо</span></a></div>
            </li>
            <li>
               <div class="uMenuItem"><a href="http://www.foldkittens.ru/index/koty_na_vjazku/0-36"><span>Коты на вязку</span></a></div>
            </li>
         </ul>
      </li>
      <li>
         <div class="umn-tl">
            <div class="umn-tr">
               <div class="umn-tc"></div>
            </div>
         </div>
         <div class="umn-ml">
            <div class="umn-mr">
               <div class="umn-mc">
                  <div class="uMenuItem"><a href="/index/kotjata_dlja_vas/0-14"><span>Котята для вас (Kittens)</span></a></div>
               </div>
            </div>
         </div>
         <div class="umn-bl">
            <div class="umn-br">
               <div class="umn-bc">
                  <div class="umn-footer"></div>
               </div>
            </div>
         </div>
      </li>
      <li>
         <div class="umn-tl">
            <div class="umn-tr">
               <div class="umn-tc"></div>
            </div>
         </div>
         <div class="umn-ml">
            <div class="umn-mr">
               <div class="umn-mc">
                  <div class="uMenuItem"><a href="/index/0-4"><span>Котята наших друзей</span></a></div>
               </div>
            </div>
         </div>
         <div class="umn-bl">
            <div class="umn-br">
               <div class="umn-bc">
                  <div class="umn-footer"></div>
               </div>
            </div>
         </div>
      </li>
      <li>
         <div class="umn-tl">
            <div class="umn-tr">
               <div class="umn-tc"></div>
            </div>
         </div>
         <div class="umn-ml">
            <div class="umn-mr">
               <div class="umn-mc">
                  <div class="uMenuItem"><a href="/index/0-5"><span>Наши планы ( Plans)</span></a></div>
               </div>
            </div>
         </div>
         <div class="umn-bl">
            <div class="umn-br">
               <div class="umn-bc">
                  <div class="umn-footer"></div>
               </div>
            </div>
         </div>
      </li>
      <li style="position:relative;">
         <div class="umn-tl">
            <div class="umn-tr">
               <div class="umn-tc"></div>
            </div>
         </div>
         <div class="umn-ml">
            <div class="umn-mr">
               <div class="umn-mc">
                  <div class="uMenuItem">
                     <div class="uMenuArrow"></div>
                     <a href="/index/0-3"><span>Прошлые пометы</span></a>
                  </div>
               </div>
            </div>
         </div>
         <div class="umn-bl">
            <div class="umn-br">
               <div class="umn-bc">
                  <div class="umn-footer"></div>
               </div>
            </div>
         </div>
         <ul style="display:none;">
            <li>
               <div class="uMenuItem"><a href="/index/litter_a_d_r_11_05_2012g/0-18"><span>Litter A. Д.р. 11.05...</span></a></div>
            </li>
            <li>
               <div class="uMenuItem"><a href="/index/litter_b_d_r_13_04_2013g/0-19"><span>Litter B. Д.р. 13.04...</span></a></div>
            </li>
            <li>
               <div class="uMenuItem"><a href="/index/litter_c_d_r_11_01_2014g/0-20"><span>Litter C. Д.р. 11.01...</span></a></div>
            </li>
            <li>
               <div class="uMenuItem"><a href="/index/0-21"><span>Litter D Д.р. 22.04.2014г</span></a></div>
            </li>
            <li>
               <div class="uMenuItem"><a href="/index/litter_e_d_r_21_06_2014g/0-22"><span>Litter E. Д.р. 21.06...</span></a></div>
            </li>
            <li>
               <div class="uMenuItem"><a href="http://www.foldkittens.ru/index/litter_f_d_r_01_02_2015/0-24"><span>Litter F. Д.р. 01.02.2015</span></a></div>
            </li>
            <li>
               <div class="uMenuItem"><a href="http://www.foldkittens.ru/index/litter_g_d_r_11_07_2015g/0-32"><span>Litter G. Д.р.11.07....</span></a></div>
            </li>
            <li>
               <div class="uMenuItem"><a href="http://www.foldkittens.ru/index/litter_h_d_r_11_09_2015g/0-33"><span>Litter H. Д.р. 11.09...</span></a></div>
            </li>
            <li>
               <div class="uMenuItem"><a href="http://www.foldkittens.ru/index/litter_i/0-30"><span>Litter I. Д.р. 19.03.2016</span></a></div>
            </li>
         </ul>
      </li>
      <li>
         <div class="umn-tl">
            <div class="umn-tr">
               <div class="umn-tc"></div>
            </div>
         </div>
         <div class="umn-ml">
            <div class="umn-mr">
               <div class="umn-mc">
                  <div class="uMenuItem"><a href="/index/0-7"><span>Ссылки</span></a></div>
               </div>
            </div>
         </div>
         <div class="umn-bl">
            <div class="umn-br">
               <div class="umn-bc">
                  <div class="umn-footer"></div>
               </div>
            </div>
         </div>
      </li>
   </ul>
</div>

#menufon ul li {
    float: left;
    margin: 0;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    list-style-image: url(/33.png);
    list-style-position: ;
    font-family: "Palatino Linotype";
    text-align: center;
    color: #000;
    font-size: 20px;
    text-transform: capitalize;
    font-weight: 700;
}
#menufon li {
    color: #fff;
}
.blockcontent li {
    margin-left: 10px;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}


В то время когда хватило бы и этого (предельная понятность, несколько строк и считанные байты...):


Код
<div id="menu"><a href="/index/nashi_koshki/0-13">Главная Страница</a><a href="/index/nashi_koshki/0-13">Наши Кошки (Females)</a><a href="/index/nashi_koshki/0-13">Наши Коты (Males)</a><a href="/index/nashi_koshki/0-13">Котята Для Вас (Kittens)</a><a href="/index/nashi_koshki/0-13">Котята Наших Друзей</a><a href="/index/nashi_koshki/0-13">Наши Планы ( Plans)</a><a href="/index/nashi_koshki/0-13">Прошлые Пометы</a><a href="/index/nashi_koshki/0-13">Ссылки</a></div>#menu a{padding:10px 20px;font-size:20px;font-weight:700}


Но это просто ремарка не совсем по теме :)
Что касается непосредственно вопроса, то непонятно, о каких разрывах идет речь и вообще вот так у меня выглядит меню в Хроме (в одну строку точно не поместится):

Прикрепления: 4147446.jpg(33Kb)
Сообщение отредактировал Solaris(Olga) - Воскресенье, 19 Июн 2016, 17:56:03
Танюшка_Украина
Сообщений: 3
Репутация: 0

Сообщение # 8 | 10:10:00
Скажем так, код страницы был переделан со стандартного шаблона, по минимуму.И все что касается генерирования конструктором кнопок меню оставила как было. Максимум что я сделала это изменила оформление и стили.По поводу двух строк. Само меню да в две строки. Я имела ввиду отображение названий кнопок. Прилагаю скрин. Так будет понятнее. И проблему с разрывом я тоже проиллюстрировала.

Вот так меню выглядит при первой загрузке страницы. Названия кнопок в две строки и разрыв.



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



подозреваю, что дело в этом теге.
сейчас в CSS стоит вот так.

Код
-webkit-padding-start: 40px;

За что отвечает этот тег? Его не было в исходном CSS. Дописала, чтобы вылечить маркеры. Вернее списала из кода уже загруженной страницы в браузере.
Прикрепления: 8094431.jpg(67Kb) · 6805105.jpg(56Kb)
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Неправильно отображается меню сайта (меню отображается неровно)
Страница 1 из 11
Поиск: