Jump to content
  • 0

Выравнивание содержимого по центру


ar00
 Share

Question

Как выровнять содержимое сайта по центру, то есть сайт должен быть в полный экран, при изменении размеров окна браузера не должно появляться полос прокрутки, а содержимое "уходило" за окно браузера в одинаковых пропорциях.

Пример:

1

2

3

4

5

<body style="width: 100%; height: 100%">
<section style="width: 100%; height: 100%">

</section>
</body>

Пусть окно браузера имеет ширину/высоту 100%, при уменьшении его ширины/высоты на 10% тег <section> и его содержимое должно "уходить" влево/вверх на 5% и вправо/вниз на 5%.

Яркий пример реализации - http://www.blacknegative.com

Нечто похожее есть у Лебедева, но его способ не работает при задании элементу width и height 100% - http://www.artlebedev.ru/tools/techn.../align-center/

Помогите найти решение. Должен быть валидный CSS и HTML без использования JavaScript.

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

Яркий пример реализации - http://www.blacknegative.com

без использования JavaScript.

ну а чо!?

для сборника анекдотов самое оно :)

С моей точки зрения этот эффект можно сделать только с помощью CSS.

Возьмём пример попроще - http://42studio.ru/ верхняя картинка так же центрируется по центру и её края уходят за окно браузера. Вот только display у неё inline-block.

А нужно сделать для display:block

Link to comment
Share on other sites

  • 0

так а какие проблемы картинку сделать фоном по центру?

Картинку нельзя делать фоном по центру потому что в связи с особенностями моего проекта нельзя делать фоном.

Звучит как бред. Тогда только position: absolute; подойдет в качестве решения.

Вот, у меня была подобная задача

Edited by Jackky
Link to comment
Share on other sites

  • 0

Jackky, косячок-с детектед.

если окошко сжать уже 1061 пикселя, а потом прокрутить вправо, то голова справа обрезается некрасиво и из-под неё фон вылазит непотребно.

надо указать #header { min-width: 1061px; }

Link to comment
Share on other sites

  • 0

Нашёл более-менее приемлемое решение для моего случая. Может поможет кому:

#photo-wrap {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
min-width: 400px !important;
}

#photo-wrap > #photo {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
max-width:80%;
max-height:80%;
}

Link to comment
Share on other sites

  • 0

Так задача все-таки какая была изначально?

Разместить блок ровно по центру экрана по высоте и ширине или сделать шапку-картинку, края которой залезали бы за границы экрана при ресайзе??

Link to comment
Share on other sites

  • 0

Так задача все-таки какая была изначально?

Разместить блок ровно по центру экрана по высоте и ширине или сделать шапку-картинку, края которой залезали бы за границы экрана при ресайзе??

Изначально стояла задача сделать блок на весь экран, который бы залезал при ресайзе за границы экрана, в не зависимости от того что находится в этом блоке (текст/картинка/другие блоки).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy