Прошу помощи в блочной вёрстке сайта.

Варфоломей · January 25, 2012

Построил каркас. Вроде бы всё шло стабильно. Но что то не могу построить блоки обозначенный знаком "?". Помогите поужалуйсто достроить.Работаю через Dreamweaver (для новичка самое оно). Может что то в коде нужно исправить?

body{

background-color:#EAEAEA;

}

#6 {

width:1200px;

height:2000px;

border-width:1px;

border-color:#000000;

background-color:#164792;

padding:5px;

margin:0px auto;

}

#5 {

width:1180px;

height:300px;

margin-top:10px;

margin-left:10px;

margin-right:10px;

margin-bottom:auto;

background-color:#FFF;

background-image:url(image/upper_block_image.jpg);

}

#4 {

width:1175px;

height:20px;

background-color:#EAF7FF;

margin-top:5px;

margin-left:10px;

margin-right:10px;

margin-bottom:5px;

color:#000;

text-align:right;

word-spacing:normal;

font-family:"Times New Roman", Times, serif;

font-size:10px;

padding-top:5px;

padding-right:5px;

}

#7 {

width:920px;

height:1400px;

background-color:#164792;

margin-left:10px;

position:absolute;

}

#2 {

width:600px;

height:1400px;

background-color:white;

margin-left:10px;

margin-right:10px;

float:right

}

#1 {

width:300px;

height:1000px;

margin:0px;

background-color:#EAF7FF;

float:left;

}

#? {

wight:300px;

height:385px;

margin-top:5px;

margin-left:10px;

margin-right:5px;

float:left;

background-color:white;

position:relative;

}

#3 {

width:260px;

height:1400px;

background-color:#EAF7FF;

margin-right:10px;

margin-left:5px;

margin-top:0px;

margin-bottom:0px;

float:right;

}

#? {

width:1180px;

height:60px;

background-color:#EAF7FF;

margin-top:10px;

margin-left:10px;

margin-right:10px;

margin-bottom:0px;

clear:both;

}

Edited January 25, 2012 by Варфоломей

Shugich · January 25, 2012

Для новичка самое оно — это notepad++ Там хоть чему-нибудь можно научиться, визуальные редакторы во всех их проявлениях зло.

Помогу вам разобраться во всём этом деле, если что-то где-то не поймёте — спрашивайте:

<!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">
	<head> 
		<title>Титл</title> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			.wrapper {
				/* Это важно */				
				margin: 20px; /* Делаем отступы со всех сторон */
			}
			.top {
				/* Это важно */	
				margin: 0 0 20px; /* Отступ от следующего элемента */

				/* Это не так важно */
				background: #ccc; /* Зададим цвет фона */
				height: 200px; /* Зададим высоту */
			}
			.menu {
				/* Это важно */	
				margin: 0 0 20px; /* Отступ от следующего элемента */

				/* Это не так важно */
				background: #ccc; /* Зададим цвет фона */
				height: 40px; /* Зададим высоту */
			}
			.middle {
				/* Это важно */	
				overflow: hidden; /* Предотваращаем схлапывание блоков */
			}
			.container {
				/* Это важно */	
				overflow: hidden; /* Предотваращаем схлапывание блоков */
				float: left; /* Выравниваем по левому краю */
				width: 70%; /* Задаём ширину */
				margin: 0 0 20px; /* Отступ от следующего элемента */

				/* Это не так важно */
				background: #eee; /* Задаём цвет фона */
				padding: 1%; /* Задаём внутренние отступы */
			}
			.sidebarLeft {
				/* Это важно */	
				float: left; /* Выравниваем по левому краю */
				width: 33%; /* Задаём ширину */
				margin: 0 0 -20px /* Компенсируем отступ, который мы задали в .block */
			}
			.block {
				/* Это важно */
				margin: 0 0 20px; /* Задаём отступ от следующего блока */

				/* Это не так важно */
				background: #ccc; /* Зададим цвет фона */
			}
			.block1 {
				/* Это не так важно */
				height: 300px; /* Зададим высоту */
			}
			.block2 {
				/* Это не так важно */
				height: 100px; /* Зададим высоту */
			}
			.content {
				/* Это важно */	
				float: right; /* Выравниваем по правому краю */
				width: 65%; /* Задаём ширину */

				/* Это не так важно */
				background: #ccc; /* Зададим цвет фона */
				height: 420px; /* Зададим высоту */
			}
			.sidebarRight {
				/* Это важно */	
				float: right; /* Выравниваем по правому краю */
				width: 25%; /* Задаём ширину */

				/* Это не так важно */
				background: #ccc; /* Зададим цвет фона */
				padding: 1%; /* Зададим внутренние отступы, для дела они не нужны */
				height: 420px; /* Зададим высоту */
			}
			.footer {
				/* Это не так важно */
				background: #ccc; /* Зададим цвет фона */
				height: 80px; /* Зададим высоту */
			}
		</style>
	</head> 
	<body>
		<div class="wrapper"> <!-- Засовываем всё в один блок -->
			<div class="top"></div> <!-- Верхняя часть -->
			<div class="menu"></div> <!-- Место для горизонтального меню -->
			<div class="middle"> <!-- Контенер для сайбара и контента -->
				<div class="container"> <!-- Контенер для контента и левого сайдбара -->
					<div class="sidebarLeft"><!-- Левый сайдбар -->
						<div class="block block1"></div> <!-- Первый блок в левом сайдбаре -->
						<div class="block block2"></div> <!-- Второй блок в левом сайдбаре -->
					</div>  <!-- Закрываем sidebarLeft -->
					<div class="content"></div> <!-- Контент -->
				</div> <!-- Закрываем container -->
				<div class="sidebarRight">3</div> <!-- Правый сайдбар -->
			</div> <!-- Закрываем middle -->
			<div class="footer"></div> <!-- Подвал -->
		</div> <!-- Закрываем wrapper -->
	</body>
</html>

UPD: Это не самая лучшая реализация из существующих, я обычно верстаю по-другому немного, но для сначала нужно освоить это, как самое простое.

Edited January 25, 2012 by Shugich

Sign In

Прошу помощи в блочной вёрстке сайта.

Question

Варфоломей

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Shugich

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information