Lord Demon
-
Posts
5 -
Joined
-
Last visited
Lord Demon's Achievements
Explorer (1/14)
0
Reputation
-
банальная проблема с прижатием футера к низу экрана
Lord Demon replied to Lord Demon's question in HTML Coding
проблема решена! -
банальная проблема с прижатием футера к низу экрана
Lord Demon replied to Lord Demon's question in HTML Coding
там может не заметно, если монитор побольше, но если добавить больше текста в основной блок, то он растянется, а футер останется на месте. Если смотреть на 1024х768 то даже того содержимого что есть хватает чтобы залезть под футер. А в мозилле он почему-то еще и отступает от низа страницы пикселей на сто.. а должно быть так же, но футер должен быть прижат во всех браузерах к низу страницы и при добавлении содержимого отступать вниз, а не оставаться на месте. -
банальная проблема с прижатием футера к низу экрана
Lord Demon replied to Lord Demon's question in HTML Coding
http://testingdaemonjoomla.serw5.com/index.php - ссылка на тестовый сайт. Все работает кроме футера -
банальная проблема с прижатием футера к низу экрана
Lord Demon replied to Lord Demon's question in HTML Coding
Пробовал такой вариант, вот сейчас попробовал еще раз для надежности - футер внизу, но на маленьком экране наезжает на содержимое. Мне кажется из-за того что в примере все блоки находятся внутри одного блока "all", у меня же, если убрать все скрипты то index.php выглядит таким образом: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="asd" xml:lang="asd" lang="asd"> <head> </head> <body> <div id="container"> <!-- header //--> <div id="header"> <div id="header-logo"> </div> <div id="header-links"> <div id="header-links-basket"> </div> </div> <div id="header-nav-top" class="header-nav-top"> </div> <div id="header-nav-lower"> <ul> <li> <div id="header-nav-search"> <form name="search" action="search.php" method="get"> <p><?php echo $osC_Language->get('button_search'); ?>:</p> <p><?php echo osc_draw_input_field('keywords', null, 'id="header-nav-search-box" size="24"'); ?></p> <p><input type="image" id="header-nav-search-go" src="templates/<?php echo $osC_Template->getCode(); ?>/images/header-nav-search-go.png"></p> </form> </div></li> <li><a href="/index.php">Главная</a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li></li> </ul> </div> </div> <!-- eof_header //--> </div> <!-- left_column //--> <div id="left-column"> </div> <!-- eof_left_column //--> <!-- main_column //--> <div id="main-column"> <div style="clear: both;"></div> </div> <!-- eof_main_column //--> <!-- right_column //--> <div id="right-column"> </div> <!-- eof_right_column //--> </div> <div id="footer-container"> <div id="footer"> <div id="footer-navigation"> <ul> <li></li> <li></li> <li class="last"></li> </ul> </div> </div> <div id="footer-copy"> </div> </div> </body> </html> то есть ощущение что футер находится вне контейнера. И чтобы его прижать надо его позиционировать относительно блока с содержимым, а уже основной блок растянуть на всю высоту экрана чтобы прижать футер, а чтобы он не наезжал выставить отступ от нижнего края.. Но вот не получается растянуть основной блок - вот в чем проблема!) Gaspode, ставил педдинг снизу на 178рх и больше и если футеру присвоить "position:relative" то он прижимается к основному блоку и не наезжает на содержимое, но тогда не прижимается к нижнему краю. Точнее как - на маленьком мониторе хватает содержимого на странице чтобы прижать, на большом же футер висит четко посредине монитора Пробовал для body, main-column, container присваивать "height: 100%", "min-height: 100%" - нужного результата не дает, хотя должно бы.. -
верстаю шаблон под osCommerce 3.0, столкнулся с кажется банальной проблемой, не так ведь сложно прижать футер к низу экрана, а страницу растянуть на всю высоту вне зависимости от содержимого. Но что-то я запутался немного, а за два дня с этой проблемой уже и никаких вариантов в голову не приходит, буду благодарен если кто укажет где моя ошибка)) вот стили основной части сайта, без шапки и футера /* @group structure */ #container { margin-left: auto; margin-right: auto; width: 1000px; height: 100%; text-align: left; background: #e0e9ed; overflow: hidden; } #left-column { width: 166px; position: relative; top: 80px; float: left; clear: both; margin-left: 25px; } #main-column { width: 752px; float: left; position: relative; left: 35px; top: 80px; padding:left: 10px; padding-right: 20px; padding-bottom: 0px; background: #ffffff; } #container:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } #right-column { width: 173px; float: right; } /* @end */ вот стили футера /* @group footer */ #footer-container { background: #3ea2c2; width: 100%; height: 179px; margin-top: 0px; position: absolute; bottom: 0; } #footer { clear: both; padding-top: 20px; width: 1000px; margin-right: auto; margin-left: auto; background: transparent; overflow: hidden; } /* @group footer-navigation */ #footer-navigation { background: transparent; width: 1000px; height: 79px; position: relative; text-align: center; margin-left: 22px; margin-right: 22px; z-index: 5; } #footer-navigation ul { height: 34px; } #footer-navigation li { height: 34px; display: inline; text-align: center; } #footer-navigation li a { color: black; font-size: 14px; font-weight: bold; text-decoration: underline; padding-left: 14px; padding-right: 14px; line-height: 34px; background: url(images/footer-navigation-sep.png) no-repeat right top; } #footer-navigation li a:hover { color: black; text-decoration: none; } #footer-navigation li.last a { background-image: none; padding-right: 0; } /* @end */ /* @group footer-copy */ #footer-copy { clear: both; text-align: center; padding-top: 100px; color: #0c576e; font-size: 11px; background: url(images/footer-copy.png) no-repeat top center; width: 1000px; height: 77px; position: relative; bottom: 100px; left: -2px; margin-right: auto; margin-left: auto; } #footer-copy a { color: #898989; text-decoration: none; } #footer-copy a:hover { color: #333; text-decoration: underline; } /* @end */ если для "footer-container" выставляю значение абсолют то он прижимается к низу экрана, но на 1024х768 наезжает на основное содержимое, так и оставшись внизу первого экрана если релатив - то он выравнивается по краю содержимого, но если страница пустая то висит на середине страницы. Суть - никаким способом не могу растянуть основное содержимое на всю высоту экрана, вне зависимости от разрешения так, чтобы на нее не налазил футер. Ошибок не нашел, валидатором проверял, несколькими способами пробовал это осуществить - не получилось) Структуру страницы если надо могу скинуть, могу даже ссылку на тестовый сайт в личку скинуть. Заранее спасибо за совет!