0
标题描述了我的整个问题。我的页面上标题为:margin: 20px 0;
。这使得与内容的距离为20像素,并且与页面顶部的距离也是如此。唯一的问题是我的背景图像不能在20px以下开始。如果我将保证金更改为:margin: 0 0 20px 0
它解决了我最初的问题,但现在我的标题卡住了窗口顶部。任何帮助表示赞赏,我的代码如下。标题页边距切断我的背景图片
HTML
<body>
<div class="background">
<div class="inner">
<header id="header" role="banner">
<div class="headerbanner">
</div>
<div class="clear"></div>
</header>
</div>
<div class="content contentBackground">
<div class="contentForm">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="sidebar">
<div class="contentChat contentBlock">
</div>
<div class="contentOnline contentBlock">
</div>
<div class="contentTwitter contentBlock">
</div>
</div>
</div>
</body>
CSS
.clear{
clear: both;
}
.inner{
width:980px;
margin: 0 auto;
}
.background{
background-image:url('THE_IMAGE_URL');
background-color:grey;
background-attachment: scroll;
}
#header{
height:120px;
margin: 20px 0;
background-color:green;
color:white;
font-size:70px;
text-align:center;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
border-radius:10px;
border: solid 5px #000;
}
这样做只是现在的页面变得更小的方式解决保证金顶问题。我试着自己解决这个问题。 – 2013-04-11 14:11:51
你可以使用'width:100%'作为'.background'类来使它在整个宽度上出现 – Sachin 2013-04-11 14:14:41
谢谢你帮助它正常工作。我必须等待2分钟才能接受,但会接受此作为最终答案。 – 2013-04-11 14:16:16