如何創建具有多種顏色的居中標題？

的問題是，內容被在白色的部分爲中心。灰色是身體的背景，標題是屏幕的100％。

我現在擁有的是：

CSS

.top_left { 
    background:#3c4d74; 
} 

.top_right { 
    background:#2f3a5a; 
} 

.top_center { 
    background:#3c4d74 url(http://img85.imageshack.us/img85/2816/headerbgo.jpg) no-repeat right top; 
    height:140px; 
} 

#page, 
.top_center { 
    max-width:1000px; 
    margin:0 auto; 
} 

#page { 
    background:#FFF; 
} 

body { 
    background:#DEDEDE; 
}

HTML

<body> 
    <div id="top-header"> 
     <div class="top_left"></div> 
     <div class="top_center"> 
      <a href="#">LOGO</a>  
     </div> 
     <div class="top_right"></div> 
    </div> 
    <div id="page" class="hfeed"> 
     MY content bla bla bla 
    </div>  
</body>

，你可以看到http://jsfiddle.net/gTnxX/工作（我把最大寬度600像素，而不是1000像素，所以你可以看到它在小提琴上）。

如何在任何分辨率下使左側軟藍色和右側硬藍色？

來源

2012-06-16 chifliiiii

讓您的代碼在下次發佈前可讀。 – sg3s

要做到這一點，你需要非常瞭解定位的工作原理。

該#header-bg定位，以便它低於#wrapper。它是100％寬度，140像素高2個div，都佔據了該空間的50％，並且它們都獲得了左/右不同的顏色。

該#wrapper是相對定位，使z-index工作，把它放在#header-bg以上。寬度設置爲600px，並以margin: 0 auto;爲中心。

#header是一個簡單的div，其高度設置爲它以及它所需的背景。

內容跟在正常流程中的#header。

這是一個jsfiddle與請求的行爲。

http://jsfiddle.net/sg3s/cRZxN/

這甚至降低精美，讓內容是否大於屏幕可以橫向滾動（這是我從原來的jsfiddle注意到）。

編輯：

爲了讓IE7兼容我做了一些修改，以解決2個錯誤。我必須明確地將left: 0;和top: 0;添加到#header-bg以修復定位錯誤。在#header-bg之內使div值爲49％而不是50％，否則IE7將無法正確調整它們的大小，並使正確的div值下降。爲了彌補我創造出的小差距float: right;。

來源

2012-06-16 18:37:11 sg3s

你是冠軍！我希望可以給1分以上。我很高興我問，我永遠不會自己弄清楚這一點。非常感謝！ – chifliiiii

如何創建具有多種顏色的居中標題？

回答

相關問題