Jump to content
  • 0

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

ar00

Asked by ar00,

 Share

Question

ar00 Explorer

ar00

Posted
Posted

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

Пример:

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
ar00 Explorer

ar00

Posted
  • Author
Posted
  On 8/4/2012 at 7:09 PM, wildhind said:
  On 8/4/2012 at 3:35 PM, ar00 said:

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

  On 8/4/2012 at 3:35 PM, ar00 said:

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

ну а чо!?

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

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

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

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

Link to comment
Share on other sites
  • 0
ar00 Explorer

ar00

Posted
  • Author
Posted
  On 8/4/2012 at 8:55 PM, wildhind said:

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

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

Link to comment
Share on other sites
  • 0
Jackky Explorer

Jackky

Posted
Posted (edited)
  On 8/4/2012 at 9:28 PM, ar00 said:
  On 8/4/2012 at 8:55 PM, wildhind said:

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

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

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

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

Edited by Jackky
Link to comment
Share on other sites
  • 0
wildhind Explorer

wildhind

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
ar00 Explorer

ar00

Posted
  • Author
Posted

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

#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
Jackky Explorer

Jackky

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
ar00 Explorer

ar00

Posted
  • Author
Posted
  On 8/4/2012 at 11:57 PM, Jackky said:

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

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

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

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
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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

  I accept