CSS位置的佈局問題

嘿傢伙我試圖創建一個類似於你可以在starbucks.com上找到的導航系統。這裏是我的示例鏈接：http://dl.dropbox.com/u/73992/js_tests/test.htm我正在通過導航示例在底部完成效果，但正如您所看到的那樣存在定位問題。您可以在源代碼中找到CSS。我想這是測試它的最好方法。提前感謝您的幫助，我可以得到它。CSS位置的佈局問題

按照這裏的建議是在CSS

* 
{ 
    margin:0; 
    padding:0; 
} 

#nav 
{ 
    position:relative; 
    margin-top:3em; 
    margin-left:3em; 
} 

#nav ul 
{ 
    list-style-type:none; 
} 

#nav ul li 
{ 
    position:relative; 
    margin-top:10px; 
}  

#nav ul li ul li 
{ 
    margin-top:0px; 
} 

#nav ul li h1 
{ 
    font-size:15px; 
    font-weight:bold; 
    text-align:center; 
    color:#000000; 
    background-color:#F7FF88; 
    border:solid 5px black; 
    width:100px; 
    height:30px; 
    border-bottom:none; 
    z-index:20; 
} 

.content 
{ 
    position:relative; 
    width:300px; 
    background-color:#F7FF88; 
    border:solid 5px black; 
} 

.content form 
{ 
    display:block; 
    margin:10px 10px 10px 10px; 
} 

.content p 
{ 
    text-align:left; 
    display:block; 
    margin:10px 10px 10px 10px; 
} 

.gallery 
{ 
    margin:10px 10px 10px 10px; 
    background-color:#ffffff; 
    border:solid 1px black; 
} 

.gallery img 
{ 
    display:inline-block; 
    margin:10px 5px 10px 0px; 
    float:left; 
} 

/* 
This next section is identical but represents what happens w/ the absolute positioning. 
*/ 

.content2 
{ 
    position:absolute; 
    width:300px; 
    background-color:#F7FF88; 
    border:solid 5px black; 
    top:30px; 
    z-index:-5; 
} 

.content2 form 
{ 
    display:block; 
    margin:10px 10px 10px 10px; 
} 

.content2 p 
{ 
    text-align:left; 
    display:block; 
    margin:10px 10px 10px 10px; 
} 

.clear 
{ 
    clear:both; 
}

如果這能幫助這就是我想對li

而且float:left;完成

this is an example of the off hover(on) and then active when the section is clicked if i could get the css working the functionality would be easy... just can't seem to get these accomplished.

來源

2011-10-28 Brodie

你總是在測試案例中發表一個測試用例，並在問題中發佈代碼/標記。 –

把display:inline;上ul

我認爲這是你的大問題，如果我已經很好地理解你的問題。

來源

2011-10-28 02:15:02 GregM

這排隊他們，我有更多的問題瓦特/ h1的互動w /內容divs。我需要h1將內容div重疊幾個像素來創建制表符幻覺。 – Brodie

試試這個。將位置從絕對位置改變爲相對位置，並移除30像素的頂部邊距。你應該能夠得到與你上面的3個例子相同的效果。

.content2 
{ 
    position: relative; 
    width:300px; 
    background-color:#F7FF88; 
    border:solid 5px black; 
    z-index:-5; 
}

[編輯]

首先，去掉「邊界底部：無;」所以你的h1仍然會有底部邊框來顯示選項卡效果。

#nav ul li h1 
{ 
    font-size:15px; 
    font-weight:bold; 
    text-align:center; 
    color:#000000; 
    background-color:#F7FF88; 
    border:solid 5px black; 
    width:100px; 
    height:30px; 
    z-index:20; 
}

給你的H1一類，讓我們說「標籤」

<li><h1 class="tabbed">Ex. 1</h1>

，可能使用一些底片爲你的CSS。

h1.tabbed { 
    position:absolute; 
    top:-28px; 
}

給這個試試看。

來源

2011-10-28 02:20:47

這個問題是它與頂部選項卡的底部完全對齊。我需要h1來覆蓋內容div一點，以創建一個選項卡式的東西幻覺。 – Brodie

給我回答一點點編輯。試一試。 –

剛剛看到您發佈的示例。無需刪除「border-bottom：none;」如果是這樣的話。 @Brodie –

float：left可以解決您的定位問題。你必須在你的css中只添加兩行

#nav ul li { 
    float: left; 
    margin: 0 15px; 
    position: relative; 
}

來源

2011-10-28 06:49:51

CSS位置的佈局問題

回答

相關問題