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

Discussion in 'CSS, HTML, Web 2.0, верстка по web-стандартам' started by memo, May 29, 2012.

  1. Offline

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

    Joined:
    Aug 5, 2007
    Messages:
    51
    Likes Received:
    1
    Gender:
    Male
    Вопрос по прилагаемым 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;}
     
    Last edited: May 30, 2012
    memo, May 29, 2012
    #1

  2. Ads Master

     
  3. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    смотри на свойство float. Используй обычное расположение блоков,а не выхватываешь из общего потока float
     
    OlegK, May 29, 2012
    #2
  4. Offline

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

    Joined:
    Aug 5, 2007
    Messages:
    51
    Likes Received:
    1
    Gender:
    Male
    не понял, тут что-то нетак с float?

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


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

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    http://habrahabr.ru/post/136622/
    То есть твой блок left просто первый плавает.И сюда добавь указание отступа от внутренней границы блока тела документа html, body {margin:0px; padding: 0px; height: 100%;}
     
    OlegK, May 30, 2012
    #4
  6. Offline

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

    Joined:
    Aug 5, 2007
    Messages:
    51
    Likes Received:
    1
    Gender:
    Male
    Эту статью я читал. Добавил эти опции для флоат. Получилось, примерно, так:

    Код (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, May 30, 2012
    #5
  7. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    пропиши для блока с картинкой свойство/условие отступа от левой стороны margin-left: 20%;
    Это что уроки по верстке? Не вижу здесь код Joomla/
    Я не писал что прописать условие для плавающих блоков.
    А это вообще что за код
     
    OlegK, May 30, 2012
    #6
  8. Offline

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

    Joined:
    Aug 5, 2007
    Messages:
    51
    Likes Received:
    1
    Gender:
    Male
    вопрос о картинке в background'e

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

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

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

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

    Joined:
    Aug 5, 2007
    Messages:
    51
    Likes Received:
    1
    Gender:
    Male
    Ответ найден:

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

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

Share This Page

Loading...