[Помогите] 1) Всплывающее окно под корзиной уехало вниз. 2) Проблема с шириной сайта на планшете, телефоне.

Тема в разделе "OpenCart", создана пользователем Gafe62, 16 ноя 2013.

  1. Gafe62

    Gafe62

    Регистрация:
    11 окт 2013
    Сообщения:
    252
    Симпатии:
    30
    Доброй ночи!

    Чтобы не плодить тем, задам сразу 2 вопроса, 1-ый решить не могу уже неделю, а 2-ой даже не знаю как решить.

    1) Есть корзина, рядом с ней маленькая кнопка, при нажатии на нее показывается содержимое, сумма, кнопки для оформления заказа и просмотра корзины. Так вот, всплывающее окно сначала было вплотную к корзину (это нормально), но потом уехало вниз, решили проблему, сейчас опять съехало вниз.
    Проблема в том, что при попытке наведения мышкой на окно, оно пропадает, и надо сделать его впритык.
    Из stylesheet:
    Код:
    #cart {
    position: relative;
    min-width: 300px;
    right: 40px;
    bottom: 45px;
    z-index: 999; 
    
    }
    #cart .heading {
    float: right;
    padding: 9px 12px 15px 35px;
        border: 3px solid #ccc;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
    position: relative;
    z-index: 1;
    color: #999;
    height: 35px;
    width: 160px;
    background: url(../image/cart-head.png) no-repeat left center;
    bottom: 27px;
    }
    #cart .heading h4 {
        color: #333333;
        font-size: 15px;
        font-weight: bold;
        margin-top: 0px;
        margin-bottom: 3px;
    }
    #cart .heading a {
        color: white;
        text-decoration: none;
    }
    #cart .heading a span {
        background: url('../image/arrow-down.png') 100% 0% no-repeat;
        padding-right: 15px;
    }
    #cart .content {
    clear: both;
    display: none;
    width: 400px;
    float: right;
    padding: 0px 8px 8px 8px;
    background: #3B3D42;
    z-index: 999;
    border-bottom: 3px solid #BF2A2A;
    border-top: 3px solid #BF2A2A;
    }
    
    
    #cart.active .heading {
    
    }
    #cart.active .content {
        display: block;
    
    }
    Даже уже и не знаю, что пробовать.
    Сам сайт:

    2) В браузере сайт отображается корректно. На телефоне, планшете раньше тоже отображался корректно. Заметил, что после изменений в шапке, футере, вставки Callme страницы на телефон отображаются некорректно.
    Что именно: справа от страницы добавляется большой ненужный кусок фона.

    Код:
    #container {
    width: 1022px;
    margin: 0 auto;
    text-align: left;
    Ширину пробовал указывать 100% - не вариант, шаблон сразу "плавать" начинает, #column-right { с #column-left { сделал одинаковыми в stylesheet - изменений 0, пробовал еще некоторые вещи - бесполезно.
    п.с. тестировал на iPhone (7 iOS), планшет на Андроиде 4..., ну и на каком-то телефоне на 2 Андроиде. Кстати, на 2-ой версии Андроид отображается корректно (но там экран маленький, мб в этом дело).
    [​IMG]

    Кто-нибудь сталкивался с этим?
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.042
    Симпатии:
    774
    1. Уберите из стилей в #cart .content свойство float: right и добавьте это:
    Код:
    position: absolute;
    right: 0;
    top: 118px;
    2. Попробуйте добавить в head это:
    HTML:
    <meta name="viewport" content="width=1000">
    Вместо 1000 впишите ширину вашего контента в пикселях.
     
    Gafe62 нравится это.
  3. Gafe62

    Gafe62

    Регистрация:
    11 окт 2013
    Сообщения:
    252
    Симпатии:
    30
    1 проблема решилась, огромнейшее спасибо! :Smile:
    <meta name="viewport" content="width=1000"> в header.tpl добавить? После чего?
     
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.042
    Симпатии:
    774
    Вообще, можно куда угодно в секции head, но лучше повыше, например, после title.
     
  5. Gafe62

    Gafe62

    Регистрация:
    11 окт 2013
    Сообщения:
    252
    Симпатии:
    30
    Не получилось. Вообще, мне кажется, что я чего-то лишнего впихнул в header/footer.
     
  6. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.042
    Симпатии:
    774
    Попробуйте кеш в мобильном браузере почистить (в Хроме и Опере это можно сделать поставив и сняв галочку полной версии в настройках).

    Вообще, Мозилла говорит, что у вас есть незакрытые теги.
     
  7. Gafe62

    Gafe62

    Регистрация:
    11 окт 2013
    Сообщения:
    252
    Симпатии:
    30
    у меня safari, скачал chrome - проблема не изменилась. А где именно не закрыл теги? Или придется всю папку common проверять? :(
     
  8. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.042
    Симпатии:
    774
    Мозилла дорисовывает два </div> прямо перед </body>.
    И у вас в футере какие-то странные теги </br>.
     
  9. Gafe62

    Gafe62

    Регистрация:
    11 окт 2013
    Сообщения:
    252
    Симпатии:
    30
    удалил div-ы (в footer, только там есть </body>) , не помогло, </br> - новый абзац, он разве может такую проблему сделать?
     
  10. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.042
    Симпатии:
    774
    Это не новый абзац! Такого тега не существует.
    <br> - это тег перевода строки. По стандарту xhtml он должен был быть самозакрывающися - <br />, но не так, как у вас. А вообще, у вас html5, так что можно совсем обойтись без косой черты.


    Их нужно было не удалить, а добавить! Два закрывающих дива перед боди (не факт, что они должны быть именно в том месте, но Мозилла их там дорисовала).
     
  11. Gafe62

    Gafe62

    Регистрация:
    11 окт 2013
    Сообщения:
    252
    Симпатии:
    30
    Добавил </div>, изменил </br> на <br>, не изменилось ничего.
     
  12. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.042
    Симпатии:
    774
    </br> вы не все заменили.
    А дивы, возможно, всё же лишние - Мозилла теперь 4 там красным подсвечивает.
    Вообще, просто откройте в Мозилле исходный код страницы и сами увидите, где тегов не хватет, где лишние или неправильные (оно всё подсвечено красным).
     
  13. valera4925

    valera4925

    Регистрация:
    10 ноя 2013
    Сообщения:
    12
    Симпатии:
    25
    Все дело в css дай адрес сайта скажу что на что поменять
     
  14. Gafe62

    Gafe62

    Регистрация:
    11 окт 2013
    Сообщения:
    252
    Симпатии:
    30
     
  15. Gafe62

    Gafe62

    Регистрация:
    11 окт 2013
    Сообщения:
    252
    Симпатии:
    30
    Кстати, вместе с кривым отображением на телефоне/планшете сайт, у меня на экране компьютера сайт теперь тоже не во весь экран, справа совсем чуть-чуть ненужного фона. Мне кажется, что дело в ширине какого-то модуля?
     
  16. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.042
    Симпатии:
    774
    В каком браузере? У Меня в Firefox всё выглядит нормально.
     
  17. Gafe62

    Gafe62

    Регистрация:
    11 окт 2013
    Сообщения:
    252
    Симпатии:
    30

    То есть, нужно исправить отображение на мобильных устройствах и в других браузерах.
    Мои предположения: правка контейнера или модулей.
     
    Последнее редактирование: 17 ноя 2013
  18. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.042
    Симпатии:
    774
    Похоже, Хром не такой умный как Мозилла: из-за проблемы с лишними/незакрытыми тегами он неправильно понял структуру документа. У меня в Хроме ещё и корзина съехала.
    Сколько у вас сейчас </div> перед </body>? Попробуйте оставить там два и попробуйте удалить все.
     
  19. Gafe62

    Gafe62

    Регистрация:
    11 окт 2013
    Сообщения:
    252
    Симпатии:
    30
    без изменений. Эм, а у меня корзина не уходит.
    Нашел такую тему:

    А если я в stylesheet.css добавлю ?
    Код:
    * #### Mobile Phones Portrait #### */
    @media screen and (max-device-width: 480px) and (orientation: portrait){
    /* some CSS here */
    }
    /* #### Mobile Phones Landscape #### */
    @media screen and (max-device-width: 640px) and (orientation: landscape){
    /* some CSS here */
    }
    /* #### Mobile Phones Portrait or Landscape #### */
    @media screen and (max-device-width: 640px){
    /* some CSS here */
    }
    /* #### iPhone 4+ Portrait or Landscape #### */
    @media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
    /* some CSS here */
    }
    /* #### Tablets Portrait or Landscape #### */
    @media screen and (min-device-width: 768px) and (max-device-width: 1024px){
    /* some CSS here */
    }
    /* #### Desktops #### */
    @media screen and (min-width: 1024px){
    /* some CSS here */
    } 
    Как написано в той теме.

    Нашел, где искать проблемы - stylesheet.css. Я по очереди footer, home, header, stylesheet менял начальные (без изменений) на свои, как stylesheet.css поменял - так и на телефоне и в браузере сайт стал отображаться идеально.

    Вот мой stylesheet (который изменен и портит нормальное отображение) - http://rghost.ru/50243292
     
    Последнее редактирование: 17 ноя 2013
  20. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.042
    Симпатии:
    774
    Ну, добавить нужно не толко это. Вместо /* some CSS here */ нужно вписать стили для каждого варианта экрана.

    У вас не только это изменилось - у вас больше нет лишних тегов. Только поправте ещё боди, у вас открывающий тег сейчас выглядит так:
    HTML:
    <body
        id="line"
    >
    И не воспринимается нормально.
     
    Gafe62 нравится это.