|
|
Модератор форума: Yuri_G |
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Неправильно отображается меню сайта (меню отображается неровно) |
Неправильно отображается меню сайта |
Добрый день! Буду максимально краток и приступлю сразу к делу. В заранее большое спасибо. Разрабатываю один сайт. Приобрёл его уже в готовых шаблонах от 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 лет идеальные года. Но такой вопрос к сожалению решить не смог. И по сею минуту решаю. |
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
(15.6 Kb)
·
0623992.jpg
(28.7 Kb)
Сообщение отредактировал _VITALIK_ - Четверг, 03 Мар 2016, 20:23:16
|
Подыму тему, раз уж по другому не получается.
Меню отображается маркированным списком.Как верхнее, так и нижнее. раньше было все путем. Но после обновления браузеров ( проверено на Яндексе, Гугле, Мозиле, Эксплоурере) наблюдаем стандартные маркеры в виде кружков. Тег в таблице стилей list-style-type отображен со значением none.Все оба раза, что он там включен.Сильно подозреваю, что теперь его надо добавить еще раз. Вопрос в какой class? Вот как это выглядит сейчас Вот адрес сайта http://www.foldkittens.ru Прикрепления:
6626925.jpg
(53.8 Kb)
|
Танюшка_Украина, у вас отвалилась картинка list-style-image: url("/33.png");
Цитата Тег в таблице стилей list-style-type отображен со значением none. |
|
В таблице стилей или CSS.Так и было до обновления.
Проблема с маркерами решилась после добавления вот этого Код ul, menu, dir { list-style-type: none;} Осталась интересная проблема.При первой загрузке страницы название каждой кнопки меню выстраивается в две строки, что "разрывает" меню. После некоторого времени, либо смены масштаба отображения страницы названия кнопок меню выстраиваются в одну строку.И разрыв уходит.Замечено в яндекс браузере. В Фаерфоксе разрыв меньше, но названия кнопок в одну строку и перезагрузка, масштаб не влияют на разрыв.. Гугл и Эксплоурер читает все корректно.И как лечить? Рассматриваю варианты увеличить подложку меню по ширине. Но это скорее косметический ремонт. Что-то влияет.Буду благодарна за подсказку, что именно. |
Лучше сделать меню вручную, а то это ужасно. Вот у вас запутанные стили 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
(33.4 Kb)
Сообщение отредактировал Solaris(Olga) - Воскресенье, 19 Июн 2016, 17:56:03
|
Скажем так, код страницы был переделан со стандартного шаблона, по минимуму.И все что касается генерирования конструктором кнопок меню оставила как было. Максимум что я сделала это изменила оформление и стили.По поводу двух строк. Само меню да в две строки. Я имела ввиду отображение названий кнопок. Прилагаю скрин. Так будет понятнее. И проблему с разрывом я тоже проиллюстрировала.
Вот так меню выглядит при первой загрузке страницы. Названия кнопок в две строки и разрыв. Вот так выглядит меню если изменить масштаб страницы либо перейти на другую страницу, либо просто подождать и перегрузить страницу. Название кнопок в одну строку и ничего не разрывается. подозреваю, что дело в этом теге. сейчас в CSS стоит вот так. Код -webkit-padding-start: 40px; За что отвечает этот тег? Его не было в исходном CSS. Дописала, чтобы вылечить маркеры. Вернее списала из кода уже загруженной страницы в браузере. Прикрепления:
8094431.jpg
(67.0 Kb)
·
6805105.jpg
(56.5 Kb)
|
| |||
| |||