CSS技巧設計一個頁面

我需要設計一個頁面，每邊都有邊框圖像。我需要該頁面適合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; 
}

謝謝！

來源

2010-08-19 codea

因爲如果固定寬度的，這應該是很容易的中心元件。側邊應該作爲背景放置在身體中，而不是有自己的div。

糾正我，如果即時通訊錯誤，基於我在這裏理解的，你想要邊界剪切/裁剪1024分辨率而不是縮小。如何製作寬度爲1280的單張圖像，將相應的左右邊框圖像放置在左側和右側，將中間區域留空。將其保存爲單個圖像（如果您想要透明背景，則保存至此），然後執行以下操作。

<style type="text/css"> 
body { /* can also use your own div */ 
    background:url(path_to_the_single_image) repeat-y top center; 
} 

#center { 
    width:840px; 
    margin:0 auto; /* centered the div */ 
    background:green; 
} 
</style> 

<body> 
    <div id="center">center content</div> 
</body>

多數民衆贊成它！現在你應該在中間有固定寬度的元素，而在背景中應該有你的邊框。如果你在1280年加載它，你應該看到完整的邊框，而如果你調整到1024，你的居中元素應該保持在那裏，你的邊框剛纔應該被瀏覽器剪掉。

讓我知道如果這是你所尋找的.. :)

來源

2010-08-19 13:29:12

你完全理解我的問題。這是一個很好的解決方案！我會試一試。謝謝！ – codea 2010-08-19 14:53:14

我試過了，它工作。非常感謝faizalheesyam！ – codea 2010-08-19 17:26:26

很高興聽到.. :) – 2010-08-24 12:50:58

如果我理解正確 - 你要找的東西有點難以實現沒有JavaScript。您可以考慮一些不同的方法：側邊欄（圖形邊框）可以在中心內容下滑動嗎？

例如：

<style type="text/css"> 
#wrapper { position: relative; } 
#right, #left { width: 200px; position: absolute; background: gray; } 
#right { right: 0; } 
#left { left: 0; } 
#center { width: 840px; margin: 0 auto; background: green; position: relative; } 
</style> 
<body> 
    <div id="wrapper"> 
     <div id="left">left</div> 
     <div id="right">right</div> 
     <div id="center">center</div> 
    </div> 
</body>

來源

2010-08-19 08:55:44 tborychowski

你的解決方案給我幾乎與我的結果相同。我需要側邊欄100％的高度，因爲它們在我的代碼中。問題是，當我以1024x768的分辨率顯示網站時（我想要剪切側邊欄，而不是縮小）。謝謝。 – codea 2010-08-19 12:32:33

CSS技巧設計一個頁面

回答

相關問題