Joomla 1.5 Левый столбец залазит на фоновую картинку

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем memo, 29.05.2012.

  1. Offline

    memo Недавно здесь

    Регистрация:
    05.08.2007
    Сообщения:
    51
    Симпатии:
    1
    Пол:
    Мужской
    Вопрос по прилагаемым HTML и CSS файлам.
    Почему не совпадает координаты окончания первого столбца и начала фоновой картинке на оси х? left столбец задан до 20%, background-position тоже 20%, но первый (left) столбец получается шире, чем начало фоновой картинки. Левый столбец залазит на фоновую картинку, ок. 30px. Почему так?

    Код (CODE):
    1. <body>
    2. <div id='wrapper'>
    3.         <div id='left'>
    4.     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
    5.     euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    6.         </div>
    7.         <div id='right'>
    8.     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
    9.     euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    10.         </div>
    11.         <div id='center'>
    12.     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
    13.     euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
    14.     ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
    15.     ut aliquip ex ea commodo consequat.
    16.         </div>
    17.     <div class='clear'></div>
    18. </div>
    19. </body>


    css:

    Код (CODE):
    1. html, body {margin:0;height:100%;}
    2.         #wrapper {
    3.     height:auto !important;height:100%;min-height:100%;min-width:800px;
    4.    
    5.     background-image: url(../images/tabs.png);
    6.         background-position: 20% 0%;
    7.         background-repeat: no-repeat;
    8.     }
    9.        #left {float:left;width:20%;background: #fd0;border: 1px solid black;}
    10.        #right {float:right;width:20%;background: #fd0;border: 1px solid black;}
    11.        #center {margin:0 20% 0 20%;background: #fd0;border: 1px solid black;}
    12.        .clear {clear:both;}
     
    Последнее редактирование: 30.05.2012
    memo, 29.05.2012
    #1

  2. Наши спонсоры

     
  3. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    смотри на свойство float. Используй обычное расположение блоков,а не выхватываешь из общего потока float
     
    OlegK, 29.05.2012
    #2
  4. Offline

    memo Недавно здесь

    Регистрация:
    05.08.2007
    Сообщения:
    51
    Симпатии:
    1
    Пол:
    Мужской
    не понял, тут что-то нетак с float?

    Код (CODE):
    1. #left {float:left;width:20%;}
    2. #right {float:right;width:20%;}
    3. #center {margin:0 20% 0 20%;}


    что нетак со свойствами?
     
    memo, 29.05.2012
    #3
  5. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    http://habrahabr.ru/post/136622/
    То есть твой блок left просто первый плавает.И сюда добавь указание отступа от внутренней границы блока тела документа html, body {margin:0px; padding: 0px; height: 100%;}
     
    OlegK, 30.05.2012
    #4
  6. Offline

    memo Недавно здесь

    Регистрация:
    05.08.2007
    Сообщения:
    51
    Симпатии:
    1
    Пол:
    Мужской
    Эту статью я читал. Добавил эти опции для флоат. Получилось, примерно, так:

    Код (CODE):
    1. #left {float:left;width:20%;margin:0px; padding: 0px; height: 100%;}
    2. #right {float:right;width:20%;margin:0px; padding: 0px; height: 100%;}
    3. #center {margin:0 20% 0 20%;margin:0px; padding: 0px; height: 100%;}


    Честно говоря, это я уже и раньше прописывал. Толку - никакого.

    По-моему, тут дело не во float - эти блоки располагаются нормально. Какие то глюки с картинкой в background'е. Заметил, что чем шире картинка, тем дальше она "залазит под" левый столбец. Может быть отсчёт координат размещения картинки не от левого верхнего угла?
     
    memo, 30.05.2012
    #5
  7. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    пропиши для блока с картинкой свойство/условие отступа от левой стороны margin-left: 20%;
    Это что уроки по верстке? Не вижу здесь код Joomla/
    Я не писал что прописать условие для плавающих блоков.
    А это вообще что за код
     
    OlegK, 30.05.2012
    #6
  8. Offline

    memo Недавно здесь

    Регистрация:
    05.08.2007
    Сообщения:
    51
    Симпатии:
    1
    Пол:
    Мужской
    вопрос о картинке в background'e

    это упрощенный код темплейта для Joomla, а для html, body это уже было прописано (см.начальный вопрос) от добавления padding: 0px; - никаких изменений не последовало

    это описка, реально этого не добавлял, просто тут скопировал автоматом

    если ты знаешь в чём тут дело с этим background'ом то напиши просто, мол надо делать не так и так, а так и так... а то все эти общие наводки никакой пользы не дают, только занимают твоё и моё время, т.е. - по конкретней и попроще, если можно
     
    memo, 30.05.2012
    #7
  9. Offline

    memo Недавно здесь

    Регистрация:
    05.08.2007
    Сообщения:
    51
    Симпатии:
    1
    Пол:
    Мужской
    Ответ найден:

    "Позиционирование фона в % зависит не только от размеров блока, но и от размеров изображения.
    На черте 20% слева от блока будет черта изображения на 20% от этого изображения.
    Т.е. если прописать 100% для позиционирования, то будет выравнивание по правому краю."

    Тему можно закрывать.
     
    memo, 30.05.2012
    #8
< css: border & gradient? | проблема с версткой >

Поделиться этой страницей

Загрузка...