2009-11-21 136 views
1

我正在製作一個適合整個屏幕而不管屏幕大小的網站。我現在使用一張桌子來使用它,但是我遇到了一個問題。動態表格大小html

該網頁分爲3列: 左列留在屏幕的左側,並具有固定的大小和背景。 右列留在屏幕的右側,並具有固定大小和背景。 中間的列應該伸展在他的相鄰單元格之間,並且應該具有與之一起伸展的背景(僅水平)

這樣,網頁應該始終看起來像它用於查看現場。

但是我的問題是中間的單元格,圖像不重複,不知何故css代碼:background-repeat:x-repeat;不會使圖像伸展,當我把單元格寬度設置爲100%時,它會干擾他的鄰居單元格它看起來像一團糟。

我該如何做到這一點?

編輯

這裏是我使用的標記:

CSS:

#topleftcell 
{ 
    background-image:url(../images/Logo.png); 
    background-repeat:no-repeat; 
    width:300px; 
} 
#topmiddlecell 
{ 
    background-image:url(../images/header_fill.png); 
    background-repeat:repeat-x; 
    width:auto; 
} 
#toprightcell 
{ 
    background-image:url(../images/header_right.gif); 
    background-repeat:no-repeat; 
    width:16px; 
} 

HTML:

<body> 
    <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
<tr style=" width:100%;"> 
    <td id="topleftcell"></td> 
    <td id="topmiddlecell"></td> 
    <td id="toprightcell"></td> 
</tr> 
    </table> 
</body> 
+3

你應該使用CSS,而不是一個表來做到這一點。 – 2009-11-21 15:07:18

+0

CSS和表格之間有很大的區別。 我不明白你的意思。 – Pieter888 2009-11-21 15:08:31

+0

您應該使用描述您的內容的標記(表格不包含這些標記)並將其設置爲您想要的樣式。 http://www.hotdesign.com/seybold/ – Quentin 2009-11-21 15:11:32

回答

2

左,右單元固定的寬度。 中央單元格中的自動寬度。你可能需要在中心單元格中填充圖像。

+0

我有填充圖片,但是如何填充它?它不會拉伸(或重複)以填充整個單元格。 我有所有的細胞,我希望他們成爲,但我需要現在填寫圖像。 – Pieter888 2009-11-21 15:21:52

+0

放在你的中心單元內。也設置fill.jpg的背景repeat-x – 2009-11-21 15:34:19

+0

這很好,謝謝。儘管我打算使用div元素來製作網站佈局,但我發現該表對我的設計工作有很多限制。 – Pieter888 2009-11-22 21:06:39