html5/css3導航欄大小問題

現在有一段時間沒有做任何網頁設計，但我女朋友需要一堆更新到她的網站，這是我幾年前做的，並且一直在增加點點滴滴，結果它是一種不規則的形式，所以我想我會研究所有最新的開發，並嘗試通過爲各種設備引入一些響應式設計來進行徹底檢查。html5/css3導航欄大小問題

我只是隨便用我構建主模板頁面中的具體問題 - 我已經把副本在這裏：

http://massagecamden.co.uk/copy2/index.html

不管怎樣，我知道有很多東西將根據不同大小的頁面的媒體查詢細節處理，但我目前的問題是在桌面大小版本上使用我的導航欄的寬度。

我一直在想，它在一臺顯示器上看起來很棒，然後將它拖拽到一個更大的顯示器上，然後看到，導航欄粘貼在gridContainer div的左側。我在這裏使用Dreamweaver CS6進行流體佈局，並且導航欄本身位於名爲navigation的流體div內，其寬度設置爲100％。

現在，它上面的標題圖片也在流動div（稱爲標題）中，其寬度也設置爲100％。在我注意到導航問題之前，我遇到了讓圖像居中的問題，直到我遇到了一個問題（在這裏我認爲），這導致我創建顯示的解決方案：img的阻止規則，然後使用邊距：汽車技巧將其集中。

但是這個（或者我嘗試過的其他東西）似乎無法在導航欄上工作。我承認我從網上的一些教程中獲得了大部分的構建，但是我對結果感到非常自豪 - 如果只是在擴大瀏覽器寬度時能夠正確調整大小/位置，那麼結果會很自豪。

理想情況下，我希望它保持一個類似於標題圖像的靜態大小，並且也要同樣居中。如果這是可行的，那麼我也希望能夠在兩側看到更多的背景圖像，比如在http://massagecamden.co.uk/的原始主頁上，但我放棄了邊距：gridContainer上的auto可能不會這樣做流體格的美德？

任何人有任何想法，我哪裏會出錯？請問？

非常感謝克雷格。

來源

2013-04-22 Craig Duncan

如果可能的話，拉出相關的CSS和標記，並在http://www.jsfiddle.net上創建一個獨立的示例，並將CSS/HTML也放在這裏。這樣，這個問題可能會在未來給其他人帶來好處。 – 2013-04-22 04:52:12

這將以導航爲中心。

#navigation { 
    text-align: center; 
}

我不太確定你想要做什麼。

來源

2013-04-22 05:00:02

太棒了！第一次！我在早上6點發布了這個帖子，並且一直在研究這個太久！我想我對導航div和新的nav html5標籤之間的區別感到困惑。非常感謝！ – 2013-04-22 12:38:43

我認爲你必須這樣做：

#navigation { 
    width: 100%; /* You said you have done this already */ 
} 

#header { /* Image is here */ 
    width: 1000px; /* For example */ 
    display: block; 
    margin: auto; 
}

你必須設置＃標頭的寬度，因爲否則將不能居中。

我不確定你的意思，但希望這會有所幫助。

來源

2013-04-22 05:12:47

感謝您的回覆 - 也許我不太清楚 - 我試圖將nav元素（導航欄本質上）放在較大的瀏覽器設置中。 – 2013-04-22 12:34:38

謝謝你清除答案，對於我沒有得到你的觀點感到抱歉。如果@ MarkRyanSallee的答案是正確的（我認爲你認爲是），請通過點擊答案的投票按鈕下的接受按鈕來接受它。 – 2013-04-22 13:36:29

html5/css3導航欄大小問題

回答

相關問題