15 июля 2011 в 2:16
Народ, есть проблема с блоками небольшая...
Делаю тему по этому шаблончику: http://csstemplater.com/result/layout_xhtmls_fix_lcr_s2_fb_1.zip
прижатый подвал постоянно книзу... если окно сужать - будет повышаться пока не упрется в контент, если контента больше, чем на страницу - подвал будет изначально ниже окна и появится перемотка вниз...
Все хорошо, но вот потребовалось чтобы на фоне подвала была картинка и чтобы она вела себя также как и подвал, но при доходе контента до подвала чтобы картинка на 100 точек уходила под контент...
Реально ли это сделать и как?
Пробовал по всякому... картинка либо лезет и выше - не останавливается когда подвал останавливается уперевшись в подвал при уменьшении окна, либо вообще по левому вылезает...
Комментарии
Блоками? Попробуй таблицами сверстать.
подвал прижатый к низу, подвал прижатый к низу, подвал прижатый к низу
да сколько можно то?
www.bukino-lobnya.ru
если высота подвала станет больше, чем отступ контейнера, то он наползёт на контент
z-index позволит определить, что под чем находится
не вариант...
Что не нравится?
Вроде сработало
Вылез таки косячек...
В подвале задаю таким образом:
html:
<div id="inside_footer">
<?php print render($page['footer']); ?>
<?php print render($page['bottom']); ?>
</div>
</div>
css такой:
background: url('/sites/all/themes/mytheme/images/footer.png') repeat-x;
position: relative;
bottom: 0px;
left: 0px;
height: 212px;
width: 100%;
margin: -212px auto 0px;
z-index: -1;
}
#inside_footer {
width: 960px;
height: 100px;
margin: 0px auto 0px;
position: relative;
top: 100px;
}
В Opera и FireFox все нормально, а в IE8 при уменьшении окна по вертикали примерно за 100 точек до контента inside_footer останавливается, а фон (footer) продолжает двигаться, пока не достигает своего нормального положения...
То есть когда контента больше,чем на страницу блок с содержимым подвала ниже фона подвала точек на 100 и отстает от контента на это же расстояние...
Есть идеи?
прикольно спрашивать совета и не следовать ему
судя по css #inside_footer всегда ниже фона #footer на 100px потому что
top: 100px;
Почему не следовать? Все нормально получилось - отступ в контенте поставил 120 точек... фон, задаваемый в footer подлезает под контент, и останавливается вместе с inside_footer - как и требовалось... Кроме IE8 и 9
Почему ниже?
Он же внутри... и должен позиционироваться относительно родительского блока...
Соответственно и отступ относительно родителя - 100 точек...
Разве не так?
И почему тогда в Опере и FF нормально все?
у меня подвал всегда с абсолютным позиционированием
так он прилипает к низу wrapper, а wrapper или имеет минимальную высоту в размер окна или растягивается содержимым
потому что стиль
top: 100px;
заставляет отображаться элемент ниже того, как он был бы в нормальном потоке на 100px
То есть подвал у вас всегда ниже окна?
Ну так да - родителдьский div имеет высоту 212, insert_footer - 100 и он находится внутри, отступаем от верха родительского 100 точек - он все равно должен оставаться внутри родительского, как и происходит в Опере и FF, а IE как всегда тупит... Но надо чтобы был какой-то консенсус между всеми браузерами...
подвал у меня всегда внизу окна, если содержимого мало, если много, то ниже содержимого
если высота подвала будет больше, чем margin-bottom контейнера, то подвал сможет наползти на содержимое
ну или не наползти, если содержимого мало
таким образом можно задать фон подвалу, а уже внутри подвала спозиционировать его содержимое так как надо
запутали... можете скинуть код ваш? или дать ссылку где он используется?
У меня то нюанс еще в том, что фон во всю страницу, а контент и подвал только на 1000 точек по центру...
Сейчас кину ссылку на свой сайт в личку...
дык дал выше
height: 100%;
}
#wrapper {
position: relative;
min-height: 100%;
overflow: hidden;
width: 908px;
border: solid #C8C8C8;
border-width: 0 2px;
margin: 0 auto;
padding: 0 25px;
}
#wrapper #container {
position: relative;
margin-bottom: 70px;
padding-bottom: 1em;
}
#wrapper > footer {
position: absolute;
bottom: 0;
left: 20px;
right: 20px;
height: 70px;
background: url(data:image/gif;base64,R0lGODlhAQAEAJEAAGTDx8jIyP///wAAACH5BAAAAAAALAAAAAABAAQAAAIDBBQFADs=) 0 0 repeat-x;
}
Фон работает, но вот вылез косяк с текстом внутри блока - его расположение почему-то зависит от соседнего блока...
http://голубятни.рф/контакты - тут можно посмотреть - когда сужаем или расширяем окно браузера в высоту...
Нормально только в Хроме текст позиционируется, в остальных тупняк как описал выше...