Проблемы с позиционированием основного div

Hum9k · February 18, 2012

Очень прошу помочь. Фон - цвет, на нем div блок (на котором и располагается вся информация) - это картинка размером 1600х1200px, она находится по центру. При просмотре сайта на меньших разрешениях монитора, картинку, в зависимости от разрешения, начинает обрезать, а приближение ведется к левому верхнему краю самой картинки. Вопрос в том что я хочу чтобы при приближении (или просмотре сайта на маленьком разрешении монитора) картинка бы обрезалась слева и справа (т.е. приближение велось на к краю картинки, а прямо к её центру), т.к. вся информация закреплена по центру этой картинки.Как это сделать?

Вот CSS

 body { background-color:#000; margin:0px; padding:0px}

.fon { width:1600px; height:1200px; background-image:url(images/fon.jpg); background-repeat:no-repeat; margin:0 auto}

Вот HTML


<body>
<div class="fon">	
       <много блоков>
</div>
</body>

dmitryart · February 19, 2012

Очень прошу помочь. Фон - цвет, на нем div блок (на котором и располагается вся информация) - это картинка размером 1600х1200px, она находится по центру. При просмотре сайта на меньших разрешениях монитора, картинку, в зависимости от разрешения, начинает обрезать, а приближение ведется к левому верхнему краю самой картинки. Вопрос в том что я хочу чтобы при приближении (или просмотре сайта на маленьком разрешении монитора) картинка бы обрезалась слева и справа (т.е. приближение велось на к краю картинки, а прямо к её центру), т.к. вся информация закреплена по центру этой картинки.Как это сделать?
Вот CSS
 body { background-color:#000; margin:0px; padding:0px}

.fon { width:1600px; height:1200px; background-image:url(images/fon.jpg); background-repeat:no-repeat; margin:0 auto}
Вот HTML
<body>
<div class="fon">	
       <много блоков>
</div>
</body>

Могу предложить такое решение

HTML


<body>
    <div id="bg"></div>
    <div id="wrap">
        <!-- Много блоков -->
    </div>
</body>

CSS


body {
    overflow: hidden
}
#bg {
    position: absolute;
    width: 1600px;
    height: 1200px;
    top: 0;
    left: 50%;
    margin-left: -800px;
    background: url('images/fon.jpg') no-repeat;
    z-index: 0
}
#wrap {   
    position: relative;
    z-index: 1
}

Но лучше всего, подобных решений избегать. Говорю Вам как частый пользователь интернета, предлагаемого сотовыми операторами.

Edited February 19, 2012 by dmitryart

Boolat · February 19, 2012

В вёрстке новичок - надеюсь не написал глупость.

HTML

<body>
    <div id="bg"></div>
    <div id="wrap">
        <!-- Много блоков -->
    </div>
</body>

CSS

body {
    overflow: hidden
}
#bg {
    background: url('images/fon.jpg') no-repeat center;
    width: 100%;
    height: 1200px;

}
#wrap {   
   margin: 0 auto;
   width: xxxxxx;
}

DStereo · February 20, 2012

Зачем городить кучу блоков с позиционированием? Задайте фон для body и будет вам счастье. Вот так:


body{background:#000 url('images/fon.jpg') no-repeat center}

Edited February 20, 2012 by DStereo

Yazon_Nile · February 20, 2012

DStereo, +1.

Ещё можно использовать центровку тремя дивами. Очень полезная штука при широких сайтах. Но снова-таки. Смотря какая цель.

Sign In

Проблемы с позиционированием основного div

Question

Hum9k

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

dmitryart

Link to comment

Share on other sites

Boolat

Link to comment

Share on other sites

DStereo

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information