Верстка div-ами и обрезание браузером

Тема в разделе "Веб-дизайн", создана пользователем Infinion, 2 май 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Infinion

    Infinion Постоялец

    Регистр.:
    10 фев 2009
    Сообщения:
    63
    Симпатии:
    12
    Здравствуйте, коллеги!

    Подскажите пожалуйста по верстке, никак не могу сообразить.
    Нужно сделать так:

    Имеется основное тело сайта шириной 960 пикселей и внутри размещаются все важные элементы - текст, картинки, кнопки и т.д. и т.п. С двух сторон от этого контейнера имеются две полоски-контейнера по 150 пикселей шириной каждая, внутри которых размещается графика, разные картинки-элементы дизайна.
    Необходимо сделать так, чтобы при маленьком разрешении экрана (1024х768) - эти две полоски с графикой по бокам основного тела сайта - обрезались браузером БЕЗ появления полосы горизонтальной прокрутки. И по центру экрана оставалось бы видным только тело сайта.(При разрешении экрана 1280х1024 и выше - эти полоски по бокам будут соответственно видны.)

    Все это нужно сверстать дивами, без таблиц.

    Во вложении рисунок с иллюстрацией проблемы. (Розовым контуром обозначена область экрана при большом разрешении, а ярко-циановым цветом - область, отображаемая при маленьком разрешении).

    А также архив с html страничкой, которую я сверстал для примера. Почему-то левая полоска обрезается как надо, а правая не обрезается и появляется горизонтальная прокрутка в браузере.

    Кто сможет, подскажите, пожалуйста! Заранее благодарен!
     

    Вложения:

    • design.gif
      design.gif
      Размер файла:
      22 КБ
      Просмотров:
      16
    • test.rar
      Размер файла:
      878 байт
      Просмотров:
      6
  2. danpro

    danpro Создатель

    Регистр.:
    9 мар 2010
    Сообщения:
    12
    Симпатии:
    0
    а если эти картинки установить фоном без прокрутки? или я не правильно понял?
     
  3. Infinion

    Infinion Постоялец

    Регистр.:
    10 фев 2009
    Сообщения:
    63
    Симпатии:
    12
    Фон без прокрутки не подходит - эти картинки должны двигаться вместе с основным телом сайта.

    Уже второй день бьюсь, никак не могу понять, как сделать :(

    Вот, например, как сделано вот на этом сайте http://www.l2server.ru/
    Там по бокам шапки и футера есть графика, которая является продолжением дизайна основного тела сайта, и она обрезается при ресайзе окна браузера без появления прокрутки, но основное тело сайта не обрезается и появляется прокрутка.

    Вот мне примерно такое надо, только там это сделано таблицами, а мне нужно дивами.
     
  4. compz

    compz Писатель

    Регистр.:
    3 фев 2009
    Сообщения:
    4
    Симпатии:
    1
    по идее можно боковые дивы тянуть на 100% и картинки в них ставить фотом
     
  5. Infinion

    Infinion Постоялец

    Регистр.:
    10 фев 2009
    Сообщения:
    63
    Симпатии:
    12
    Не могу представить, как тянуть боковые дивы на 100%, чтобы они при этом были по бокам центрального дива с фиксированной шириной.

    P.S. Кому не лень, гляньте, пожалуйста, простой пример, который я сверстал (в архиве, во вложении в первом посте) - почему-то там левая часть обрезается, как надо, а правая - не обрезается, хотя сделана идентично с левой частью. Что не так я делаю?
     
  6. Andy_ham

    Andy_ham Джедай на пенсии

    Регистр.:
    3 сен 2007
    Сообщения:
    450
    Симпатии:
    263
    Я, конечно, такие вещи верстаю таблицей - ибо проще и все работает :)
    По теме - есть такая идея. Для body делаем 6 вложенных дивов и каждому в css бекграундом делаем нужную картинку. Писать полный код лень :D, да и нет смысла
    HTML:
    
    <div id="1">
     <div id="2">
      <div id="3">
       <div id="4">
        <div id="5">
         <div id="6">
          <div с центральным блоком сайта></div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
    
    Такое я уже делал, все работает, но 6 бесполезных дивов ничем не лучше 1 простенькой таблицы, ИМХО :)
     
    Infinion нравится это.
  7. Infinion

    Infinion Постоялец

    Регистр.:
    10 фев 2009
    Сообщения:
    63
    Симпатии:
    12
    В общем, проблему решил я сам по-другому:

    Эти картинки я попарно соединил в одну gif картинку (из 2 картинок сделал 1, таким образом получилось 3 картинки для 6) с прозрачным бекграундом и нужного размера, из расчета, что когда эта картинка будет размещена по центру - эти картинки по бокам займут нужное положение. (Т.е. по сути эти картинки разнесены по сторонам и между ними пустое место равное ширине основного тела сайта).
    Все это дело запихивается бэкграундом в 3 отдельных дива с width:100% и фиксированной высотой в пикселях(для каждой картинки свой), выравнивается по центру, помещается на нижний слой и регулируется положение отступом от верха сайта.

    И все отлично работает. Все очень просто. Вес картинок не изменился из-за добавления пустого места.
     
  8. mittus

    mittus Создатель

    Регистр.:
    12 июл 2009
    Сообщения:
    72
    Симпатии:
    11
    Так вообще одной обойтись можно, ну или 3-мя и без пропуска. Склеиваешь все в одну, без отступов. Ну или как у тебя сделано, только тоже без отступа и..
    Вариант 1 (склейка в 1:(
    HTML:
    <div id="1">
     <div id="2">
          <div с центральным блоком сайта></div>
     </div>
    </div>
    <style>
    #1 { width:100%; background:url('http://site.ru/1.png')no-repeat left top;}
    #2 { width:100%; background:url('http://site.ru/1.png')no-repeat right top;}
    </style>
    Вариант 2 (склейка в 3 изображения:(
    HTML:
    <div id="1">
     <div id="2">
      <div id="3">
       <div id="4">
        <div id="5">
         <div id="6">
          <div с центральным блоком сайта></div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
    <style>
    #1 { width:100%; background:url('http://site.ru/1.png')no-repeat left top;}
    #2 { width:100%; background:url('http://site.ru/1.png')no-repeat right top;}
    #3 { width:100%; background:url('http://site.ru/2.png')no-repeat left 150px;}
    #4 { width:100%; background:url('http://site.ru/2.png')no-repeat right 150px;}
    #5 { width:100%; background:url('http://site.ru/3.png')no-repeat left 300px;}
    #6 { width:100%; background:url('http://site.ru/3.png')no-repeat right 300px;}
    </style>
    
     
    Infinion нравится это.
Статус темы:
Закрыта.