圖片在瀏覽器上的重疊文本調整大小

我已經通過CSS驗證（它確實發現了一些討厭的未封閉標籤，現在排序）。我正在嘗試將圖片對齊到頁面的右上角，標題文本位於左上角。圖片在瀏覽器上的重疊文本調整大小

我可以做到這一點，但是當我調整瀏覽器窗口的大小時，圖像總是希望在標題文本重新調整之前重疊標題文本。如果我刪除了用於放置圖像的邊距，則圖像位於標題文本下方（右側），而不是右側，但我覺得刪除它（同時保留定位）可能會鍵。不過，我確實需要將圖像重疊一些其他元素。

這裏是我的代碼圖像片段：

img#site-logo { 
    max-width: 100%; 
    height: auto; 
    clear: both; 
    position: relative; 
    z-index: 0; 
    margin: -12.87em 2em -16em 0px; 
}

以及網站標題：

#site-title a { 
    font-size: 4.875em; 
    font-weight: bold; 
    line-height: 78px; 
    padding: 0px; 
    margin-right: auto; 
    white-space: nowrap; 
    z-index: 2; 
    position: relative; 
}

網站是住在這裏：

http://dominicpalma.com/

來源

2013-03-01 James

首先，勞動，BOO !!! :)所以你想達到什麼，一個響應網站？ – Richlewis 2013-03-01 15:37:21

您是在嘗試構建一個自適應佈局還是僅限桌面？在#page上使用最小寬度可能已經足夠，但取決於您想實現的目標 – earthdesigner 2013-03-01 15:53:33

我希望能夠響應，是的 - 以便它可以在各種屏幕上運行。 – James 2013-03-01 16:03:09

有當然有幾種不同的方法來解決你的問題。但在我看來，這將是爲您的#page元素設置min-width的最佳解決方案。

#page{ 
    min-width:900px; 
}

我打了一點點與周圍的寬度，並認爲900像素的min-width最適合你的情況。

來源

2013-03-01 15:48:01

謝謝 - 這會阻止它重疊，但是頁面不適合較小的屏幕和移動設備。我希望能夠動態調整所有頁面元素的解決方案 - 這是不可能的嗎？＃ – James 2013-03-01 16:02:00

當然，這是可能的，但你必須做的不僅僅是快速和簡單的修復。然後，您必須重構整個頁面概念，並且應該更好地瞭解有關響應式設計和編碼的詳細信息。 – 2013-03-01 16:21:32

由於我在頁面設計的早期階段，有沒有可以指向我的地方？當然，重組越少越好...... – James 2013-03-01 16:24:14

圖片在瀏覽器上的重疊文本調整大小

回答

相關問題