Прибить футер к низу страницы, как?

XL

1

x-legioner

22 апреля 2009, 07:40

#21

А вы не пробовали это вариант, в вашем топике об этом говорили.

http://www.zakharov.ms/footer/

По логике вещей должно работать.

x-legioner добавил 22.04.2009 в 11:42

x-legioner:
А вы не пробовали это вариант, в вашем топике об этом говорили.
http://www.zakharov.ms/footer/
По логике вещей должно работать.

Лично я взял эту идею на вооружение.

47

lazio

22 апреля 2009, 08:45

#22

Ткач, 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;

}

Макет с фикс. шириной, для резины тоже проблм не будет... еще даже легче))

COMFI - Начни Зарабатывать! (http://affiliate.comfi.ru/a2/466735/Program-Overview)

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

A

90

Alehan

22 апреля 2009, 09:02

#23

В принципе почти верно, на всякий случай добавить див с clear: both;

47

lazio

22 апреля 2009, 09:22

#24

почему почти верно? конкретизируйте ;)

XL

1

x-legioner

22 апреля 2009, 19:26

#25

Могу сказать только одно, автор топика не внимательно читает то что ему предлагают,

выше предлагали посмотреть http://www.zakharov.ms/footer/

там всё очень просто описано и всё работает, сам посмотрел и взял себе на вооружение.

x-legioner добавил 22.04.2009 в 23:29

Mr.Sm!th:
http://www.zakharov.ms/footer/

Да автор топика даже и не потрудился посмотреть.

А вам спасибо!

Очень пригодиться этот пример в повседневной практике.

47

lazio

23 апреля 2009, 06:51

#26

x-legioner, взяли на вооружение - молодцы!

Только вот не нужно плакать, что я не читал, я прочитал обсолютно все и все попробовал. Если вам интересно, прочитайте всю тему, поймете что проблема не в том, что бы просто прибить футер. Да и тот метод, что вы взяли на вооружение, описывался и повыше, и в инете по запросу "прибить футер" почти на каждом сайте.

XL

1

x-legioner

23 апреля 2009, 17:36

#27

lazio:
x-legioner, взяли на вооружение - молодцы!
Только вот не нужно плакать, что я не читал, я прочитал обсолютно все и все попробовал. Если вам интересно, прочитайте всю тему, поймете что проблема не в том, что бы просто прибить футер. Да и тот метод, что вы взяли на вооружение, описывался и повыше, и в инете по запросу "прибить футер" почти на каждом сайте.

Во всём согласен, действительно лапухнулся по теме именно бакгроунда по низу..

Прошу прощенья. Следующий раз буду внимательней.

Буду колдовать, есть идея хочу попробовать.

Если получиться отпишу.

С таблицей конечно всё в два раза проще. Но я так понял что дело принципа .

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

Дзен реализовал для авторов возможность вывода денег через СПБ

Тренды маркетинга в 2024 году: мобильные продажи, углубленная аналитика и ИИ