0

相対オブジェクトの横に絶対オブジェクトを配置しようとしています。初期オブジェクトにより、相対divが次の行に折り返されます。

タイトルを新しい「行」に移動させるロゴを除いて、すべてが正常に機能しています。#logo divをに変更position:absoluteすると、位置の問題を修正できますが、ロゴホバーが機能しなくなります。

編集：これがライブデモです：http：//vaer.ca/warm-forest-8234/

これが私のHTMLです：

<div id="container">

        <a href="index.html" id="logo"></a>

        <div id="header">

            <h2><a href="index.html">Collectif</a></h2>

        </div>  

        <div id="nav">
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Work</a></li>
            </ul>
        </div>

そしてこれが私のCSSです：

#container {
    width: 980px;
    margin: 0 auto;
    position: relative;
    }

#header {
    height: 75px;
    text-align: right;
    position: relative;
    }

#header h2 {
    font-size: 2.5em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-top: 15px;
    }

#header a {
    text-decoration: none;
    color: #000000;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    }

#header a:hover {
    color: #7acfdd;
    }

#logo {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-left: 10px;
    background: url('../img/logo.png') no-repeat;
    width: 60px;
    height: 60px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    }

#logo:hover {
    position: relative;
    background: url('../img/logo-hover.png') no-repeat;
}
4

3 に答える 3

0

試す：

#logo {
    float: left;
}
于 2012-12-28T02:41:14.380 に答える
0

私は言うだろう：

#logo {
    float: left;
    position: relative;
}

#header {
    height: 75px;
    text-align: right;
    position: relative;
    clear:both;
}

そして、フロートを使用するのは問題ありません。および位置：相対; （位置を使用する場合：相対; z-indexを適用できるため、divを他の上にフロートさせる必要がある場合は常に使用しています）

于 2012-12-28T02:44:44.510 に答える
0

#logoリンクを設定して、要素がそのスペース全体を占めるようにdisplay:block強制します。<a>開発者ツールを使用してそれを参照してください。次の手順を実行してすべてを修正し、それに加えて、よりセマンティックにすることができます。

#logo{
display:inline-block;
}
#header{
display:inline-block;
float:right
}

これらの変更により、希望する結果が得られます。

于 2012-12-28T02:58:57.747 に答える