Пустой шаблон HTML/CSS

Подробности
</дизайн>

Как-то не прижились у меня css-фреймворки вроде 960gs: не гибко, много лишнего и вообще чужое. Как всегда, своя рубашка ближе к телу. В проектах я использую собственный простой каркас для последующей верстки. В нем есть общеизвестный резет-файл для сброса преднастроенных стилей браузеров (normalize.css), файл-помощник (helpers.css) с часто встречающимися стилями и главный файл стилей - styles.css.

Одна из фишек данного каркаса - центральная колонка, в которой обычно располагается основной контент страницы, находится в самом верху секции body HTML-разметки. Поисковикам должно быть приятно ;)

HTML:

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="/css/normalize.css" type="text/css" />
	<link rel="stylesheet" href="/css/helpers.css" type="text/css" media="all" />
	<link rel="stylesheet" href="/css/styles.css" type="text/css" media="all" />
</head>
<body>
	<div class="center" style="width:1200px;">
		<div class="main">
			<div class="wrapper">
				<div class="col33 posCenter">main-5</div>
				<div class="col33 posLeft">main-4</div>
				<div class="col33">main-6</div>
			</div>
		</div>
		<div class="header">
			<div class="wrapper">
				<div class="col33">header-1</div>
				<div class="col33">header-2</div>
				<div class="col33">header-3</div>
			</div>
		</div>
		<div class="footer">
			<div class="wrapper">
				<div class="col33">footer-7</div>
				<div class="col33">footer-8</div>
				<div class="col33">footer-9</div>
			</div>
		</div>
	</div>
</body>
</html>


CSS (helpers.css):

html * {
	position:relative;
}

.wrapper {overflow:hidden;width:100%;}

.tleft {text-align:left;}
.tright {text-align:right;}
.tjustify {text-align:justify;}
.tcenter {text-align:center;}

.col,.col33,.col50,.col75,.col25,.col180,.col200,.col250,.col300,.col66 {float:left;}
.col33 {width:33%;}.col50 {width:50%;} .col75 {width:75%;} .col25 {width:25%;} .col66 {width:66%;}
.col180 {width:180px;} .col200 {width:200px;} .col250 {width:250px;} .col300 {width:300px;}

.left {float:left;}
.right {float:right;}
.center {margin:auto;}

.header {position:absolute;width:100%;}

p {margin-bottom:1em; margin-top:1em;}

/*div {border:1px solid #ccc;height:50px;}*/


CSS (styles.css):

.header {
	top:20px;
}

.main {
	padding-top:100px;
}

.posLeft {
	margin-left:-66%;
}

.posCenter {
	margin-left:33%;
}

СКАЧАТЬ простой шаблон HTML/CSS

Наверх