为什么这不给我一个绿色的每一边的边界？

我有这个page它有这个这个CSS为什么这不给我一个绿色的每一边的边界？

body { 
    background-image: url("images/BACKGROUND5.jpg"); 
    background-repeat: no-repeat; 
}

和两个div

#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 repeat-y scroll 0 0 #93A87D; 
    clear: right; 
    float: right; 
    margin-left: -10px; 
    margin-top: 610px; 
    position: relative; 
    visibility: visible; 
    width: 70px; 
    z-index: 2; 
}

这里是HTML

<body> 
<div id="borderleft"></div> 
<div id="borderright"></div>

如何使图像中的中心的任何想法和绿色背景：无重复-y滚动0 0＃93A87D;在外侧

来源

2011-09-24 Trace

元素的背景不会延伸到其边缘。你的“边界”divs宽度为70px，但没有高度，只有大的顶部边距。 –

当两个边框列的宽度固定时，做这种布局的一种好方法是this。

的要素是：

的容器<div>与position: relative
边界<div> s的position: absolute，固定宽度，以及分别
left: 0/right:0 A “内容” <div>与margin-left和margin-right等于到边界的宽度<div> s。

在我联系上面的例子中有没有div容器（该<body>元素扮演这个角色），但您将需要一个，如果你希望能够在页面上移动这种安排为一个整体。溶液

来源

2011-09-24 23:35:07 Jon

不幸的是，这不会解决他的问题... –

@PauloSantos：为什么不呢？ – Jon

我想象O.P.希望图像集中在窗口中。从他正在使用的图像来判断。 –

部分是让你的身体的风格是这样的：

body { 
    background-image: url("images/BACKGROUND5.jpg"); 
    background-repeat: no-repeat; 
    background-position: center; 
}

而且，而不必

margin-top: 610px;

在左边和右边的div

，尝试更换与

height: 610px;

来源

2011-09-24 23:37:20

使用你张贴的图片，我会建议like this。

来源

2011-09-24 23:40:56

为什么这不给我一个绿色的每一边的边界？

回答

相关问题