Вёрстка - HTML и CSS

mar4elo · 05.05.2011, 15:49

Помогите. Нужен пустой шаблон 3 колонки, шапка и футер. Шаблон резиновый, блочная Вёрстка. Футер прижат к низу.. Даже если нет текста...

ZvEr_HaCkEr · 05.05.2011, 16:29

style.css

Код:

body{
	margin:0;
	padding:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#666;
	text-align:center;
}
#wrapper { 
	margin:0 auto;
	width:100%;
	min-width:920px;
}
#header{
	background:#bdda7e;
	height:100px; 
	border:1px solid #a4ce60;
	line-height:100px;
	border-right:0;
	border-left:0;
}
#navigation{ 
	border:1px solid #bed63a;
	background:#e1edbf;
	padding:10px;
	border-right:0;
}
#main{
	float:left;
	width:100%;
	display:inline;
	overflow:hidden;
}
#content{
	margin:0 202px 0 201px; 
	border:1px solid #d2d2d2;
	height:350px;
	line-height:350px;
	background:#e6e6e6;
}
#leftcolumn{
	float:left;
	width:200px;
	margin:0 -201px 0 0;
	display:inline;
	background:#e1edbf;
	height:350px;
	line-height:350px;
	border-top:1px solid #bed63a;
	border-bottom:1px solid #bed63a;
	border-right:1px solid #bed63a;
}
#rightcolumn{
	float:left;
	width:201px;
	margin:0 0 0 -202px;
	background:#e1edbf;
	height:350px;
	line-height:350px;
	border-top:1px solid #bed63a;
	border-bottom:1px solid #bed63a;
	border-left:1px solid #bed63a;
}
#footer{
	clear:left;
	background:#e1edbf;
	text-align:center;
	border:1px solid #bed63a;
	border-left:0;
	border-right:0;
	padding:10px 0;
	width:100%;
}
.align{
	margin:0 10px 0 10px;
}

index.html

Код:

<!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" xml:lang="en" lang="en">
	<head>
		<title>Untitled document</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
		<div id="wrapper">
			<div id="header">Header</div>
            <div id="navigation">Navigation</div>
			<div id="leftcolumn">
				<div class="align">Left Column</div>
			</div>
			<div id="main">
				<div id="content">
					<div class="align">Content</div>
				</div>
			</div>
			<div id="rightcolumn">
				<div class="align">Right Column</div>
			</div>
			<div id="footer">Footer</div>
		</div>
	</body>
</html>

Bustle · 06.05.2011, 00:01

Код HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<style type="text/css">
<!--
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #4E5869;
	margin: 0;
	padding: 0;
	color: #000;
}


ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 
	padding-right: 15px;
	padding-left: 15px; 
}
a img { 
	border: none;
}


a:link {
	color:#414958;
	text-decoration: underline; 
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}


.container {
	width: 80%;
	max-width: 1260px;
	min-width: 780px;
	background: #FFF;
	margin: 0 auto; 
}


.header {
	background: #6F7D94;
}


.sidebar1 {
	float: left;
	width: 30%;
	background: #93A5C4;
	padding-bottom: 10px;
}
.content {
	padding: 10px 0;
	width: 50%;
	float: left;
}
.sidebar2 {
	float: left;
	width: 20%;
	background: #93A5C4;
	padding: 10px 0;
}


.content ul, .content ol { 
	padding: 0 15px 15px 40px; 
}


ul.nav {
	list-style: none; 
	border-top: 1px solid #666;
	margin-bottom: 15px; 
}
ul.nav li {
	border-bottom: 1px solid #666; 
}
ul.nav a, ul.nav a:visited { 
	padding: 5px 5px 5px 15px;
	display: block; 
	text-decoration: none;
	background: #8090AB;
	color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
	background: #6F7D94;
	color: #FFF;
}


.footer {
	padding: 10px 0;
	background: #6F7D94;
	position: relative;
	clear: both; 
}


.fltrt {  
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } 
ul.nav a { zoom: 1; }  
</style>
<![endif]--></head>

<body>

<div class="container">
  <div class="header"><a href="#"><img src="" alt="Место для логотипа" name="Insert_logo" width="30%" height="90" id="Insert_logo" style="background: #8090AB; display:block;" /></a> 
    <!-- end .header --></div>
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="#">Первая ссылка</a></li>
      <li><a href="#">Вторая ссылка</a></li>
      <li><a href="#">Третья ссылка</a></li>
      <li><a href="#">Четвертая ссылка</a></li>
    </ul>
    <p>&nbsp;</p>
    <!-- end .sidebar1 --></div>
  <div class="content">
    <h1>&nbsp;</h1>
    <!-- end .content --></div>
  <div class="sidebar2">
    <h4>&nbsp;</h4>
    <p>&nbsp;</p>
    <!-- end .sidebar2 --></div>
  <div class="footer">
    <p>&nbsp;</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>

Ещё один вариант

05.05.2011, 15:49	#1
mar4elo Форумчанин Регистрация: 17.04.2008 Сообщений: 146	Вёрстка Помогите. Нужен пустой шаблон 3 колонки, шапка и футер. Шаблон резиновый, блочная Вёрстка. Футер прижат к низу.. Даже если нет текста...

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
вёрстка psd шаблон	DrStrangeLove	HTML и CSS	11	18.03.2011 13:34
Правильная вёрстка	STIGMATED	HTML и CSS	0	17.09.2010 21:45
Wordpress. Вёрстка.	_alexx_	WordPress и другие CMS	0	18.05.2009 20:26
Табличная вёрстка	psywalker	HTML и CSS	0	23.06.2008 20:57
Вёрстка	psywalker	HTML и CSS	2	18.06.2008 15:01