Jump to content
  • 0

Вопрос про расположение фоновой картинки

Shilgya

Asked by Shilgya,

 Share

Question

Shilgya Explorer

Shilgya

Posted
Posted

есть у меня страница с примерно такой структурой:

<html><body>
<div id="all"></div>
<div id="footer"></div>
</body></html>

К ней полагается следующий css:

html, body {
 height: 100%;
}
#all {
 min-height: 100%;
}
* html #all {
 height: 100%;
}
#footer {
 clear: both;
 height: 136px;
 margin-top: -136px;
}

Такая схема применена для того, чтобы подвал всегда был снизу, даже если контента на странице мало.

Теперь встала задача разместить на странице три фоновых изображения. Одно равномерное текстурное по всей странице, ещ? одно - специфичная текстура для верхнего края документа, и ещ? одно - декоративный элемент в нижнем левом углу.

Сразу напрашивается решение - разместить картинки фоном для html, body и #all.

Но дело в том, что высота всех этих тр?х элементов высчитывается из высоты окна браузера, и соответственно фоновый рисунок, который должен быть в нижнем левом углу страницы, размещается в нижнем левом углу окна вне зависимости от того, продолжается ли текст далее.

Кстати, наблюдаем тот самый редкий случай, когда оригинальное видение css в браузерах MSIE (5.0, 5.5, 6, 7 в этом плане оказались одинаковы) пошло на пользу - в IE фоновое изображение на нужном месте.

Результаты моих изысканий находятся здесь: http://fvsr.ru/highway/

Вот каким бы образом разместить фон в нижнем левом углу для всех браузеров?

{...перенесено в Слои kiD}

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
ARA Explorer

ARA

Posted
Posted

Создай DIV, размести его в абсолютных координатах, и задай z-index!

Что-то подобие http://forum.htmlbook.ru/index.php?showtopic=4464 смотри самый нижний пример, блок

, он постояно внизу, тока задай ему фиксированое позиционирование!

Понял кака?

Link to comment
Share on other sites
  • 0
strix Explorer

strix

Posted
Posted

а если попробовать поменять местами определения фона, вместо:

body {
 background: url(/images/highway_top_bg.jpeg) top repeat-x;
 color: #fff;
}
#all {
 background: url(/images/highway_bottom.jpeg) left bottom no-repeat;
}

написать:

body {
 background: url(/images/highway_bottom.jpeg) left bottom no-repeat;
 color: #fff;
}
#all {
 background: url(/images/highway_top_bg.jpeg) top repeat-x;
}

Link to comment
Share on other sites
  • 0
strix Explorer

strix

Posted
Posted

фон для #all у вас отображается в ФФ в правильном месте - внизу этого блока....

кроме добавления слоя абсолютно позиционированного не вижу пока решения...

может, как- то подвал влияет - попробуйте абсолютное позиционирование, может что получится :)

Link to comment
Share on other sites
  • 0
yopopt Explorer

yopopt

Posted
Posted

Интересно. Я бы сделал так:

Фон из #all перен?с в #content, а сам #content изменил так:

#content {
background:transparent url(/images/highway_bottom.jpeg) no-repeat scroll left bottom;
padding:290px 0 137px 320px;
width:580px;
}

То есть заменил margin на padding и добавил отступ снизу. Фон опустился и теперь надо поднять футер:

#footer {
background:transparent url(/images/bottom_pic.gif) no-repeat scroll 630px 70px;
clear:both;
font-size:90%;
height:60px;
padding:77px 0 0 320px;
position:relative;
top:-137px;
}

Я думаю комментарии не требуются - вс? просто. :)

Link to comment
Share on other sites
  • 0
Shilgya Explorer

Shilgya

Posted
  • Author
Posted

Спасибо. Такая попытка тоже была, безуспешно.

Но очередная попытка сделать так натолкнула на мысль, которая и привела к результату:

body > #all {
 overflow: hidden;
}

собственно, вот и вс?. overflow: hidden скрывает то, что не поместилось в элемент. Если не указана явно высота, то высота увеличивается настолько, чтобы вместить содержимое, а значит можно успешно прибивать к нижнему краю. Но в ИЕ6 существует ошибка (в ИЕ7 е? уже нет), из-за которой высота не увеличивается, а вычисляется автоматически, и не умещающееся содержимое скрывается. Но ие6 не понимает дочерних селекторов, чем мы и воспользовались.

Link to comment
Share on other sites
  • 0
yopopt Explorer

yopopt

Posted
Posted

Просто не понял сразу как Вам в таком простом макете мог понадобиться overflow... Посмотрел. Особенно забавно margin-top:-337px; в #footer. :) Я Вам написал простое решение в посте #7. Зачем здесь придумывать конструкции типа body > #all {overflow: hidden;} я не понимаю.

Link to comment
Share on other sites
  • 0
Shilgya Explorer

Shilgya

Posted
  • Author
Posted

margin-top:-337px; в #footer - это остатки от прежних экспериментов, которых в чистовом варианте не будет. А будет более правильное значение.

Теперь у меня вопрос. Как без overflow добиться того, чтобы #content имел размер равный высоте страницы, а не высоте окна? в IE всех версий так и происходит, но это всего лишь 60% посетителей, а есть желение показать правильное оформление всем.

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