容器外部的色帶定位

我正在試圖放置與我的內容一樣寬的色帶，但是會將兩側濺到身體上。示例here。這是迄今爲止我所使用的HTML。有三個圖像：色帶的中間部分，然後是兩側。我把中間部分放在h1中，現在我正在嘗試排隊。容器外部的色帶定位

<body> 

    <div id="container"> 

    <div id="leftside"> 
    </div> 

    <div id="rightside"> 
    </div> 


    <div id="content"> 

     <header> 
      <h1>This is the body of the ribbon</h1> 
     </header> 
    </div> 
</div> 

</body>

我在CSS上拍攝的照片。我一直在做實驗，這就是我所需要的，但我確信有一百萬更好的解決方案。我想知道最佳做法是什麼，因爲我確信我在這裏打破了很多規則。

#container { 
    width: 825px; 
    min-height: 960px; 
    margin: 0 auto; 
} 

#left { 
    background-image: url(side.jpg); 
    background-repeat: no-repeat; 
    width: 59px; 
    height: 48px; 
    position: absolute; 
    margin-top: 20px; 
    margin-left: -58px; 

} 

#right { 
    background-image: url(side.jpg); 
    background-repeat: no-repeat; 
    width: 59px; 
    height: 48px; 
    position: absolute; 
    margin-top: 20px; 
    margin-left: 825px; 
} 

#content { 
    width: 825px; 
    min-height: 700px; 
    margin: 0 auto; 
    background: url(other.jpg) repeat; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    top:0; 
    overflow: auto; 
} 

h1 { 
    text-indent: -9999px; 
    background-image: url(banner.jpg); 
    background-repeat: repeat-x; 
    margin-top: 0; 
    height: 48px; 
}

來源

2013-10-23 Benoit Schrijnemakers

肯定有一百萬種方法來實現這一點。最好的方法將取決於您的網站進展情況。

它歸結爲相對和絕對定位。做到這一點

一種方法是組織你的網站像這樣：

<body> 
    <div id="header"> 
     <div id="ribboncenter"></div> 
     <div id="ribbon1"></div> 
     <div id="ribbon2"></div> 
    </div> 

    <div id="content"> 
     Your content 
    </div> 

    <div id="footer"> 
     Your footer 
    </div> 
</body>

這是一個典型的網站非常寬鬆frameworking。該CSS會像這樣：

#header{ 
    width:800px; //Subjective to however big you want your site 
    margin:0 auto; //Positions the header in the center 
    position:relative; //Tells nested absolute elements to base their positions on this 
} 
#ribbon1, #ribbon2{ 
    position:absolute; //Position is now based on #header and is pulled from the regular DOM flow 
    width:50px; //Subjective to whatever the width of your "ribbon" is 
    top:10px; //Subjective to how far down from the top of #header you want it 
} 
#ribboncenter{ 
    width:100%; //Sets width to the width of #header 
    background:url(ribboncenter.png); //Subjective to image 
#ribbon1{ 
    left:-50px; //Subjective to the width of the image, moves it 50px left of #header 
    background:url(my-ribbon1.png); //Subjective to whatever your image is 
} 
#ribbon2{ 
    right:-50px; //Subjective to the width of the image, movesit 50px right of #header 
    background:url(my-ribbon2.png); //Subjective to whatever your image is 
}

這裏的例子http://jsfiddle.net/NZ8EN/

這是非常寬鬆的，但希望給你取的方向的想法。

還有其他方法可以解決這個問題。

來源

2013-10-23 18:03:19

謝謝你的所有詳細解釋。它真的幫助我更好地理解！祝你今天愉快！ ++ –

嘗試把#right和#leftdivs的#content div內，給#content的relative一個position（使之成爲爲孩子#left和#right父參考）和位置絕對#left和#right：

HTML：

<body> 
    <div id="container"> 
     <div id="content"> 
      <div id="leftside"></div> 
      <div id="rightside"></div> 
      <header> 
       <h1>This is the body of the ribbon</h1> 
      </header> 
     </div> 
    </div> 
</body>

CSS：

#left { 
    position: absolute; 
    top: 0; 
    left: -59px; 
} 
#right { 
    position: absolute; 
    top: 0; 
    right: 59px; 
}

來源

2013-10-23 18:05:18

除非你支持IE7，我可能會像這樣的東西去：

http://jsfiddle.net/G5jkt/

這是你需要添加CSS：

h1 { 
    position: relative; 
} 

h1:before { 
    content: ''; 
    height: 100%; 
    left: -59px; 
    top: 0; 
    position: absolute; 
    background-image: url(side.jpg); 
    background-repeat: no-repeat; 
    width: 59px; 
} 

h1:after { 
    content: ''; 
    width: 59px; 
    height: 100%; 
    background-image: url(side.jpg); 
    background-repeat: no-repeat; 
    right: -59px; 
    top: 0; 
    position: absolute; 
}

而且你必須像這樣改變你的HTML：

<div id="container"> 
    <div id="content"> 
    <header> 
     <h1>Hello Here</h1> 
    </header> 
    <div> 
</div>

使用：之前和：之後他lps從文檔中移除設計特定的HTML並完成工作。

關鍵是使用絕對定位。在你的例子中，你的功能區結束於頁面的頂部 - 它們與你試圖建立他們的位置的H1沒有任何關係。

要做到這一點，最簡單的方法就是放棄負責此功能區的HTML在H1中結束。但是，這在語義上並不是最好的。你可以在功能區末端和H1上添加一個包裝，但這是額外的標記。

通過使用：after和：before，您將H1用作父親，因爲它具有相對位置，並且絕對定位僞元素：before和：after元素相對於H1。這是理想的，因爲僞元素現在可以繼承像高度，背景顏色等東西。

來源

2013-10-23 18:31:35 aephilea

我明白你在說什麼。感謝你們全力以赴的努力。有一件事情沒有按照他們的方式工作，我希望它是當我們縮小框架時，h1：before仍然是部分可見的。我可能可以找出那一個。謝謝。 –

您可以輕鬆地通過給予身體最小寬度來對抗。 – aephilea

容器外部的色帶定位

回答

相關問題