Margin проблем

  • Автор Автор LiRiX
  • Начална дата Начална дата

LiRiX

Registered
CSS
Код:
body {height: 100%; background: #fff; color: #CCC; font: 15px Arial; margin: 0 auto; padding: 0;}

#bg {background: url("back.gif") repeat-y; width: 551px; margin: 0 auto;}

#bgtmarg {margin: 0 0 0 13px;}

#head {background: url("head.gif") no-repeat; width: 517px; height: 86px; margin-top: 10px; }
HTML
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="s.css" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>CSS testove</title>
</head>
<body>
<div id="bg">
	<div id="bgtmarg">
	<div id="head" style="border: solid 1px red;"></div>
	<div id="cont">
	<div id="konttop"></div>
		<div id="kont">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
---  </div>
	<div id="konbott"> </div>
    </div>
</div></div>
</body>
</html>
Искам да отдръпна дива head от горе леко. Тоест самия див да дойде малко долу. Обаче като му задам маргин той се дърпа с bg дива. А аз искам само head да се дърпа без bg. Къде греша?
 
Код:
 body {height: 100%; background: #fff; color: #CCC; font: 15px Arial; margin: 0 auto; padding: 0;} 

#bg {background: url("back.gif") repeat-y; width: 551px; margin: 0 auto;}

#bgtmarg {margin: 0 0 0 13px; padding-top: 10px;} 

#head {background: url("head.gif") no-repeat; width: 517px; height: 86px;  }
с такъв CSS ще се получи. :)
 
Doris каза:
Код:
 body {height: 100%; background: #fff; color: #CCC; font: 15px Arial; margin: 0 auto; padding: 0;} 

#bg {background: url("back.gif") repeat-y; width: 551px; margin: 0 auto;}

#bgtmarg {margin: 0 0 0 13px; padding-top: 10px;} 

#head {background: url("head.gif") no-repeat; width: 517px; height: 86px;  }
с такъв CSS ще се получи. :)
Благодаря :) +1

Абе то лесно, ама кой да мисли. :?:

Ето един друг начин който ми преложиха, но още не съм го прегледал http://www.videotutorials-bg.com/forum/viewtopic.php?t=505
 
Да, излиза, че рамката /бордер/ служи не само за украса, а и за опорна точка при отместването на див. :wink:
 

Back
Горе