вычисление расстояния между слоями и относительно границ других элементов

mastermedia · July 9, 2012

Сейчас я учусь верстать и пытаюсь сверстать данную форму http://htmlbook.ru/practical/poshagovaya-forma

Я застрял на верстке шапки данной формы. Для верстки шапки я применил относительное позиционирование. А именно, проблема с вычислением размеров между слоями, относительно других слоев и т.д. Как именно правильно вычислять подобные размеры? Выкладываю результаты, того что у меня вышло. Все размеры вычислял наугад. Не могу же я постоянно угадывать размеры наугад. Верстаю с psd шаблона. Рисунки(блокнот, бутылка, бокал, тарелка) размещены криво относительно друг друга. Вот, результат на скриншоте.

Выкладываю html и css код. Прошу помочь решить проблему.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Форма</title>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
		<link rel="stylesheet" type="text/css" href="css/index.css">
	</head>
	<body>
		<div id="container">
			<div id="header">
				<div class="notepadClass"><img src="images/01/notepad.png" alt="notepad"></div>
				<div class="bottle"><img src="images/01/bottle.png" alt=""><span>Ингредиенты</span></div>
				<div class="plate"><img src="images/01/plate.png" alt=""><span>Параметры</span></div>
				<div class="goblet"><img src="images/01/goblet.png" alt=""><span>Бокалы</span></div>
			</div>

			<div id="content">
				<p>Описание <img src="" alt=""></p>
				<form action="" method="post">
					<img src="" alt="">
					<p><input type="file"></input></p>
					<p><input type="text" value="Название коктейля"></input></p>
					<p><input type="text" value="Альтернативное название через запятую"></input></p>
					<p><input type="text" value="Краткое название"></input></p>
					<p><input type="text" value="Инструкция для приготовления"></input></p>
					<p><input type="submit" value="Ингредиенты"></input></p>
				</form>
			</div>
		</div>
	</body>
</html>


body {
	margin: 0;
}

#container {
	margin: 0px auto;
	width:  472px;
	height: 422px;
	text-align: left;
}

#header {
	background-image: url(../images/01/header.png);
	background-repeat: no-repeat;
	position: absolute;
	width: 472px;
	z-index: 1;
}
.notepadClass, .bottle, .plate, .goblet {
	position: relative;
}
.notepadClass {
	left: 10px;
	top: 10px;
	z-index: 2;
}

.bottle {
	left: 120px;
	top: -20px;
	z-index: 2;
}

.plate {
	left: 241px;
	z-index: 2;
	top: -47px;
}

.goblet {
	left: 370px;
	top: -80px;
	z-index: 2;
}

Sign In

вычисление расстояния между слоями и относительно границ других элементов

Question

mastermedia

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information