0

これらのアイコンをヘッダーに並べて配置し、中央 (垂直方向) に配置し、ページの右側に保持しようとしています (おそらくフロートですか?)

http://jsfiddle.net/qNWeV/1/

これが私が達成しようとしていることのイメージです:

私が達成しようとしていること

<!-- HEADER -->
    <div class="header">
        <img class="center-header" src="images/center_header.png" />

        <!-- BUTTONS (header) -->
        <div class="header-buttons-right">
            <!-- Notification Icon -->
            <div class="notify-div" class="right-margin"> <span id="notify-span"> 1 </span> </div>
            <div class="gear-settings"> <!-- Gear Settings --> </div>
            <div class="menu-button"> <!-- Menu Button --> </div>
        </div>

    </div>


/* ******************* */
/*        TOP-NAV      */
/* ******************* */
.header {
    background-color:rgb(243,243,243);
    width:100%;
    height:60px;
    border-color:rgb(243,243,243);
    border-width:2px;
    /* Firefox v1.0+ */
    -moz-border-radius:0%;
    /* Safari v3.0+ and by Chrome v0.2+ */
    -webkit-border-radius:0%/3%;
    /* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
    border-radius:0%/3%;
    border-style:solid;
}
.center-header {
    position: fixed;
    z-index: 1002;
    left: 50%;
    top: -45px;
    margin-left: -135px;
}
.header-buttons-right {
    float: right;
}
.notify-div {
    width: 24px;
    height: 24px;
    background: url('../images/notify-round.png') no-repeat center;
    text-align: center;
}
    #notify-span {
        position: relative;
        top: 3px;
        font-family:"Futura LT Bold";
        font-size:12px;
        font-weight:bold;
        line-height:117%;
        color:rgb(255,255,255);
    }
.gear-settings {
    background: url('../images/gear-settings.png') no-repeat center;
    width: 24px;
    height: 24px;
    display: inline-block;
}
.menu-button {
    background: url('../images/menu.png') no-repeat center;
    width: 24px;
    height: 21px;
}
4

2 に答える 2

0

ヘッダーの高さを知っているので、アイコンのコンテナーに同じ高さと行の高さを与えることをお勧めします。

次に、このコンテナーを右にフロートできます。アイコンがインライン ブロックの場合は、それらを設定できます。vertical-align: middle;

ここでは、結果をわかりやすくするために、アイコン イメージを削除し、代わりに div の背景色を指定しました。

http://jsfiddle.net/qNWeV/1/

お気付きかもしれませんが、各アイコンの終了 div タグと開始 div タグの間のスペースを削除しました。それらはインライン ブロックとして設定されているため、ブラウザーはスペースを追加します。

于 2013-03-25T02:42:43.463 に答える
0

HTML:

<!-- HEADER -->
<div class="header"> 
    <img class="center-header" src="images/center_header.png" /> 
                <!-- BUTTONS (header) -->
    <div class="header-buttons-right"> 
        <!-- Notification Icon -->
        <span class="notify-div right-margin">
            <span id="notify-span"> 1 </span> 
        </span>
        <span class="gear-settings"> G</span>
        <span class="menu-button">M</span>
    </div>
</div>

CSS :

/* ******************* */
/*        TOP-NAV      */
/* ******************* */

.header {
    background-color: rgb(243,243,243);
    width: 100%;
    height: 60px;
    line-height: 60px;
    border:2px solid rgb(243,243,243);
/* Firefox v1.0+ */
-moz-border-radius:0%;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:0%/3%;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
border-radius:0%/3%;
}
.center-header {
    position: fixed;
    z-index: 1002;
    left: 50%;
}
.header-buttons-right {
    float: right;
    width:200px;
}
.notify-div {
    width: 24px;
    height: 24px;
    background: url('../images/notify-round.png') no-repeat center;
    text-align: center;

}
#notify-span {
    font-family: "Futura LT Bold";
    font-size: 12px;
    font-weight: bold;
    color: rgb(255,255,255);
}
.gear-settings {
    background: url('../images/gear-settings.png') no-repeat center;
    width: 24px;
    height: 24px;
}
.menu-button {
    background: url('../images/menu.png') no-repeat center;
    width: 24px;
    height: 21px;
}

Jsfiddle : http://jsfiddle.net/VJGUM/

于 2013-03-25T02:25:27.277 に答える