advanced css: top and bottom with flexible centre
is it possible with just css2 to have the following:
- all the content to be in the fl开发者_Go百科exible div.mid section
- overlap the top and bottom parts
- not fussed about ie6
here's the photoshop with centre slice:
as you can see the top and bottom parts are quite large and i need to overlap them from the middle slice...
Please dont misunderstand here, i understand how to make a flexible central div, the complexity is in the overlapping of the top and bottom while the mid div remains flexible.
I imagine it requires either negative margins or absolutely position top and bottoms elements with z-index..
Here's a kickoff example, you can copy'n'paste'n'run it.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2781669</title>
<style>
#wrap_centre {
width: 1000px;
margin: 0 auto;
}
.top {
padding: 0 100px;
height: 200px;
background: url('http://i39.tinypic.com/11qnzbt.jpg') no-repeat center top;
}
.mid {
padding: 0 100px;
background: url('http://url.to.1px.height.slice.jpg') repeat-y center center;
}
.content {
position: relative;
min-height: 200px;
top: -100px;
margin-bottom: -200px;
}
.bot {
padding: 0 100px;
height: 250px;
background: url('http://i39.tinypic.com/11qnzbt.jpg') no-repeat center bottom;
}
</style>
</head>
<body>
<div id="wrap_centre">
<div class="top"></div>
<div class="mid">
<div class="content">mid<p>mid<p>mid<p>mid<p>mid<p>mid<p>mid</div>
</div>
<div class="bot"></div>
</div>
</body>
</html>
You'll only have to create a new slice for the .mid.
Update: as per the comments, above is updated.
加载中,请稍侯......
精彩评论