浮動和擴展問題

我不是一個有經驗的HTML編碼器，所有這些都沒有任何專業的幫助，所以結果看起來古怪。網站：www.cakery.co.il/beta 我浮動並擴展問題（如Dreamweaver所述） - 當我進入我的網站並嘗試調整窗口大小時，頂部（藍色）功能區和底部功能區切斷，看起來很奇怪。浮動和擴展問題

我該如何解決這個問題？

例如，這是在CSS頂部功能區碼：

#blue_decoration { 
    height: 85px; 
    background-image: url(_images/top_stripe.png); 
}

我會很感激你的幫助。

謝謝

來源

2012-11-02 Guy M

我沒有看到發生什麼錯誤。你使用的是什麼瀏覽器？ –

這種行爲是正常的。 –

如果你'恢復'窗口並垂直滾動，你會看到切斷的色帶。我使用IE9。使用iPhone查看此頁面，您會更清楚地看到它。 –

很難確切地看到的問題是什麼，沒有看到發生了什麼事情的其餘部分，但我仍然可以給一些指點。

我會PM的鏈接，如果你喜歡，但你可以一樣容易複製粘貼下面來看一看吧：

<!DOCTYPE html> 
<head> 
<meta charset="utf-8" />   
<title></title> 
    <style> 
    #blue_decoration { 
     height: 85px; 
     background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/aa/Air_Force_Good_Conduct_Medal_ribbon.png'); 
    } 
    #bottom_blue_decoration { 
     height: 30%; 
     background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/aa/Air_Force_Good_Conduct_Medal_ribbon.png'); 
    } 

</style> 
</head> 
<body> 
<header id="blue_decoration"> Hello World</header><br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<footer id="bottom_blue_decoration"> don't collapse me! </footer> 
</body> 
</html>

您可能注意到，它在屏幕上沒有重複很多問題。但是，沒有與造型相關的職位，而是依賴於不會崩潰的內容。可以說，指定頂部和底部定位可能更好。另一件事是，你可能重複使用id - 嚴格來說，它只能在給定的頁面上使用一次。這很容易解決 - 只需將該樣式指定爲類（使用點而不是散列），並使用關鍵字類而不是id來調用它。

嘗試使用背景大小的非絕對值進行試驗，但使用響應百分比。一個重要的問題是：你是否想要任何內容來覆蓋這個背景？如果你想要它是一個沒有任何內容的圖像，你最終可能會更好使用<img>標籤...

來源

2012-11-03 11:24:55 Stumbler

這看起來不錯，因爲它不會崩潰。當我回到家裏並讓你知道時，我會試試看！謝謝！ –

我在這方面遇到困難。我嘗試改變周圍的價值，無法解決問題。如果你看代碼，你能幫忙嗎？你可以在這裏看到這個網站：www.cakery.co.il/b3（這個css文件叫做styles.css） –

我不會在你的網站上看到任何明顯的錯誤（雖然只有一兩個不相關的指針;可能應該在文件的底部有javascript，並且也有圖像導航按鈕的標題屬性）。你看到的是什麼，看起來不正確？ – Stumbler

浮動和擴展問題

回答

相關問題