我需要设计一个页面,每边都有边框图像。我需要该页面适合1280x1024和1024x768分辨率。是否有可能有一个固定的大小中心股利和裁剪边缘图像在较低的分辨率?CSS技巧设计一个页面
- 1280×1024:边框为200px中心840px边界200像素
- 1024×768:边界72px中心840px边界72px
我已经和200像素X 5px的两个图像。我试图使用浮动属性没有成功。 所以我这样做到目前为止,它工作在1280x1024但不是在1024x768(它太宽)。
HTML:
<body>
<div id="right"></div>
<div id="left"></div>
<div id="center">
<h1>Title</h1>
<p>Content here</p>
</div>
</body>
CSS:
html {
margin: 0px;
padding: 0;
}
body {
margin: 0px;
padding: 0;
width: 100%;
background-color: white;
overflow: auto; /*to clear the floats*/
}
#right {
clear: both;
position: absolute;
right: 0;
background-image: url('/site_media/images/border-right.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#left {
clear: both;
position: absolute;
left: 0;
background-image: url('/site_media/images/border-left.jpg');
background-repeat: repeat-y;
width: 200px;
height: 100%;
}
#center {
width: 840px;
margin: 0px auto;
padding-left:10px;
padding-right:10px;
}
谢谢!
你完全理解我的问题。这是一个很好的解决方案!我会试一试。谢谢! – codea 2010-08-19 14:53:14
我试过了,它工作。非常感谢faizalheesyam! – codea 2010-08-19 17:26:26
很高兴听到.. :) – 2010-08-24 12:50:58