Блочная верстка - HTML и CSS

mistfist · 23.01.2012, 23:28

Подскажите как лучше размешать блоки(div) c помощью margin или другим способом?недавно узнал о position:absolute;, но при сворачивания все здвигается((подскажите как устранить данную проблему?

Lesha · 24.01.2012, 02:16

float:right

mistfist · 24.01.2012, 23:05

Цитата:

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

float:right

не получится(

mistfist · 24.01.2012, 23:06

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NEWSPRESS</title>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="maket">
<div id="righthead">
<div id="Rss"> </div>
<div id="feed">
<h3><a href="#" title="Subscribe to our feed">Subscribe to our feed</a></h3>
</div>
<div id="mail">
<h4><a href="#" title="Subscribe via e-mail">Subscribe via e-mail</a></h4>
</div>
</div>
<div id="NEWS"><h1>NEWS</h1></div>
<div id="PRESS"><h2>PRESS</h2></div>
<div id="LOGO"></div>
</div>
</body>
</html>

СSS

@import url('reset.css');
@import url('typography.css');
body {
background-color:#e2e1dd;
width:1122px;
margin:auto;
}
#maket {

width:997px;
height:1200px;
background-color:#FFF;
margin:auto;
}
#Rss {
background:url(../image/rss.png) no-repeat;
height:65px;
}
#feed{
position:absolute;
left:930px;
top:40px}
#mail{
position:absolute;
left:930px;
top:65px;
}
#NEWS{
position:absolute;
top:24px;
left:320px;
}
#PRESS{position:absolute;
top:24px;
left:495px;
}
#LOGO{
background-image:url(../image/LOGO.png);
position:absolute;
top:24px;
left:200px;
width:107px;
height:80px;
}

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Резиновая блочная верстка	Viconte	HTML и CSS	2	18.03.2011 13:45
резиновая блочная верстка	cyclobe	HTML и CSS	8	01.02.2011 12:01
Блочная верстка	varvara16	HTML и CSS	0	18.09.2010 12:52
Блочная верстка	Demonichka	HTML и CSS	2	12.07.2008 01:31

24.01.2012, 02:16	#2
Lesha Форумчанин Регистрация: 30.01.2009 Сообщений: 418	float:right

24.01.2012, 23:06	#4
mistfist Регистрация: 23.01.2012 Сообщений: 3	<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>NEWSPRESS</title> <link href="CSS/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="maket"> <div id="righthead"> <div id="Rss"> </div> <div id="feed"> <h3><a href="#" title="Subscribe to our feed">Subscribe to our feed</a></h3> </div> <div id="mail"> <h4><a href="#" title="Subscribe via e-mail">Subscribe via e-mail</a></h4> </div> </div> <div id="NEWS"><h1>NEWS</h1></div> <div id="PRESS"><h2>PRESS</h2></div> <div id="LOGO"></div> </div> </body> </html> СSS @import url('reset.css'); @import url('typography.css'); body { background-color:#e2e1dd; width:1122px; margin:auto; } #maket { width:997px; height:1200px; background-color:#FFF; margin:auto; } #Rss { background:url(../image/rss.png) no-repeat; height:65px; } #feed{ position:absolute; left:930px; top:40px} #mail{ position:absolute; left:930px; top:65px; } #NEWS{ position:absolute; top:24px; left:320px; } #PRESS{position:absolute; top:24px; left:495px; } #LOGO{ background-image:url(../image/LOGO.png); position:absolute; top:24px; left:200px; width:107px; height:80px; }