Выровнять По Высоте Пункты Левого Меню
#1
Отправлено 15 Апрель 2014 - 00:24
Три скриншота. На первом - как сейчас. Второй - измененный. Третий - с пометками. После проделанный сдвигов - экономия в 480 пикселей. Более читабельное меню. Хочется сделать понятным заголовки статей, они все сливаются - вообще плохо.
Прошу помощи.
#2
Отправлено 15 Апрель 2014 - 07:00
Andrew S. (15 Апрель 2014 - 00:24) писал:
Три скриншота. На первом - как сейчас. Второй - измененный. Третий - с пометками. После проделанный сдвигов - экономия в 480 пикселей. Более читабельное меню. Хочется сделать понятным заголовки статей, они все сливаются - вообще плохо.
Прошу помощи.
Здравствуйте, уточните пожалуйста, вы хотите уменьшить отступы между блоками или изменить размеры шрифтов каждого блока?
#3
Отправлено 15 Апрель 2014 - 11:38
Castiel (15 Апрель 2014 - 07:00) писал:
Верхнее правое адресное меню полностью нормальное. А вот в правом нижнем меню в шаблоне Товар - подрегулировать и отступы и шрифт местами, плюс переместить некоторые блоки (около трех): вот тема. Получится всё очень четко, если это сделать.
#4
Отправлено 15 Апрель 2014 - 12:25
Andrew S. (15 Апрель 2014 - 11:38) писал:
Верхнее правое адресное меню полностью нормальное. А вот в правом нижнем меню в шаблоне Товар - подрегулировать и отступы и шрифт местами, плюс переместить некоторые блоки (около трех): вот тема. Получится всё очень четко, если это сделать.
Первый отступ между лого и телефонами образован из-за вашего логотипа.
Отступ между скайпом и телефонами
В шаблоне "HTML"
Находим:
<a style="text-decoration: none;padding-top:5px;display:block;" class="valignMiddle" href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype"><img class="valignMiddle" src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" /> <span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span></a>
Удаляем padding-top:5px;
Рабочее время
В файле "main.css".
Найти:
.work-time { vertical-align: middle; float: left; }
Добавляем параметр line-height: 10px; - междустрочный интервал.
Отступ между фреймом часов
В файле HTML находим и удаляем <br/> с 170 строки
В файле bootstrap-responsive.min.css
Находим
.span44{width:228px;padding-top: 10px}Заменяем на
.span44{width:228px;padding-top: 0px}
Далее отступ между поиском
В main.css Находим
.header .top-search-indent { padding-top: 13px; }Заменяем на
.header .top-search-indent { padding-top: 0px; }
Отступ между пунктами меню
.header .links li { display: block; float: left; width: 102px; padding-bottom: 6px; }удалить padding-bottom: 6px;
Отступ между каталогами в файле bootstrap.min.css
h4 { font-size: 1em; font-weight: bold; margin-bottom: 5px; color: #000; }
Отступ между слайдером
<div class="theme-default" style="padding: 14px 12px 8px 12px;margin-left: -13px;">Заменить на
<div class="theme-default" style="padding: 0px 12px 0px 12px;margin-left: -13px;">
#5
Отправлено 15 Апрель 2014 - 13:48
Castiel (15 Апрель 2014 - 12:25) писал:
Отступ между скайпом и телефонами
В шаблоне "HTML"
Находим:
<a style="text-decoration: none;padding-top:5px;display:block;" class="valignMiddle" href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype"><img class="valignMiddle" src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" /> <span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span></a>
Удаляем padding-top:5px;
Рабочее время
В файле "main.css".
Найти:
.work-time { vertical-align: middle; float: left; }
Добавляем параметр line-height: 10px; - междустрочный интервал.
Отступ между фреймом часов
В файле HTML находим и удаляем <br/> с 170 строки
В файле bootstrap-responsive.min.css
Находим
.span44{width:228px;padding-top: 10px}Заменяем на
.span44{width:228px;padding-top: 0px}
Далее отступ между поиском
В main.css Находим
.header .top-search-indent { padding-top: 13px; }Заменяем на
.header .top-search-indent { padding-top: 0px; }
Отступ между пунктами меню
.header .links li { display: block; float: left; width: 102px; padding-bottom: 6px; }удалить padding-bottom: 6px;
Отступ между каталогами в файле bootstrap.min.css
h4 { font-size: 1em; font-weight: bold; margin-bottom: 5px; color: #000; }
Отступ между слайдером
<div class="theme-default" style="padding: 14px 12px 8px 12px;margin-left: -13px;">Заменить на
<div class="theme-default" style="padding: 0px 12px 0px 12px;margin-left: -13px;">
#6
Отправлено 15 Апрель 2014 - 14:11
Andrew S. (15 Апрель 2014 - 13:48) писал:
Левое меню - доделывать - первая половина.png Левое меню - доделывать - вторая половина.png
В файле "main.css".
Найти:
.footer ul li a { color: #B2B2B2; text-decoration: none; text-align: left; line-height: 16px; }
Заменить:
.footer ul li a { color: #B2B2B2; text-decoration: none; text-align: left; line-height: 16px; }
Отступ между каталогом и пунктами меню
В файле bootstrap-responsive.min.css
.menu_main { padding-top: 10px; }
После внесения этих изменений, почистите несколько раз кеш бразуреа и укажите на скриншоте месте которые осталось доделать
#7
Отправлено 15 Апрель 2014 - 14:21
Castiel (15 Апрель 2014 - 14:11) писал:
Найти:
.footer ul li a { color: #B2B2B2; text-decoration: none; text-align: left; line-height: 16px; }
Заменить:
.footer ul li a { color: #B2B2B2; text-decoration: none; text-align: left; line-height: 16px; }
Отступ между каталогом и пунктами меню
В файле bootstrap-responsive.min.css
.menu_main { padding-top: 10px; }
После внесения этих изменений, почистите несколько раз кеш бразуреа и укажите на скриншоте месте которые осталось доделать
Второе. Вообще не могу найти эту строчку. Там какая-то ещё дробь \9 стоит - это там?
Нечаянно поменял значение в этой строчке (472-я):
@media (min-width:768px){ {padding-top:10px;} .menu_main > ul { background:#fff; }Это где на сайте она выводится? Проверить не накосячил ли я.. По-моему я что-то не то сделал. Отображается красный квадрат с крестиком.
Сообщение отредактировал Andrew S.: 15 Апрель 2014 - 14:39
#8
Отправлено 15 Апрель 2014 - 14:28
Andrew S. (15 Апрель 2014 - 14:21) писал:
Отступ между каталогом и меню - нужно уменьшить на 16 пикселей, а не на 10. В минус там можно уйти? Указать -6.
Необходимо будет добавить междустрочный интервал line-height: 16px; для каталога так как он отсутствует.
.footer ul li a { color: #B2B2B2; text-decoration: none; text-align: left; line-height: 16px; }
В файле bootstrap-responsive.min.css регулируем параметр на свое усмотрение, если хотите уйти в минут то используйте margin-top:-6px;
.menu_main { padding-top: 10px; }
#9
Отправлено 15 Апрель 2014 - 15:00
Castiel (15 Апрель 2014 - 14:28) писал:
.footer ul li a { color: #B2B2B2; text-decoration: none; text-align: left; line-height: 16px; }
В файле bootstrap-responsive.min.css регулируем параметр на свое усмотрение, если хотите уйти в минут то используйте margin-top:-6px;
.menu_main { padding-top: 10px; }
2. Я не могу найти эту строчку.
.menu_main { padding-top: 10px; }
Плюс, повторюсь, я внес какие-то изменения сюда:
Помогите исправить, если я сделал что-то не так.
#10
Отправлено 15 Апрель 2014 - 15:21
Andrew S. (15 Апрель 2014 - 15:00) писал:
Расстояния.png
2. Я не могу найти эту строчку.
.menu_main { padding-top: 10px; }
Плюс, повторюсь, я внес какие-то изменения сюда:
Изменения.png
Помогите исправить, если я сделал что-то не так.
1. Можно добавить отступы для заголовков
h4 { font-size: 1em; font-weight: bold; margin-bottom: 5px; color: #000; }Заменить на
h4 { font-size: 1em; font-weight: bold; margin: 3px 0; color: #000; }
Отрегулируйте параметр line-height: 14px;
.footer ul li a { color: #B2B2B2; text-decoration: none; text-align: left; line-height: 14px; }
Или можно добавить отступы padding:1px 0;
2. Не ищите, это уже не требуется
Удалите {padding-top:10px;} с 473 строки где указано на скриншоте
#11
Отправлено 15 Апрель 2014 - 15:54
Castiel (15 Апрель 2014 - 15:21) писал:
h4 { font-size: 1em; font-weight: bold; margin-bottom: 5px; color: #000; }Заменить на
h4 { font-size: 1em; font-weight: bold; margin: 3px 0; color: #000; }
Отрегулируйте параметр line-height: 14px;
.footer ul li a { color: #B2B2B2; text-decoration: none; text-align: left; line-height: 14px; }
Или можно добавить отступы padding:1px 0;
2. Не ищите, это уже не требуется
Удалите {padding-top:10px;} с 473 строки где указано на скриншоте
.mini-products-list .product-details h4 { font-size:1em; font-weight:bold; margin: 0; }Можно ли разорвать взаимосвязь между этими тремя блоками, отмеченными незалитыми прямоугольниками?
Вот пикчер:
Потому, что когда я меняю по-середине - все вверху и внизу меняется, так как не нужно! Я так не смогу поставить нужные отступы. У меня не получается!
Верхний и нижний блоки - отступ нужен по 9 пикселей.
Средний блок - между новостями 18 пикселей, внутри новости между ее строк - 9 пикселей. Вся проблема в том, что они все друг к другу привязаны.
#12
Отправлено 15 Апрель 2014 - 16:21
Andrew S. (15 Апрель 2014 - 15:54) писал:
.mini-products-list .product-details h4 { font-size:1em; font-weight:bold; margin: 0; }Можно ли разорвать взаимосвязь между этими тремя блоками, отмеченными незалитыми прямоугольниками?
Вот пикчер:
Разорвать взаимосвязь.png
Потому, что когда я меняю по-середине - все вверху и внизу меняется, так как не нужно! Я так не смогу поставить нужные отступы. У меня не получается!
Верхний и нижний блоки - отступ нужен по 9 пикселей.
Средний блок - между новостями 18 пикселей, внутри новости между ее строк - 9 пикселей. Вся проблема в том, что они все друг к другу привязаны.
Можно сделать и так как вы указали на скриншоте, но для этого необходимо указывать стили в файле HTML
Например
<h4 class="hidden-phone">Каталог</h4>Заменяем на
<h4 class="hidden-phone" style="margin:5px 0;">Каталог</h4>Так же вы можете добавить все желаемые параметры стиля и они будут относиться только к этой части
Находим
<h4 class="hidden-phone">Новости</h4>Заменяем на
<h4 class="hidden-phone" style="margin:5px 0;">Новости</h4>
И по аналогии с остальными.
#13
Отправлено 15 Апрель 2014 - 18:30
Castiel (15 Апрель 2014 - 16:21) писал:
Например
<h4 class="hidden-phone">Каталог</h4>Заменяем на
<h4 class="hidden-phone" style="margin:5px 0;">Каталог</h4>Так же вы можете добавить все желаемые параметры стиля и они будут относиться только к этой части
Находим
<h4 class="hidden-phone">Новости</h4>Заменяем на
<h4 class="hidden-phone" style="margin:5px 0;">Новости</h4>
И по аналогии с остальными.
Раз уж не получается с теми размерами, сделал по возможности.
Странности, вообще в каталоге происходят при его раскрытии.. Куча разных расстояний..
#14
Отправлено 17 Апрель 2014 - 04:14
.menu_main li a, .menu_main li ul a { color: #B2B2B2; font-weight: bold; line-height: 24px; padding: 0; position: relative; }удалите или уменьшите line-height: 24px;
Отступ после скайпа, в HTML найдите:
<div style="padding-top:5px; text-align:left;" class="work-time">удалите или уменьшите стиль padding-top
На счет самого времени, в HTML данному iframe задайте стиль padding-top с необходимым значением.
На счет корзины, области после поиска, найдите в bootstrap-responsive.min.css:
.span44 { padding-top: 15px; width: 228px; }уменьшите padding-top
Отступ перед каталогом, найдите:
.menu_main { }замените на:
.menu_main { padding-top:9px; }
В принципе всем заголовкам можно задать одинаковый отступ, пропишите:
.hidden-phone{ margin-top: 5px; }значение, конечно, можно подставить свое
#16
Отправлено 17 Апрель 2014 - 13:46
Vaccina (17 Апрель 2014 - 04:14) писал:
.menu_main { }замените на:
.menu_main { padding-top:9px; }
В принципе всем заголовкам можно задать одинаковый отступ, пропишите:
.hidden-phone{ margin-top: 5px; }значение, конечно, можно подставить свое
Всё получилось. Но вот есть непонятные вещи:
1. Не могу найти эту строчку:
.menu_main { }Вижу только строчку:
.menu_main { padding-top:10px\9; }Что это за дробь-девять - не понимаю. Может я не в том шаблоне искал? Мне уже ответили на это в другом вопросе, и я тогда не смог найти эту строчку и потом не сказали где она находится. Вот..
2. И куда вот это вот прописать? В какой шаблон?
.hidden-phone{ margin-top: 5px; }Я могу и отдельно всем заголовкам это прописать. Скажите, пожалуйста, как для каталога написать, к примеру и для блока новости. Потому, что, судя по всему, там какие-то различия. А на остальные блоки статей я пропишу по аналогии с блоком новости.
3. Всё практически идеально. В каталоге поставил наугад значение отступов между строками и сразу угадал. Строки стали более читабельные и не занимают так много места как раньше. Слайдер при моем разрешении 1920*1080 уже сразу виден (при не развернутом каталоге). Вот только хочется уже давно поставить границу (border) во всплывающем меню, такого же цвета как у поиска и у часов. А то тяжело читать это всплывающее меню.
Вот как сейчас:
А вот как хочется сделать:
Сразу всё перестаёт сливаться!
#17
Отправлено 18 Апрель 2014 - 04:07
.menu_main { padding-top:10px\9; }заменить на предложенный мною выше код, сразу после него поставить
.hidden-phone{ margin-top: 5px; }его просто в css файл необходимо вставить.
На счет выпадающего каталога, найдите в bootstrap-responsive.min.css
.menu_main li ul { background: #FFFFFF; border: 0 none; box-shadow: none; display: none; padding: 0; position: static; text-align: left; width: auto; }border: 0 none;
замените на
border: 1px solid #cccccc;
на счет часов, вместе с paddin задайте еще пробный стиль border:none;
#18
Отправлено 18 Апрель 2014 - 14:30
Vaccina (18 Апрель 2014 - 04:07) писал:
.menu_main { padding-top:10px\9; }заменить на предложенный мною выше код, сразу после него поставить
.hidden-phone{ margin-top: 5px; }его просто в css файл необходимо вставить.
На счет выпадающего каталога, найдите в bootstrap-responsive.min.css
.menu_main li ul { background: #FFFFFF; border: 0 none; box-shadow: none; display: none; padding: 0; position: static; text-align: left; width: auto; }border: 0 none;
замените на
border: 1px solid #cccccc;
на счет часов, вместе с paddin задайте еще пробный стиль border:none;
Вот изображение:
Подписал на фото порядковые номера вопросов.
1. Часы. С самого начала мы их поставили в область с графиком работы. Можно ли нормально эти часы поставить? Чтобы они были отдельным блоком. И тогда их можно будет поставить как надо и куда угодно. Другие же блоки каким-то образом там стоят в меню. Почему этот не получается нормально поставить.... И сделать подходящий отступ. Не понимаю.
2. В корзине товаров.. Опять уползла вниз не понять почему. Помогите поставить выше.
3. Верхнее меню. Почему-то уползло наверх. Помогите поставить ниже.
4. Каталог. Тут ерунда полная. Я уже все варианты перепробовал.
И старый код:
.menu_main { padding-top:10px\9; }И новый код:
.menu_main { padding-top:9px; }И дополнительный код:
.hidden-phone{ margin-top: 5px; }Меняя значения - невозможно добиться равных отступов перед пунктом "Каталог", "Статьи", "Материалы СМИ", "Разделы сайта". Вообще никак! Ставишь "Каталог" ровно - те ниже опускаются. Ставишь те 3 ровно - "Каталог" выше поднимается.
5. Бордер выпадающего меню каталога. После вставки бордера в меню каталога на выпадающее вправо подменю - рамка установилась вообще везде. Ещё и со всякими пунктирами непонятными. Эту рамку можно сделать так, как спрашивал в предыдущем вопросе? Там на фото всё изображено. А так - всё в лишних рамках и пунктирах:
Не смотрится же это...
Вот как спрашивал и как хотел её установить:
6. Вы смотрели 1. Вот ещё момент.. Появились лишние рамки у всех товаров в блоке "Вы смотрели".
Они там появилась после внесения изменений в рамку для дополнительных фото товара. Я не понимаю, может как-то неправильно их поставили?
Ссылка.
7. Вы смотрели 2. Если убрать эти лишние рамки - вопроса с расстояниями не будет.
8. Не нашёл где поменять цвет границы вокруг баннера:
Сделать цвет такой же как вокруг поиска и часов. И в товарах везде этот цвет границы. Вроде бы E8E8E8.
Сообщение отредактировал Andrew S.: 21 Апрель 2014 - 04:51
#19
Отправлено 20 Апрель 2014 - 22:33
Цитата
откройте HTML, найдите код
<iframe src="http://free.timeanddate.com/clock/i3zy96zg/n379/tlru33/fs12/fcb2b2b2/tct/pct/bace8e8e8/pa10/tt0/tw1/tm3/td2/th1/tb1" frameborder="0" width="162" height="37" allowTransparency="true"></iframe>
<iframe src="http://free.timeanddate.com/clock/i3zy96zg/n379/tlru33/fs12/fcb2b2b2/tct/pct/bace8e8e8/pa10/tt0/tw1/tm3/td2/th1/tb1" frameborder="0" width="162" height="37" allowTransparency="true" style="margin-left: 14px;"></iframe>
Цитата
Цитата
найдите
<!-- Каталог товаров --> <div class="menu_main"> <span class="link_nav"></span><a href="#" class="link_nav">Каталог</a> <a href="{CATALOG_URL}" title="Каталог" style="text-decoration: none;margin:5px 0;"><h4 class="hidden-phone" style="margin:0px 1;">Каталог</h4></a> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul>{% ENDIF %} <li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}{% IF catalog_full.HIDE %} style="display:none;"{% ENDIF %}> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {%ENDFOR%} {%ENDIF%} </div> <!-- /Каталог товаров -->замените на этот код
<!-- Каталог товаров --> <div class="menu_main menu_main_catalog"> <span class="link_nav"></span><a href="#" class="link_nav">Каталог</a> <a href="{CATALOG_URL}" title="Каталог" style="text-decoration: none;margin:5px 0;"><h4 class="hidden-phone" style="margin:0px 1;">Каталог</h4></a> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul>{% ENDIF %} <li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}{% IF catalog_full.HIDE %} style="display:none;"{% ENDIF %}> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {%ENDFOR%} {%ENDIF%} </div> <!-- /Каталог товаров -->
откройте bootstrap-responsive.min.css
найдите код (строка примерно 800)
.menu_main {под ним поставьте новый код
.menu_main_catalog{padding-top:9px;}
продолжения ответа:
Цитата
найдите код
<iframe src="http://free.timeandd...m3/td2/th1/tb1" frameborder="0" width="162" height="37" allowTransparency="true"></iframe>
замените на этот
<iframe src="http://free.timeandd...m3/td2/th1/tb1" frameborder="0" width="162" height="37" allowTransparency="true" style="margin-top: 4px;"></iframe>
Здесь обратите внимание на margin-top: 4px; -это значит отступ вверх. а margin-bottom: 4px; - значит отступ вниз. Вот это и даст вам любой отступ вниз или вверх.
Цитата
.menu_main_catalog{padding-top:9px;}
Только прибавляет. Добавляю минус - эффекта нет.
.menu_main_catalog{margin-top:-9px;}
Цитата
[quote]<a href="{CATALOG_URL}" title="Каталог" style="text-decoration: none;margin:5px 0;"><h4 class="hidden-phone" style="margin:0px 1;">Каталог</h4></a>[/quote]И замените на этот
Цитата
Вкратце расшифрую. 10px - это отступ вверх
5px - отступ вниз.
Вот их и можете на свой вкус изменять
#20
Отправлено 20 Апрель 2014 - 22:54
lew (20 Апрель 2014 - 22:33) писал:
<iframe src="http://free.timeanddate.com/clock/i3zy96zg/n379/tlru33/fs12/fcb2b2b2/tct/pct/bace8e8e8/pa10/tt0/tw1/tm3/td2/th1/tb1" frameborder="0" width="162" height="37" allowTransparency="true"></iframe>
<iframe src="http://free.timeanddate.com/clock/i3zy96zg/n379/tlru33/fs12/fcb2b2b2/tct/pct/bace8e8e8/pa10/tt0/tw1/tm3/td2/th1/tb1" frameborder="0" width="162" height="37" allowTransparency="true" style="margin-left: 14px;"></iframe>
так сейчас у вас с корзиной вроде всё нормально. Или поднять её выше?
Здравствуйте! Вот пометки к сообщению № 18!
1. Остается. С часами не получается. Сразу возникает JS-ошибка и всё что после часов - сайт вообще не загружается. Только верхушка левого меню с часами. Ниже всё обрубается.
Вот здесь где на фото мигающий указатель заместо еще одного <br/> можно вставить какой-то отступ, какое-то расстояние?.. Или вообще часы поместить за код со временем работы магазина. И выровнять их.
2. Ок. Корзина сама встала куда надо.
3. Остается. Вы подсказали тут отступ для четвертого пункта. Верхнее меню с кнопками "Войти В ЛК - ... - Прайсы" нужно подвинуть чуть ниже.
4. Ок. Вы сейчас ответили по поводу каталога - мы уже всё сделали в п. 3. Там именно каталог подвинулся, а не верхнее меню.
5. Остается.
6. Остается.
7. Остается. Но не надо делать если сделать п. 6.
8. Остается.
Сообщение отредактировал Andrew S.: 21 Апрель 2014 - 22:00
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных