具有連續背景圖像但居中內容的佈局？

我試圖找出我將如何去創建一個網站，有3個獨立的「層」（頂部的導航，然後內容，然後頁腳）每一個不同的背景圖片，那磚100％的寬度......但我希望我的內容能夠居中（好像包含div的邊距：0自動應用）。具有連續背景圖像但居中內容的佈局？

到目前爲止，我一直在試圖只爲背景圖像創建的div，然後絕對定位我的內容div但允許它們自動中心。

但是科西嘉的，我取出文件存在的「流動」的元素，所以我的背景圖片的div結束堆放反目成仇。

這是真的很難，所以希望解釋這個例子可以幫助：

http://jsfiddle.net/RB46S/

正如你所看到的，我有我的藍格，在後臺一直延伸到100％，但我想我的導航和一個大型的圖像中心在這裏。

我有我的身體，這是綠色的，然後一個hp_content股利，這將是我所有的內容將坐，居中，這裏的問題是你不能申請一個保證金或填充值（我已經應用它們來顯示他們不工作），只有父母/瀏覽器頂部的位置，這使我的網站響應我相信時會導致問題。

然後我有我的紅色div，它與頂部導航（藍色）div相同，它有100％的邊框，但我希望頁腳的東西（twitter feed，最新的博客文章和聯繫方式）以居中這裏。

希望一些人懂什麼，我想實現，並且知道如何正確地設置這樣一個頁面，任何幫助深表感謝！

喬恩

來源

2012-10-17 Jon Kyte

你不想設置填充/邊距？但是你想讓所有的文字在頁面中水平居中？ – RMN

也許這個例子將闡明我試圖達到的目標。 - http://www.jessmarksphotography.com.au - 看看有三個「圖層」的紋理背景圖像，綠色 - 黑褐色 - 奶油。但是所有內容都集中在一起，我會怎麼做呢？在我嘗試的例子中，我的內容在我的第一個顏色帶（藍色div）下開始。對不起，這很難解釋，更清楚嗎？ - 謝謝 –

好的！嘗試構建您的HTML是這樣的：

<html> 
<head></head> 

<body class="index"> 

    <section class="top"> 
     <header class="content"> 
      <nav> 
       <ul id=""> 
        <li><a href="" id="">link 1</a></li> 
        <li><a href="" id="">link 2</a></li> 
       </ul> 
      </nav> 
     </header> 
    </section> 

    <section class="main"> 
     <div class="content"> 
      <h2>Whatever</h2> 
      <div class="something">This is something else</div> 
     </div>   
    </section> 

    <section class="footer"> 
     <footer class="content"> 
      Footer content 
     </footer> 
    </section> 

</body> 
</html>

然後一些CSS，如：

body, html{  
    width:100%; 
} 

body { 
    background: green; 
} 

body > section{ 
    width:100%; 
} 

/* this style will set all the section .content(s) to be 400px wide */ 
body > section > .content{ 
    display:block; 
    margin:0 auto; 
    width:400px;  
} 

section.top { 
    height: 510px; 
    background: blue; 
} 

/* if you want to individually change widths for each section, do something like this:*/ 

section.top .content{ 
    width:100%; 
}  

/* or not! */ 

section.main { 
    height:200px; 
} 

section.footer { 
    height: 400px; 
    background: red; 
}

玩弄：http://jsfiddle.net/FC2Ea/

因此，對於每個網站部分，你必須對所有的容器該部分的內容帶有一個易於記憶的類名稱，如「.content」。您可以將所有內容設置爲相同的寬度，也可以將每個部分的內容設置爲不同的寬度，具體取決於您要進行的操作。無論哪種方式，這些部分將佔據瀏覽器寬度的100％。祝你好運！ :)

來源

2012-10-17 16:29:07 chrisgonzalez

乾淨整潔！喜歡它。 –

這對我非常有幫助，謝謝你，標記爲正確的答案，因爲它完美地回答了問題。再次感謝！ - 僅僅指出

中缺少'='，如果你想編輯它，所以其他人不會對CSS爲什麼不能設計該元素感到困惑！ –

好眼睛 - 謝謝！ – chrisgonzalez

如果您在每個主要事業部和使用風格中添加其他事業部作爲

<div style="Width: 80%; float:right; margin-right: 150px;">

我想，這可能有助於在一定程度上？

<div class="top_shade"> 
    <div style="Width: 80%; float:right; margin-right: 150px;">  
    <header> 
       <nav> 
        <ul id=""> 
         <li><a href="" id=""></a></li> 
         <li><a href="" id=""></a></li> 
         <li><a href="" id=""></a></li> 
         <li><a href="" id=""></a></li> 
         <li><a href="" id=""></a></li>  
        </ul> 
       </nav> 
    </header> 
    </div> 
    </div>

來源

2012-10-17 12:13:11 RMN

這對身體部分（中間層）不起作用，因爲在該層上沒有包含div，只有身體。因此，它最終計算了對身體（瀏覽器窗口一側）的邊距，而不是將內容居中。感謝您的建議，但 –

具有連續背景圖像但居中內容的佈局？

回答

相關問題