lazio

lazio
Рейтинг
47
Регистрация
05.10.2006
Прибить футер к низу страницы, как?

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, может быть... но хотелось бы обойтись без таблиц! конечно если решение будет очень сложным или его вообще не будет, то таблица, и без вопросов))

Хотя с высотой проблему я решил, ща вродь она адекватна. НО появилась проблема с шириной... если получится исправить, покажу потом решение)

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

.....Вверх =)

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

ух.... опять не то)) Я знаю как прибить футер! вопрос не в этом... точнее не совсе в этом.

Не буду больше приводить код, т.к. его наверно никто не смотрит)) Подойду по-другому: как сверстать макет ниже??? условие только одно, футер при отсутствии текста должен быть прибит к низу страницы.

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

Попробую еще раз объяснить суть проблемы =)

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 и сразу увидите баг=)

Также прилаживаю скрины, на них синий фон это картинка, должна быть всегда внизу экрана. Смотрите на положение скроллинга и синего фона

gif bg.gif
jpg bug.jpg
Прибить футер к низу страницы, как?

Flame, не катит. таже херь.

kopusha, спасибо но тоже не помогло(( У вас опять же для html,body указана высота 100%, это видимая часть экрана и она не тянется, поэтому фон (если на странице много контента и появляется правый скролл) не выравнивается по нижней границе.

Вопрос к HTML-верстальщикам

ща понял о чем вы=)

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

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

ребята, читайте плиз топик! Специально привел html, описал проблему, про всякие repeat-x-y и так все знают, дело не в этом. Не пишите лижбы написать, это никому не нужно...

123456789 ...29
Всего: 286