CSSの位置に関するレイアウトの問題

ねえ、私はあなたがstarbucks.comで見つけることができるようなナビゲーションシステムを作成しようとしています。私のサンプルへのリンクは次のとおりです: http://dl.dropbox.com/ u/73992/js_tests/test.htm 私は、底部のナビゲーションサンプルで効果を達成していますが、わかるように、位置決めの問題があります。 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;
}

これが私が達成しようとしているものであれば

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

0
テストケースを作成して、コード/マークアップを質問に投稿する方がよいでしょう。
追加された 著者 Jared Farrish,

3 答え

これを試してみてください。絶対位置から相対位置に変更し、30pxの上端を削除します。あなたはあなたの上の3つの例と同じ効果を得ることができるはずです。

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

[編集]

まず、「border-bottom:none;」を削除します。あなたの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クラスに、「タブ付き」と言うと、

  • Ex. 1

    おそらくあなたのCSSにいくつかのネガを使用します。

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

    これを試してみてください。

  • 2
    追加された
    私の答えは少し編集しました。試してみる。
    追加された 著者 Mike Sanchez,
    あなたが投稿した例を見ただけです。 "border-bottom:none;"を削除する必要はありません。そうだとすれば。 @ブロディ
    追加された 著者 Mike Sanchez,
    @Brodie CSSの "#nav ul li ul li"に適切な余白を付けてください。 :)
    追加された 著者 Mike Sanchez,
    この問題は、上部タブの下部に完全に並んでいることです。私は、タブ付きのものの錯覚を作成するために、コンテンツdivを少し覆うためにh1が必要です。
    追加された 著者 Brodie,
    これは動作しますが、新しい問題を引き起こします。 dl.dropbox.com/u/73992/ js_tests/test.htm <�これらはまだ重複しています。元のli構造体をまったく変更しても機能しますか?
    追加された 著者 Brodie,

    float : left can solve your positioning problem. You have to add just two lines in your css

    #nav ul li {
        float: left;
        margin: 0 15px;
        position: relative;
    }
    
    0
    追加された

    Put display:inline; on li

    And float:left; on ul

    あなたの問題をよく理解していれば、それはあなたの大きな問題だと思います。

    0
    追加された
    これはそれらを並べて、私は問題のより多くを持っている/ h1は、コンテンツdivとの相互作用。私は、タブの錯覚を作成するために、コンテンツdivをいくつかのピクセルでオーバーラップする必要があります。
    追加された 著者 Brodie,