固定定位不改變站點寬度

我的站點雙方存在問題，這是鏈接http://www.pagodamc.org 當以比例正確的分辨率1024 * 768查看時，「贊助商」沒有任何重疊，或頁面的「公告」部分（如果您調整瀏覽器的大小，您會看到我指的是什麼）。但是，如果重新調整窗口的大小，則會有嚴重的重疊。我搜查了一下，找不到我想要的東西。我希望頁面始終爲固定寬度，或者至少使「贊助商」和「公告」部分不會與主頁面重疊。我如何結合這些元素的定位？提前致謝！固定定位不改變站點寬度

這些都是我的元素

#sponsors{ 
z-index:300; 
position:absolute; 
left:0px; 
top:140px; 
} 
#alerts{ 
position:fixed; 
right:0px; 
top:80px; 
width:180px; 
}

來源

2011-05-31 Ryan

我通常會找到一個儘可能小的尺寸，以便我可以讓網站成爲可能，然後在我的主要內容周圍放置一個包裝div，使用min-width: 60em;這樣，網站永遠不會壓縮到低於該尺寸的尺寸，和它是可縮放的（與em）。

來源

2011-05-31 15:50:10 rockerest

你可以這樣做：

html, body { 
    width:1280px; 
}

但是，該網站將是非常廣泛的..

你也讓側邊欄很薄，使用邊距和寬度添加div到他們.. 但是，然後他們不會總是可見..

來源

2011-05-31 15:46:45

這不利於右側立柱。我認爲他*希望該網站「非常廣泛」。 – 2011-05-31 15:47:50

你是對的，沒有看到它是固定的，所以@Ryan，當使用該解決方案時，你應該將正確的列添加到包裝.. – 2011-05-31 15:49:45

你的情況，研究問題的逆也是如此：當屏幕過大，也看起來非常糟糕：

Cycle Website

看來你真正想要的是4-列布局：

   header 
------------------------------- 
Sponsors | Body | Nav | 2nd Nav`

看看這個CSS layout generator

這樣做會爲您節省大量頭痛，而且是真正實現這一目標的行業標準方法。

對於這樣的佈局，該生成器工具創建此代碼：也許您可以從中學習，並將其合併到您自己的設計中！

.header{ 
    position: relative; 
    float: left; 
    left: 448px; 
    width: 1024px; 
    background-color: #f4f4f4 
} 
.wrapper{ 
    position: relative; 
    float: left; 
    left: 448px; 
    width: 1024px; 
    background-color: #cccccc 
} 
.left1{ 
    position: relative; 
    float: left; 
    left: 4px; 
    width: 115px; 
    background-color: #ccccff 
} 
.left2{ 
    position: relative; 
    float: left; 
    left: 12px; 
    width: 601px; 
    background-color: #ccccff 
} 
.left3{ 
    position: relative; 
    float: left; 
    left: 20px; 
    width: 115px; 
    background-color: #ccccff 
} 
.right{ 
    position: relative; 
    float: right; 
    right: 4px; 
    width: 161px; 
    background-color: #ccccff 
} 
.footer{ 
    position: relative; 
    float: left; 
    left: 448px; 
    width: 1024px; 
    background-color: #cfcfcf 
} 
body { 
    border-width: 0px; 
    padding: 0px; 
    margin: 0px; 
    font-size: 90%; 
    background-color: #e7e7de 
}

來源

2011-05-31 15:53:02

非常不整潔的CSS ...顏色重新定義和類，其中id更合適。最好不要使用該生成器。 – Midas 2011-05-31 16:38:15

你也可以讓網站爲中心的DIV中的較小的內部分的寬度，然後用負值定位左，右面板

#sponsors{ 
    z-index:300; 
    position:absolute; 
    left:-180px; 
    top:140px; 
} 
#alerts{ 
    position:fixed; 
    right:-180px; 
    top:80px; 
    width:180px; 
}

當然，你失去的位置這種方式的瀏覽器的右側，所以你的菜單將浮動。

來源

2011-05-31 15:55:03 BenWells

您可以在您的身上使用min-width，這樣即使瀏覽器窗口很小，用戶也能看到側邊欄。這應該是你的內容和你的側邊欄的寬度。作爲替代，您可以在不支持min-width（IE6）的瀏覽器的側邊欄上設置z-index。身體有position:relative，因此側邊欄區域的位置是身體的大小（即使有水平滾動條）。他們與position:absolute定位。

CSS：

* { margin:0; padding:0 } 
body { text-align:center; min-width:800px; position:relative } 
#content { width:600px; background:black; margin:0 auto; text-align:left } 
#sponsors, #announcements { position:absolute; width:100px; background:gray; top:0; z-index:-1 } 
#sponsors { left:0 } 
#announcements { right:0 }

HTML：

<body> 
    <div id="sponsors"></div> 
    <div id="content"></div> 
    <div id="announcements"></div> 
</body>

來源

2011-05-31 16:29:24 Midas

固定定位不改變站點寬度

回答

相關問題