CSS：特定全寬

嗨，我有一個寬度爲1150px的容器。現在我有另一個mainmenu，寬度：100％，我想放在容器內。但當然它只能得到100％（1150px），但我希望它從一邊到另一邊全寬，所以它應該忽略設置的寬度只爲.mainmenuCSS：特定全寬

我試過position：絕對使它全部錯誤和怪異

#mainmenu 
{ 
    height: 37px; 
    width: 100%; 
    margin: 0px auto; 
    background-image: url(../images/mainmenu_bg5.jpg); 

}

來源

2010-08-14 Karem

如果你的容器是固定的寬度，但希望其在整個頁面寬度背景的菜單，那麼你可以把菜單背景的html一個定位的背景，並保持相同的HTML代碼。這將使菜單的背景「欄」覆蓋整個頁面寬度。這種方法的

例子：http://templates.arcsin.se/demo/freshmade-software-website-template/index.html

如何做到這一點：使用定位背景：

http://www.w3schools.com/css/pr_background-position.asp

來源

2010-08-14 01:31:54

是多數民衆贊成在我正在尋找，使這樣的菜單，我怎麼能有菜單背景定位的HTML？你可以給我一個例子，請檢查我的更新問題的css – Karem 2010-08-14 01:36:52

爲什麼是擺在首位的容器中的菜單？如果你想讓菜單跨越整個寬度，但容器的內容只有1150px，我認爲根據定義將菜單放在容器中是不對的。考慮重構你的文檔。這是一個例子，我沒有你的全碼：

<body> 
<div id="page"> 
    <div id="header" style="background:Blue;"> 
    header header header 
    </div> 
    <div id="mainmenu" style="background:Green;"> 
    menu menu menu menu 
    </div> 
    <div id="container" style="width:1150px;margin:auto;background:Red;"> 
    container container container 
    </div> 
</div> 
</body>

如果你想的標題和菜單的內容跨越距離不超過1150px我認爲這是你想要什麼，然後考慮這個問題：

<head> 
<style type="text/css"> 
.pagewidth { 
    width: 1150px; 
    margin: auto; 
} 
</style> 
</head> 
<body> 
<div id="page"> 
    <div id="header" style="background:Blue;"> 
    <div class="pagewidth"> 
    header header header 
    </div> 
    </div> 
    <div id="mainmenu" style="background:Green;"> 
    <div class="pagewidth"> 
     menu menu menu menu 
    </div> 
    </div> 
    <div id="container" class="pagewidth" style="background:Red;"> 
    container container container 
    </div> 
</div> 
</body>

來源

2010-10-30 07:58:05 Bazzz

雖然你的解決方案可能是「正確的」（在它的工作原理），也可能是「正確的」（因爲原始文檔的語義可能有錯誤），我認爲首先建議風格決定應該規定文檔的數據設計出現問題是錯誤的。與改變數據相比，幾乎總是有更好的解決衝突樣式和正確數據的解決方案。 – eyelidlessness 2010-10-30 08:12:37

同意，也許我的措辭不完美（我不是英語母語的人）。我使用「考慮」一詞來表明反思可能爲文件的變更辯護。如果由於任何原因文件的變更不合理，那麼我的答案可能不是最好的。然而，如果更改是合理的，例如當網站尚未發佈時，那麼我的答案可能是一個很好的解決方案，因爲它易於實施和理解。我認爲這比用矛盾的css規則解決問題要好得多。這取決於Karem在imho的情況。 – Bazzz 2010-10-30 08:38:09

CSS低於，但有時它從裏面的內容取決於：

#mainmenu 
{ 
    height: 37px; 
    width: 100%; 
    margin: 0px; 
    position: relative; 
    background-image: url(../images/mainmenu_bg5.jpg); 
}

這是一個jQuery溶液：

$('#mainmenu').width() == $('#container').width();

來源

2010-11-10 10:25:17

爲了得到一個背景圖像來模擬菜單欄橫跨你需要應用#mainmenu背景，body或容器DIV像這樣的頁面的整個寬度：

body { 
    background: url(YOURIMAGE) repeat-x left 64px; 
}

的64px需要被#mainmenu距離頂端有多遠。

如果body已經有一個背景圖像，那麼你將需要在包含其他所有內容的正文內的另一個div。如果你有過HTML然後使用JavaScript來插入div將自動換行所有內容或得到呈現它背後沒有控制（使用position和z-index。）

來源

2010-11-21 16:31:53 rennat

位置：絕對是讓這個而最好的方法保持#mainmenu的背景。事實上，這是我能想到的唯一一個可以從頭頂上看出來的人。當然沒有JavaScript。其他一切都需要更改HTML或將背景屬性移到不同的地方。

#mainmenu 
{ 
    position:absolute; 
    left:0;top:??px; 
    width:100%; 
    height:37px; 
    background-image: url(../images/mainmenu_bg5.jpg); 
}

因爲＃mainmenu的寬度：100％，那麼將成爲視口的100％而不是包含塊。（除非父母的位置：相對或溢出：隱藏）

所以，當你說它「全部怪異」時，我認爲這是因爲頁面上的其他內容。絕對項目和浮動項目均取自普通文檔流程中的項目。所以菜單下面的東西可以在&之下結束。

#mainmenu 
{ 
    position:absolute; 
    left:0;top:??px; 
    width:100%; 
    height:37px; 
    background-image: url(../images/mainmenu_bg5.jpg); 
} 
    #mainmenu + * 
{ 
     padding-top:37px; 
    } 
    /* Exact selector not recommended due to poor browser support */

解決方案是，基本上，應用37px的邊距或填充到#mainmenu之後的第一件事。你也將無法使用margin：0 auto來定位絕對定位的元素，但是如果你希望它跨越視口的整個寬度，那應該不是一個問題......如果你想要居中放置菜單，當然，你需要某種形式的後裔到中心：

#mainmenu 
{ 
    position:absolute; 
    left:0;top:??px; 
    width:100%; 
    height:37px; 
    background-image: url(../images/mainmenu_bg5.jpg); 
} 
    #mainmenu > * 
    { 
     margin:0 auto; 
    } 
    /* Exact selector not recommended due to poor browser support */ 
    /* & more properties needed if descendant is list with floated <li>s */ 
    #mainmenu + * 
    { 
     padding-top:37px; 
    } 
    /* Exact selector not recommended due to poor browser support */

但也有很多的事情，你會看到在頁面上定位的關係變化到其他事情：絕對的。所以要排除故障，我真的需要更多地瞭解頁面上的其他內容。

您可能會發現另一種解決方案，但如果您沒有 - 發佈一個頁面，我可以看看&我可能能夠幫助您解決絕對定位問題。也就是說，如果它能用於這個特定的佈局。

來源

2010-11-21 17:07:35 morewry

CSS：特定全寬

回答

相關問題