[Помогите] Нестандартный трехколоночный макет

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем leha17, 20 апр 2014.

  1. leha17

    leha17

    Регистрация:
    20 апр 2014
    Сообщения:
    2
    Симпатии:
    2
    Добрый день форумчане. Столкнулся со сложностью при верстке макета. Центральная область контента на сайте занимает 1050px. Эта область (div блок) всегда должна быть по центру экрана вне зависимости от разрешения экрана. Слева и справа от контентовой области располагаются изображения. Слева изображение привязано к левому краю экрана, справа соответственно к правому. Вся сложность состоит в том, что если разрешение монитора меньше ширины левого блока с изображением + центрального блока (1050px) + правого блока с правым изображением - появляется полоса прокрутки внизу, а при использовании свойства overflow:hidden для блока обвертки (div содержащий все три блока (контент, изображения слева и справа)), видимая область обрезается по правому краю. А нужно, чтобы блоки с изображениями обрезались, причем изображения при уменьшении разрешения экрана, должны приближаться друг к другу, но не заезжать на область контента и соответственно при увеличении разрешения они должны сначала появиться, а затем отдаляться друг от друга. (на рис. схема). Если кто может подскажите, а то совсем голову сломал
    http://savepic.net/5224172.htm
     
    halfhope и nikfakel нравится это.
  2. nikfakel

    nikfakel

    Регистрация:
    24 июл 2013
    Сообщения:
    150
    Симпатии:
    33
    Интересная задачка )

    Код:
    <html>
    <head>
    <style>
    .wrapper {min-width: 1050px; background: red; height: 200px; overflow:hidden; padding: 10px;}
    .content {margin:0 auto; width: 1050px; background: #dfdfdf; z-index: 2; position:relative;}
    .left {position:absolute; left:-110px; top:0; width: 100px; background: yellow; height: 300px;}
    .right {position:absolute; right: -110px; top:0; background: green; width: 100px;}
    </style>
    </head>
    <body>
    <h1>Header</h1>
    <div class="wrapper">
    <div class="content">Самая полезная в мире информация.
    <div class="left">
    пикча</div>
    
    <div class="right">пикча справа
    </div>
    </div>
    
    </div>
    </body>
    </html>
    Если что непонятно, пишите, объясню.
     
    LuisAlberto нравится это.
  3. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    HPlus нравится это.
  4. leha17

    leha17

    Регистрация:
    20 апр 2014
    Сообщения:
    2
    Симпатии:
    2
    Здравствуйте, спасибо. что откликнулись, но пикча слева должна быть всегда в независимости от разрешения привязана к левому краю, а справа к правому экрана, не центрального блока, при уменьшении разрешения те края изображений, которые не помещаются должны скрываться не под центральной блок, а исчезать за пределами экрана
    --- Добавлено, 17 май 2014 ---
    Здравствуйте, спасибо, что ответили. Но решение, представленное в примере, не совсем такое. Изображения привязаны верно, но при уменьшении разрешения экрана они скрываются под центральным блоком, а нужно, чтобы они доходили до центрального блока и скрывались их края слева для левого и справа для правого соответственно за пределами экрана. Т.е. по сути вариант первого ответа и вариант примера со второго ответа объеденить и получилось бы верное решение
     
  5. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    Поиграйте в css с @media screen and max-width=1000. Грубо говоря, когда ширина экрана будет ниже указанной, то изображения можно будет скрыть.
     
    Lasted edited by : 18 май 2014
    HPlus и LuisAlberto нравится это.
  6. nikfakel

    nikfakel

    Регистрация:
    24 июл 2013
    Сообщения:
    150
    Симпатии:
    33
    [cite] при уменьшении разрешения те края изображений, которые не помещаются должны скрываться не под центральной блок, а исчезать за пределами экрана[/cite]
    то есть изначально изображение привязывается к краю экрана. Потом при уменьшениии окна изображение (скажем левое) достигает центральной колонки. Потом оно "упирается" правым краем в центральную колонку. Затем (при дальнейшем уменьшении) левый край начинает скрываться за границей окна. Правильно я понимаю?

    Если да, то можно попробовать привязывать изображения опять же к центральной колонке - позиционировать их так, чтобы они "отталкивались" от нее влево и вправо, когда ширина окна большая. У body указать overflow:hidden, чтобы они прижимались к краям центральной колонки и по бокам обрезались границей окна - это при маленьком разрешении. Ну и указать min-width у body равный ширине центральной колонки.