-1

ソーシャル ボタン (facebook // twitter) を残りのヘッダーとナビゲーションに合わせようとしています。私は頭を壁にぶつけていますが、すべてを一直線に並べる解決策が見つからないようです。新鮮な目が助けになることを願っています。ここで現在のコードの jsFiddle を作成しました: http://jsfiddle.net/yZ4sm/並べられないように見えるソーシャル ボタンは、右側の 2 つの壊れた画像 (jsFiddle 内) です。

最終結果はこんな感じでお願いします

以下のHTMLとCSSを参照してください：

HTML

<div id="headerWrapper">

    <div id="headerContent">

        <div id="grappleAnchor">
            <a href="index.html"> <img id="grappleAnchorLogo" src="img/grapple-logo.png" alt=" "> </a>
        </div>


        <div id="navigation">
            <div class="navigationLink">
                <a class="activeLink" href="index.html">Home</a>
                <div id="navigationMarker">
                </div>
            </div>        
            <div class="navigationLink">
                <a href="services.html">Services</a>
            </div>
            <div class="navigationLink">
                <a href="#">About</a>
            </div>
            <div class="navigationLink">
                <a href="#">Blog</a>
            </div>
            <div class="navigationLink">
                <a href="#">Contact</a>
            </div>
        </div>

        <div id="social">

            <div id="facebook">
                <a href="http://www.facebook.com/GrappleConsulting" target="_blank"> <img class="greydout" src="icons/facebook.png" alt=" "> </a>
            </div>

            <div id="twitter">
                <a href="http://twitter.com/blair_gorrell" target="_blank"> <img class="greydout" src="icons/twitter_bird.png" alt=" "> </a>
            </div>
        </div>

    </div>​

CSS

#headerWrapper {
    background-color: #e6e4e4;
    height:5em;
}

#headerContent {
    height:80px;

    margin: 0 auto; /*top, right, bottom, left*/
    padding: 0px 0; /*top&bottom, left&right */
    width: 955px;
}


/*---------->Logo Start<----------*/

    #grappleAnchor {

        clear:none;
        float:left;
        margin: 0;
        padding: 0;
    }

    #grappleAnchor a {
        display: block;
        float:left;
        text-decoration: none;
    }

    #grappleAnchorLogo {
        height: 70px;
    }

    #grappleAnchor a img {
        border: none;
    }

/*---------->Logo End<----------*/


/*---------->Navigation Start<----------*/

#navigation {
    line-height: 5em;
}

#navigation a:hover, #navigation a:active, #navigation a.activeLink {
    color: #FFF;
}

#navigation a {
    color:#000;
    margin: 0 1em 0 1em; /*top, right, bottom, left*/
    text-decoration: none;
}

div.navigationLink {
    float:left;
    font-size: 1.4em;
}

#navigationMarker{
    border-bottom: #FFF solid 0.8em;
    border-top: none;
    border-left: transparent solid 0.8em;
    border-right: transparent solid 0.8em;
    height: 0;
    margin-top: -0.7em;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 1px;    
}

/*---------->Navigation End<----------*/


/*---------->Social Start<----------*/

#social {
    float:left;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",    Helvetica, Arial, "Lucida Grande", sans-serif; 

}

#facebook, #twitter{
    background-color: #fff;
    border-radius: 20px;
    display: block;
    float: left;
    height: 32px;
    margin: 0 .5em 0 .5em; /*top, right, bottom, left*/
    -webkit-border-radius: 20px;
    width: 32px;    
}

.greydout{
    -moz-opacity: 0.25;
    opacity: 0.25;
    -webkit-opacity: 0.25;
}

.greydout:hover {
  -moz-opacity: 1;
  opacity: 1;
  -webkit-opacity: 1;
}

</p>

4

1 に答える 1

0

マージンを使用してみてください：

#social {
  float:left;
  margin-top: 1.5em;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;    
}
于 2013-01-05T04:22:14.620 に答える