x-legioner, взяли на вооружение - молодцы!
Только вот не нужно плакать, что я не читал, я прочитал обсолютно все и все попробовал. Если вам интересно, прочитайте всю тему, поймете что проблема не в том, что бы просто прибить футер. Да и тот метод, что вы взяли на вооружение, описывался и повыше, и в инете по запросу "прибить футер" почти на каждом сайте.
почему почти верно? конкретизируйте ;)
Ткач, x-legioner, фон то для body не будет правильно работать)) Вобщем я нашел решение - делать фон для div'а + маленькая хитрость.
html:
<!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" xml:lang="ru"> <head> <title>Тест</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" type="text/css" media="screen" href="style/main.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="style/ie.css"/> <![endif]--> </head> <body> <div id="page"> <div id="container"> <div id="content"> <h1>Заголовок</h1> <p>текст текст текст</p><p>текст текст текст</p><p>текст текст текст</p><p>текст текст текст</p><p>текст текст текст</p> </div> <div id="sidebar"> <h3>Заколовок</h3> <a id="showBox" href="pagelightbox.html" title="Show lightbox">Show lightbox</a> <p>текст текст</p><p>текст текст</p><p>текст текст</p> </div> </div> </div> <div id="footer"> <p>текст</p> </div> </body> </html>
css:
HTML,BODY,DIV,SPAN,APPLET,OBJECT,IFRAME,H1,H2,H3,H4,H5,H6,P,BLOCKQUOTE,PRE,A,ABBR,ACRONYM,ADDRESS,BIG,CITE,CODE,DEL,DFN,EM,FONT,IMG,INS,KBD,Q,S,SAMP,SMALL,STRIKE,STRONG,SUB,SUP,TT,VAR,HR,B,U,I,CENTER,DL,DT,DD,OL,UL,LI,FIELDSET,FORM,LABEL,LEGEND,TABLE,CAPTION,TBODY,TFOOT,THEAD,TR,TH,TD{padding:0;margin:0;border:none;outline:none;vertical-align:baseline;font-family:inherit;font-size:100%;}HTML{font-size:100.01%;}DFN,I,CITE,VAR,ADDRESS,EM{font-style:normal;}TH,B,STRONG,H1,H2,H3,H4,H5,H6{font-weight:normal;}TEXTAREA,INPUT,SELECT{font-family:inherit;font-size:1em;}BLOCKQUOTE,Q{quotes:none;}Q:before,Q:after,BLOCKQUOTE:before,BLOCKQUOTE:after{content:'';content:none;}OL,UL{list-style:none;}INS{text-decoration:none;}DEL{text-decoration:line-through;}TABLE{border-collapse:collapse;border-spacing:0;}CAPTION,TH,TD{text-align:left;}:focus{outline:none;} html,body { height: 100%; } body { line-height:1.3; font-size:.75em; color:#333; } body,textarea,input,select { font-family:Arial,'Helvetica Neue',Helvetica,sans-serif; } a { text-decoration:underline; } a:link { color:#3498D1; } a:visited, a:hover { color:#416579; } a:active { color:#D80E0E; } h1,h2,h3 { color:#000; } h1 { font-size:2.2em; margin-bottom:.6em; } h2 { font-size:1.85em; margin:.6em 0 .4em 0; } h3 { font-size:1.5em; margin-bottom:.2em; } p { margin-bottom:.5em; } ::selection { background: #3498d1; color:#FFF; } ::-moz-selection { background: #3498d1; color:#FFF; } #page{ position:relative; min-height:100%; min-width:990px; background:url(../i/page_bg.png) bottom repeat-x; } #container { overflow:hidden; padding:100px 0 120px 0; width:990px; margin:0 auto; } #content{ float:right; width:740px; } #content ul { margin-bottom:.5em; } #content li { background:url(../i/li_item.gif) 10px center no-repeat; padding:.1em 0 0 25px; } #content i { font-style:italic; } #sidebar{ float:left; width:220px; } #sidebar a { margin-bottom:.4em; display:block; } #footer{ width:740px; margin:-60px auto 0 auto; height:60px; position:relative; padding-left:250px; } #footer p { font-size:.9em; color:#666; }
ie:
* html #page { height:100%; } #container { zoom:1; }
Макет с фикс. шириной, для резины тоже проблм не будет... еще даже легче))
Prior, может быть... но хотелось бы обойтись без таблиц! конечно если решение будет очень сложным или его вообще не будет, то таблица, и без вопросов))
Хотя с высотой проблему я решил, ща вродь она адекватна. НО появилась проблема с шириной... если получится исправить, покажу потом решение)
.....Вверх =)
ух.... опять не то)) Я знаю как прибить футер! вопрос не в этом... точнее не совсе в этом.
Не буду больше приводить код, т.к. его наверно никто не смотрит)) Подойду по-другому: как сверстать макет ниже??? условие только одно, футер при отсутствии текста должен быть прибит к низу страницы.
Попробую еще раз объяснить суть проблемы =)
kopusha, ваш код ниже (я только изменил фон блоков):
<!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" xml:lang="ru"> <head> <title>Прижатие footer к низу экрана/контента</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <style type="text/css" media="all"> * { margin: 0; padding: 0; border: 0; } html, body { width: 100%; height: 100%; } * html #container { height: 100%; } body { background: #CCC url(bg.gif) left bottom repeat-x; color: #333; } #container { position: relative; width: 960px; margin: 0 auto; min-height: 100%; background:#FFF; } .clearfloat { clear: both; } .empty { height: 50px; } #footer { position: relative; background: #333; width: 960px; height: 50px; color: #ccc; font-size: .9em; margin: -50px auto 0; } </style> </head> <body> <body> <div id="container"> <div id="header"></div> <div id="leftside"></div> <div id="rightside"> <p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p><p>много текста</p> </div> <div class="clearfloat"></div> <div class="empty"></div> </div> <div id="footer"></div> </body> </html>
Обратите внимание, что для body прописан фон цветом и картинкой (background: #CCC url(bg.gif) left bottom repeat-x;), картинка должны распологатся всегда внизу экрана, но не распологается! Вот отсюда вопрос, как это сделать?
Приложил файл фона, просто засуньте код в html и сразу увидите баг=)
Также прилаживаю скрины, на них синий фон это картинка, должна быть всегда внизу экрана. Смотрите на положение скроллинга и синего фона
Flame, не катит. таже херь.
kopusha, спасибо но тоже не помогло(( У вас опять же для html,body указана высота 100%, это видимая часть экрана и она не тянется, поэтому фон (если на странице много контента и появляется правый скролл) не выравнивается по нижней границе.
ща понял о чем вы=)
я вот только этот способ редко использую, т.к. в большинстве случаев эти плавающие рисунки выполняют какие-то функции, например, кликабельный логотип, или блок ссылок. А тогда удобнее позиционировать сам блок, нежели фон в нем. Ну тут конечно зависит от задачи+дело вкуса.
ребята, читайте плиз топик! Специально привел html, описал проблему, про всякие repeat-x-y и так все знают, дело не в этом. Не пишите лижбы написать, это никому не нужно...
