How to create the block with round corners, which consists of three parts: top, content, bottom?
all! I'm the begginer at html and css and I try to create the block, which consists of three parts: top, content, bottom. Top and bottom are some pictures with round corners. And the third part-"content" has colour background, there will be some information. I tried to do this with tags div 开发者_运维技巧and css styles in several ways.
<style type="text/css">
#top{margin-top: 50px;background:url(background/bg_content_top.gif) no-repeat;width: 851px;text-indent: -900%;}
#middle{background:#FFF; border-left: solid 2px #000; border-right: solid 2px #000;width: 851px;}
#bottom{background:url(background/bg_content_bottom.gif) no-repeat; text-indent: -900%; width: 851px;}
</style>
<body>
<div id="top">top div</div>
<div id="middle">text will be here</div>
<div id="bottom"> bottom div</div>
</body>
the problem is: if I use
<p>text will be here</p>
there are will be odd strings between divs. Another try:
#top{position: absolute; margin-top: 50px; background:url(background/bg_content_top.gif)no-repeat; width: 851px;}
#middle{position: relative; margin-top: 16px; background:#FFF; border-left: solid 2px #000; border-right: solid 2px #000;}
#bottom{background:url(background/bg_content_bottom.gif) no-repeat bottom;text-indent: -900%;}
<body>
<div id="top">
<div id="middle">
<p>text will be here</p>
<div id="bottom">lower div</div>
</div></div>
</body>
Another problem, background middle div paints over the transparent corners of bottom picture. Help plz, how can I do this in the right way?
The problem with the three-divs-in-a-row is margin collapsing. If the last element in a block has bottom-margin, this margin can move out of its parent element(s) and potentially combine with the top-margin of the next statically-positioned element, or just end up in between.
The simple way to avoid it is just to avoid using vertical margins at all. If you can use padding instead, that doesn't collapse, which makes layout much easier. Alternatively, you can make a solid barrier that margins won't collapse through by putting padding or a border on that edge of the parent. Even padding: 1px 0 is enough to stop any collapsing.
Nesting backgrounds can also work, nesting all divs together:
<div class="box0"><div class="box1"><div class="box2">
content here
</div></div></div>
however then you will need to offest the background areas to stop one background overwriting another. eg with a top and bottom image 50px high:
.box0 { background: url(box/top.gif) top center repeat-x; padding-top: 50px; }
.box1 { background: url(box/bottom.gif) bottom center repeat-x; padding-bottom: 50px; }
.box2 { background: url(box/middle.gif) center center; }
加载中,请稍侯......
精彩评论