Why doesnt this give me a border on each side of green?
I have this page which has this this CSS
body {
background-image: url("images/BACKGROUND5.jpg");
background-repeat: no-repeat;
}
and two divs
#borderleft {
background: none repeat-y scroll 0 0 #93A87D;
clear: left;
float: left;
margin-left: -10px;
margin-top: 610px;
visibility: visible;
width: 70px;
z-index: 2;
}
#borderright {
background: none r开发者_C百科epeat-y scroll 0 0 #93A87D;
clear: right;
float: right;
margin-left: -10px;
margin-top: 610px;
position: relative;
visibility: visible;
width: 70px;
z-index: 2;
}
here is the HTML
<body>
<div id="borderleft"></div>
<div id="borderright"></div>
any ideas on how to make image in the center and the green background: none repeat-y scroll 0 0 #93A87D; on the outsides
One good way to do this kind of layout, when the width of both border columns is fixed, is this.
The elements are:
- A container
<div>withposition: relative - The border
<div>s withposition: absolute, fixed widths, andleft: 0/right:0respectively - A "content"
<div>withmargin-leftandmargin-rightequal to the width of the border<div>s.
In the example I linked above there's no container div (the <body> element plays that role), but you will need one if you want to be able to move this arrangement around on the page as a whole.
Part of solution is to have your body style like this:
body {
background-image: url("images/BACKGROUND5.jpg");
background-repeat: no-repeat;
background-position: center;
}
And, instead of having
margin-top: 610px;
in left and right divs, try replace that with
height: 610px;
Using the image as you posted, I'd suggest something like this.
加载中,请稍侯......
精彩评论