Подвал страницы

Bredova · December 2, 2010

Здравствуйте!

Вроде не сложный макет, но не могу понять в чем загвоздка.

Нужно чтобы подвал страницы всегда был прижат к низу.

Следовала найденным рекомендациям...

А в итоге, после текста и до подвала образовалась пустота.

http://test.bredova.ru/index_inn_2.html

Почему???

Смотрела в FF

/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}
/* common */
html, body, img, form {margin: 0px; padding: 0px; border: none;}
html, body {height:100%;}
body {background-color:#fff;}
body, td {font: 14px Arial, sans-serif; color: #000;}
a {color: #000;	text-decoration: underline;}
a:hover {text-decoration: none;}
table {border: 0px; border-collapse: collapse;}
td {vertical-align: top;}
p {padding: 0px; margin: 0px 0px 12px 0px;}
object {outline:none;}


/* HTML ELEMENTS */
body { background-color:#fff; font:62.5% Georgia,'Times New Roman',serif; letter-spacing:1; }

/* COMMON CLASSES */
.break { clear:both; }

.clear {clear:both;}
.none {line-height:0;}
.relative {position:relative;}
.img-marg {float:left; margin:0 10px 5px 0;}
.float-l {float:left;}
.float-r {float:right;}
.hfeed .posts {margin-bottom:10px;}


/*****/
/* HEADER */
#header { height:600px; }
#header_2 { height:100px; }
.headerimg { background-position: center top; background-repeat: no-repeat; width:100%; height:600px; position:absolute; }

/* NAVIGATION */
#nav-outer { height:110px; padding-top:11px; position:relative; top:24px; background-image:url("../images/headerbg.png"); }
#nav-outer_2 { height:80px; padding-top:11px; position:relative; margin-top:24px; background-image:url("../images/headerbg.png"); }
#navigation { height:100px; width:960px; margin:0 auto; background-image:url("../images/logo.png"); background-position:top left; background-repeat:no-repeat; }
#navigation_2 { height:70px; width:960px; margin:0 auto; background-image:url("../images/logo.png"); background-position:top left; background-repeat:no-repeat; }

/* SEARCH */
#search {
	background-color:#4e5d74;
	float:right;
	width:220px;
	padding:10px;
	margin-top:30px;
}
#searchtxt { padding:3px; width:150px; }
#searchbtn { border:1px solid #eee !important; background-color:#CD2B3A; color:#eee; padding:3px; margin-left:5px; }

/* MENU */
#menu { position:relative; top:85px; }
#menu ul { list-style:none; }
#menu ul li { display:inline; font-variant:small-caps; font-size:14px; }
#menu ul li a { color:white; text-decoration:none; font-weight:bold; padding-right:20px; }
#menu ul li a:hover { text-decoration:underline; color:#48bdee;}

#menu_2 { position:relative; top:45px; float:right}
#menu_2 ul { list-style:none; }
#menu_2 ul li { display:inline; font-variant:small-caps; font-size:15px; text-transform:lowercase;}
#menu_2 ul li a { color:white; text-decoration:none; font-weight:bold; padding-right:20px; }
#menu_2 ul li a:hover { text-decoration:underline; color:#48bdee;}

/* HEADER TEXT */
#headertxt { width:960px; margin:0 auto; clear:both; position:relative; top:74px; }
#firstline { background-image:url("../images/textbg.png"); color:#333; font-size:40px; padding:4px 13px 7px; float:left; display:block; }
#secondline { background-image:url("../images/textbg.png"); color:#CD2B3A; text-decoration:none; font-size:60px; padding:0 13px 10px; float:left; display:block; clear:both; }
#secondline:hover { text-decoration:underline; color:#7F000C; }

.pictured { background-color:#CC3333; color:#FFF; font-size:12px; padding:9px 16px; text-transform:uppercase; float:left; display:block; clear:both; margin-top:10px; }
.pictured a { font-size:16px; font-style:italic; letter-spacing:0; text-transform:none; color:#FFF; text-decoration:none; }
.pictured a:hover { text-decoration:underline; }

/* CONTROLS */
.btn { height:18px; width:18px; float:left; cursor:pointer; }
#back { background-image:url("../images/control_rewind.gif"); }
#next { background-image:url("../images/control_fast_forward.gif"); }
#control { background-image:url("../images/control_pause.gif"); }

/* HEADER HAVIGATION */
#headernav-outer { position:relative; top:400px; margin:0 auto; width:960px; }
#headernav { padding-left:864px; }

/* CONTENT */
h1 {font-family:Georgia, "Times New Roman", Times, serif; font-size:24px; margin:0 0 5px 0; color:#CD2B3A;}
#content { color:#333; background-color:#fff; width:960px; margin:0 auto; font-family:Verdana, Geneva, sans-serif; min-height:100%;}
#content p, .footer p { font-size:12px; padding-bottom:10px; line-height:18px;}
#content p a, .footer p a { text-decoration:none; color:#CD2B3A; }
#content p a:hover, .footer p a:hover { text-decoration:underline; color:#7F000C; }

#left_col_content {width:370px; float:left; margin:20px 30px 20px 0;}
#right_col_content{ width:560px; float:left; margin:20px 0 20px 0;}

.imgleft {padding:5px; background-color:#FFF; border: 1px #999 solid; margin:3px 10px 0 0;} 

/* left col */
.left-col {width:220px; float:left; overflow:hidden;}
.left-col .padding {padding:20px 20px 70px 20px;}

/* center col */
.center-col {width:520px; float:left; overflow:hidden;}
.center-col .padding {padding:20px 20px 70px 20px;}
.center-col li {margin:10px 0;}

/* right col */
.right-col {width:220px; float:left; overflow:hidden; }
.right-col .padding {padding:10px 10px 70px 10px;}

/* footer */
.footer_inn {width:960px; margin:0 auto; position:relative;}
.footer_inn-b {width:100%; position: absolute; left:0;}
.footer_inn .copyrights {padding:15px; color:#ddd;}
.foot_inn-right {width:50%; float:right; padding:15px; text-align: right;}


.footer {height:50px; padding-top:11px; position:relative; background-image:url("../images/headerbg.png"); color:#FFF}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Ваш сайт</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

  <link rel="stylesheet" type="text/css" href="css/style.css" />

  <!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="css/ie6fix.css" />
  <![endif]-->

</head>  
<body>  

<!-- \\\header\\\ -->
<div id="header_2">
	<!-- Top navigation on top of the images -->
	<div id="nav-outer_2">
		<div id="navigation_2">
			<div id="menu_2">
				<ul>
					<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>
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- ///header/// -->

<!-- main-cont -->
<div id="content">

<!-- \\\left col\\\ -->
<div class="left-col">
  <div class="padding">

<!-- main menu -->
<ul class="main-menu">
  <li><a href="#">Раздел сайта 1</a></li>
  <li><a href="#">Раздел сайта 3</a></li>
  <li><a href="#">Раздел сайта 3</a></li>
  <li><a href="#">Раздел сайта 4</a></li>
  <li><a href="#">Раздел сайта 5</a></li>
</ul>
<!-- /main menu -->

<!-- contacts -->
<h2>Контакты</h2>
<div class="vcard">
  <span class="author fn">Фамилиев И. О.</span>
  <a class="email" href="mailto:...">email@domain.com</a>
  <div class="title">должность</div>
  <div class="org">Название компании</div>
  <div class="adr">
	Адрес:
	<span class="country-name">Страна</span>,
	<span class="region">Регион</span>,
	<span class="locality">Город</span>,
	<span class="postal-code">Индекс</span>,
	<span class="street-address">ул. Парковая, 15</span>,
  </div>
</div>
<!-- /contacts -->

  </div>
  <br class="clear none" />
</div>
<!-- ///left col/// -->

<!-- \\\center col\\\ -->
<div class="center-col">
	<div class="padding">

<h1>Заголовок 1</h1>

<div class="img-marg" style="width:200px; height:100px; background-color:#888;">якобы картинка</div>
<p>Фронт мгновенно окисляет разрез, все дальнейшее далеко выходит за рамки текущего исследования и не будет здесь рассматриваться. Режим по определению поглощает желтозём только в отсутствие тепло- и массообмена с окружающей средой. <a href="#">Ортштейн усиливает</a> электрод одинаково по всем направлениям. Облесение, если принять во внимание воздействие фактора времени, иссушает смешанный подбел даже в том случае, если непосредственное наблюдение этого явления затруднительно. Эрозия обеднена. Как мы уже знаем, педон двумерно нейтрализует поглотительный дренаж, что лишний раз подтверждает правоту Докучаева. Десукция поглощает лёсс, однозначно свидетельствуя о неустойчивости процесса в целом.</p>

	</div>
  <br class="clear" />
</div>
<!-- ///center col/// -->

<!-- \\\right col\\\ -->
<div class="right-col">
  <div class="padding">

<!-- news -->  
<h2>Новости</h2>

<div class="hfeed">

  <div class="hentry posts" id="n1234">
	<strong class="entry-title"><a href="#">Комковато-порошистый лессиваж</a></strong><br />
	<span class="entry-content">
	  Пространственная вариабельность почвенного покрова аналитически притягивает подбур, что лишний раз подтверждает правоту Докучаева.
	</span>
	<div>
	  <span class="byline">Автор: <span class="author vcard"><span class="fn">Фамилиев И. О.</span></span>
		<a rel="bookmark" href="2009_10_16_familiev_archive.html#1234">
		<abbr class="published" title="2009-10-24t21:49:00-00:00">21:49</abbr></a>
	  </span>
	</div>
  </div>

  <div class="hentry posts" id="n1235">
	<strong class="entry-title"><a href="#">Комковато-порошистый лессиваж</a></strong><br />
	<span class="entry-content">
	  Пространственная вариабельность почвенного покрова аналитически притягивает подбур, что лишний раз подтверждает правоту Докучаева.
	</span>
	<div>
	  <span class="byline">Автор: <span class="author vcard"><span class="fn">Фамилиев И. О.</span></span>
		<a rel="bookmark" href="2009_10_16_familiev_archive.html#1234">
		<abbr class="published" title="2009-10-24t21:49:00-00:00">21:49</abbr></a>
	  </span>
	</div>
  </div>

</div>
<!-- /news -->

  </div>
  <br class="clear none" />
</div>
<!-- ///right col/// -->

  <br class="clear none" />
</div>
<!-- /main-cont -->

<!-- \\\footer\\\ -->
<div class="footer">
<div class="footer_inn">
  <div class="footer_inn-b">
	<div class="foot_inn-right">
	  2008-2010 гг.
	</div>
	<div class="copyrights">
	  © Ваш сайт
	</div>
  </div>
</div>
</div>
<!-- ///footer/// -->

</body>  
</html>

Edited December 2, 2010 by Bredova

psywalker · December 2, 2010

1) Вот эта хрень стоит у контента min-height: 100%;

2) Хедер тоже не остался без внимания.

3) Лови пример доченька http://psywalker.ru/Forum/Footer_bottom/main.html

Bredova · December 2, 2010

1) Вот эта хрень стоит у контента min-height: 100%;
2) Хедер тоже не остался без внимания.
3) Лови пример доченька http://psywalker.ru/Forum/Footer_bottom/main.html

Если убрать хедер, то все ок

Если убрать min-height: 100%, то футер не прижимается

Как же быть?

psywalker · December 2, 2010

Если убрать хедер, то все ок
Если убрать min-height: 100%, то футер не прижимается

А если засунуть футер и херед в контент

Bredova · December 3, 2010

А если засунуть футер и херед в контент

Сорри, туплю.

Сейчас сообразила как сделать.

Edited December 3, 2010 by Bredova

psywalker · December 3, 2010

Сорри, туплю.
Сейчас сообразила как сделать.

Молодчинка

Sign In

Подвал страницы

Question

Bredova

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Bredova

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Bredova

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information