Вопросы по макету!

Aleksty · November 4, 2011

Это превью шаблона, с которым проблемы....

Как прижать футер к нижней части экрана при любом разрешении?

Как привязать левую и правую колонку к футеру и установить резиновую высоту?

То есть - не зависимо от количества центральных блоков колонки должны растягиваться догоняя футер!

Третий день колдую, ничего не получается...

На сайте тоже не нашел, есть похожие проблемы, но не для этого случая...

Если кто знает ответ, подскажите, заранее премного благодарен.

Или хотя бы ссылки на материалы, где найду решение.

Edited November 5, 2011 by Aleksty

zSpx · November 4, 2011

Ой, лукавите. Все элементарно находится в гугле, ели вбить ваш первый вопрос в поиск. Вот тут, например. И Это поможет, если по 3 дня ковыряетесь.

Aleksty · November 4, 2011

Да нет, правда не нашел, может поторопился, торопыжкин типа...

За ссылки ОГРОМНОЕ СПАСИБО!!!!!! Генератор просто улет :yahoo: !

Опс!!!

А все это не то.... Это я делал и без генератора!

Тут так:

Если позиционировать футер абсолюте, то или футер будет налезать на центральный блок, или наоборот, а надо что бы центральные блоки сдвигали футер, растягивая страницу и при этом левая и правая колонки должны тянуться за футером (или ценральными блоками).

Edited November 4, 2011 by Aleksty

Justnewone · November 4, 2011

гулите "футер внизу экрана кроссбраузерно"

Aleksty · November 5, 2011

Блин!!!!! Я все же сделал это!!!!! :rolleyes:

Теперь неважно что раздвигается, или боковые колонки, или центральные блоки, все связано!

Единственной не решенное условие - это "футер всегда внизу", при малом количестве контента! :blush:

Пока регулирую растяжку одной из колонок так - <br style="line-height: 25px">

Кстати! НИГДЕ решения именно этой задачи я не нашел!!!!

Предлагаются варианты: или футер внизу, или колонка (именно колонка!!!!! две не задействованы!!!) двигает футер!

Код конечно нужно подчистть и доработать, но главное что задача, в принципе решена!

Может кому и пригодится....

Тут можно посмотреть

Да! Что еще! Совершенно не ставя такую задачу, макет получился резиновый!!!! Ничего не вываливается и не пропадает даже при очень сильном изменении размеров!!!!

Нет худа без добра как говорится....

СТИЛИ


* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body.page {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	background: #333;
	margin: 0; 
	padding: 0 20px;
	height: 100%;
}
a {
	color: #333;
	outline: none;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #460606;
}
p {
	margin: 0 0 18px
}
img {
	border: none;
}
#wrapper {
	min-height: 100%;
	position: relative;
	margin: 0 auto;
}
/* Central Table
—————————————————————————--*/
table.boss {
	position: relative; 
	margin: 0 auto;
	vertical-align: top;
}
td.left, td.right {
	position: relative; 
	vertical-align: top;
	background: #ccc;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
td.left {
	padding: 0 2px 0 0;
	border-right: 5px solid #333;
}
td.center {
	padding: 0 2px 0 2px;
	vertical-align: top;
	background: #333;
	border-left: 5px solid #333;
	border-right: 5px solid #333;
}
td.right {
	padding: 0 0 0 2px;
	border-left:5px solid #333;
}
/* Header
—————————————————————————--*/
#header {
	height: 40px;
	font-size: 24px;
	text-align: left; 
	padding: 20px 30px; 
	margin: 0 0 12px 0;
	background: #eee; 
	-webkit-border-radius: 0 0 20px 20px; 
	-moz-border-radius: 0 0 20px 20px; 
	border-radius: 0 0 20px 20px; 
}
/* Middle
—————————————————————————--*/
#middle {
	position: relative;
	vertical-align: top;
}
/* Content
—————————————————————————--*/
#content.current {
	background: #fafafa;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	vertical-align: top;
	margin: 0;
	padding: 0;
}
#content {
	background: #fafafa;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	margin-top: 14px;
}
.topblock {
	height: 30px;
	padding: 10px 10px 0 20px;
	background: #ccc;
	-webkit-border-radius: 20px 20px 0 0; 
	-moz-border-radius: 20px 20px 0 0; 
	border-radius: 20px 20px 0 0; 
}
.cenblock {
	padding: 0 10px 10px 20px;
	background: #f7f7f7;
}
.botblock {
	height: 20px;
	padding: 0 20px 5px 10px;
	text-align: right;
	background: #ddd;
	-webkit-border-radius: 0 0 20px 20px; 
	-moz-border-radius: 0 0 20px 20px;
	border-radius: 0 0 20px 20px;
}
/* Sidebar
—————————————————————————--*/
.sideLeft, .sideRight {
	padding: 10px 20px;
	width: 200px;
}
.sideLeft div, .sideRight div {
	position: relative;
	vertical-align: top;
}
.leftbox, .rightbox {
	position: relative;
	display: block;
}
/* Footer
—————————————————————————--*/
#footer {
	height: 40px;
	margin: 12px 0 0 0;
	padding: 15px;
	background: #818181;
	-webkit-border-radius: 20px 20px 0 0;
	-moz-border-radius: 20px 20px 0 0;
	border-radius: 20px 20px 0 0;
}

HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body class="page">
<div id="wrapper" style="">
	<div id="header"><strong>id="header"</strong></div><!-- #header-->
	<table class="boss" style="">
		<tr>
			<td class="left" style="">
				<div class="sideLeft">
					<div class="leftbox" style="top: 20px;">
						<strong><h2>class="sideLeft"</h2>
						class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"
						</strong> 
					</div>
<br style="line-height: 35px">
					<div class="leftbox">
						<strong><h2>class="sideLeft"</h2>
						class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"
						</strong> 
					</div>
<br style="line-height: 17px">
					<div class="leftbox">
						<strong><h2>class="sideLeft"</h2>
						class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"<br>class="sideLeft"
						</strong> 
					</div>
				</div><!-- #sideLeft -->
<br style="line-height: 25px">
			</td>

			<td class="center" style="">
				<div id="middle" style="">
					<div id="content" class="current">
						<div class="topblock"><h2>id="content" class="current"</h2></div>
						<div class="cenblock"><strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
						</div>
						<div class="botblock">аннотации</div>
					</div>

					<div id="content">
						<div class="topblock"><h2>id="content"</h2></div>
						<div class="cenblock"><strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
						</div><!-- #content-->
						<div class="botblock">аннотации</div>
					</div>

					<div id="content">
						<div class="topblock"><h2>id="content"</h2></div>
						<div class="cenblock"><strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
						</div><!-- #content-->
						<div class="botblock">аннотации</div>
					</div>

					<div id="content">
						<div class="topblock"><h2>id="content"</h2></div>
						<div class="cenblock"><strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
						</div><!-- #content-->
						<div class="botblock">аннотации</div>
					</div>


				</div>
			</td>

			<td class="right" style="">
				<div class="sideRight">
					<div class="rightbox" style="top: 20px;">
						<strong><h2>class="sideRight"</h2></strong>
					</div>
				</div><!-- #sideRight -->
			</td>
		</tr>
	</table>
	<div id="footer"><strong>id="footer"</strong> </div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>

Edited November 9, 2011 by Aleksty

Sign In

Вопросы по макету!

Question

Aleksty

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

zSpx

Link to comment

Share on other sites

Aleksty

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Aleksty

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information