Фиксирование слоев - HTML и CSS

garmoni · 19.03.2012, 22:41

Добрый день. У меня есть шаблон сайта состоящий из 4 основных блоков. Когда я задала позиционирование body {margin-top: 20px; margin-left: 5%; } блок контента сдвинулся немного влево. Помогите пожалуйста исправить.
Код index.html

Цитата:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>internet-shop</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>
<div id="header">шапка сайта</div>
<div id="menu">меню</div>
<div id="content">контент</div>
<div id="footer">низ сайта</div>
</body>
</html>

Код style.css

Цитата:

body {
background-color: #ffffff;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
margin-top: 20px;
margin-left: 5%;

}

#header{
background: darkred;
width:715px;
height:100px;
}
#menu {
background: oldlace;
width:190px;
height:300px;
}
#content {
background:#cccccc;
width:525px;
height:300px;
position:absolute;
left:190px;
top:100px;
}
#footer {
background: darkred;
width:715px;
height:30px;
}

Пример страницы во вложении.

ZvEr_HaCkEr · 20.03.2012, 07:02

Если смотреть на Ваш код, то

Код:

#content { 
..............
left:170px; 
top:120px; 
}

Но лучше будет так

garmoni · 20.03.2012, 09:20

Цитата:

Сообщение от ZvEr_HaCkEr

Если смотреть на Ваш код, то

Код:

#content { 
..............
left:170px; 
top:120px; 
}

Но лучше будет так

Вы меня еще больше запутали своим кодом. Что делает тег article, aside, section и чем они друг от друга отличаются? И где в стилях вы сделали то самое закрепление слоев друг за другом?

ZvEr_HaCkEr · 20.03.2012, 12:55

Цитата:

Сообщение от garmoni

Вы меня еще больше запутали своим кодом. Что делает тег article, aside, section и чем они друг от друга отличаются?

http://htmlbook.ru/html5

Цитата:

Сообщение от garmoni

И где в стилях вы сделали то самое закрепление слоев друг за другом?

Так Вы выражайтесь яснее что именно нужно..

garmoni · 20.03.2012, 13:34

Цитата:

Сообщение от ZvEr_HaCkEr

Так Вы выражайтесь яснее что именно нужно..

Я же не говорила, что вы неправильно сделали, просто хотела понять каким образом это прописывается в стилях и где. Мне нужно чтобы не зависимо от тоге где будет страница на экране, будь то слева, по центру или любым другим способом сдвинута, слои все время двигались вместе и дизайн не портился. В моем примере, при позиционировании по умолчанию по левому краю на вид все нормально, но как только двигаю вправо или вниз слои разбегаются. Не знаю понятно я объяснила или нет

ZvEr_HaCkEr · 20.03.2012, 19:21

Цитата:

Сообщение от garmoni

Мне нужно чтобы не зависимо от тоге где будет страница на экране, будь то слева, по центру или любым другим способом сдвинута, слои все время двигались вместе и дизайн не портился. В моем примере, при позиционировании по умолчанию по левому краю на вид все нормально, но как только двигаю вправо или вниз слои разбегаются. Не знаю понятно я объяснила или нет

Ну так а чем мой вариант не устраивает? Вроде бы он соответствует всем вашим критериям

Ну а если вы не знаете html5, то замените article,section,header,footer,aside соответствующими классами(<div class="header">...</div>). Думаю идея понятна...

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
статья - Layered в windows. Использование слоев	Pblog	Обсуждение статей	0	27.02.2011 23:10
Уничтожение слоев в cs4 cs5	Каналяж	Фриланс	4	13.08.2010 18:04
Наложение слоев и картинок	Manonia	HTML и CSS	4	14.01.2010 07:05
Несколько слоев текстур	ActioNs	Gamedev - cоздание игр: Unity, OpenGL, DirectX	8	29.08.2009 10:59