Three background images
how would I go about setting up a page using divs and css that has a background image on each side and the page content in the middle. Both the left and right side display images and shrink/grow according to the window size while the content pane always remains the same size.
Easy to do with tables but I just can't seem to think of how it works with div 开发者_如何学Gotags.
I think you'll find a good example here: http://matthewjamestaylor.com/blog/perfect-3-column.htm (it sounds like you may not have much content in your 3 column layout, but it is basically a '3 column layout') The examples should be able to be modified to have the center panel have a fixed width while the others adjust.
Edit: This one in particular seems to be what you're looking for: http://matthewjamestaylor.com/blog/split-page-3-column-liquid-layout.htm
Well, that was interesting. I think this does what you're looking for:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Marc Thibault marc@smpro.ca -->
<title>Three accordion columns</title>
<style>
* {
margin: 0; padding: 0;
}
#wrapper {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
}
#left {
position: absolute; left: 0; top: 0;
height: 100%;
width: 50%;
background-image: url(http://cnews.canoe.ca/CNEWS/Large_Format_Pix/POD/2010/10/12/750_police_women.jpg);
background-color: yellow;
background-repeat: repeat-y;
z-index: 5;
}
#center {
position: absolute; right: 0; left: 0; top: 0;
margin: 0 auto;
width: 600px;
height: 100%;
color: white;
background-image: url(http://cnews.canoe.ca/CNEWS/Large_Format_Pix/POD/2010/10/11/cnews11thisone.jpg);
background-color: blue;
background-repeat: repeat-y;
z-index: 10;
}
#right {
position: absolute; top: 0; right: 0;
width: 50%;
height: 100%;
color: white;
text-align: right;
background-image: url(http://cnews.canoe.ca/CNEWS/Large_Format_Pix/POD/2010/10/10/750_jerk_gets_bit.jpg);
background-color: green;
background-repeat: repeat-y;
background-position: right top;
z-index: 5;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<p>This is Left</p>
</div>
<div id="right">
<p>This is Right</p>
</div>
<div id="center">
<p>This is Center</p>
</div>
</div>
</body>
</html>
There are a couple ways to do this:
- Have 3 divs: left, center, and middle, each with their own background color/image.
- Set a single background image on an element behind all 3 divs. This image could repeat vertically. In your case, I'd also set the background color to black, so that the left and right column expand. (More on Faux columns: http://www.alistapart.com/articles/fauxcolumns/)
- Also check out Sliding Doors (http://www.alistapart.com/articles/slidingdoors/) for a more flexible middle column.
加载中,请稍侯......
精彩评论