0

ナビゲーションの下に追加したソーシャルメディアアイコンを配置する方法を理解するのに苦労しています。ナビゲーションの右側に画像をフラッシュして配置し、リンクを移動せずに画像を少し下に押すにはどうすればよいですか？

これが今の様子の写真です：http：//i48.tinypic.com/34shzc3.png

以下はレイアウトです、

HTML：

          <!-- HEADER -->
      <div id="header">

        <div id="site_nav">
          <virb load="nav" />
<a href="http://www.facebook.com/"><img src="http://i47.tinypic.com/2hsawr8.png" /></a>
<a href="http://www.facebook.com/"><img src="http://i47.tinypic.com/2hsawr8.png" /></a>
        </div>

        <div class="module" id="display_name">
          <h1><a href="get[site.url]"><virb customize="logo" /></a></h1>
          <h2 id="virb_customize_tagline"><virb customize="tagline" /></h2>
        </div> 

      </div>
      <!-- END HEADER -->

CSS：

/* ---------- HEADER ---------- */

div#header_wrapper {
    width:100%;
    background: <virb get="customize.colors.background_header" />;
    z-index: 2;
}

div#header {
    width:960px;
    margin:0 auto;
    padding:35px 0 20px;
}
    #header h1 {
        font: normal <virb get="customize.fonts.site_size" /><virb get="customize.fonts.site_family" />;
        line-height: 100%;
    }

        #header h1 a,
        #header h1 a:hover {
            color: <virb get="customize.colors.site_name" />;
        }

        #header h1 img {
            display: block;
            max-width: 300px;
        }

    #header h2 {
        font-weight: bold;
        font-size: <virb get="customize.fonts.tagline_size" />;
        font-family: <virb get="customize.fonts.header_family" />;
        color: <virb get="customize.colors.tagline" />;
        line-height: 110%;
        padding-top: 6px;
    }

    #header #page_title {
       float:left;
    }
    #header #site_nav {
       float:right;
       margin-top: 54px;
    }

#display_name {width: 300px;}

    #display_name h2 {color:<virb get="customize.colors.tagline" />; text-transform: uppercase;}


/* ---------- NAVIGATION ---------- */

div#site_nav {
    display: block;
    max-width: 700px;
}

#site_nav ul li {
    display: inline;
    position: relative;
    font-size: <virb get="customize.fonts.nav_size" />;
    font-family: <virb get="customize.fonts.header_family" />;
    font-weight: bold;
    letter-spacing: .2px;
    text-transform: uppercase;
}

#site_nav div.clear {
    display: none;
}

    #site_nav li.section:after { content: " "; }

    #site_nav li.section ul { display: none; } 
    #site_nav li.section:hover ul { display: block; }
    #site_nav li.section ul {
        position: absolute;
        top: <virb get="customize.fonts.nav_size" />;
        left: 10px;
        width: 200px;
        z-index: 111;
        padding-top: 10px;
    }
        #site_nav li.section ul li {
            float: none;
            display: block;
            font: normal <virb get="customize.fonts.nav_size" />;
            background: <virb get="customize.colors.nav_dropdown" />;
            margin: 0;
            padding: 7px 7px 5px 7px;
            letter-spacing: 0;
            text-align: left;
            line-height: 1.5;
            border-bottom: 1px solid <virb get="customize.colors.background_header" />;
        }
            #site_nav li.section ul li:last-child {border-bottom: none;}

            #site_nav li.section ul li a {
                text-transform: none;
                letter-spacing: 0;
                padding: 4px 7px 4px 3px;
                font: <virb get="customize.fonts.header_family" />;
                display: block;
            }

    #site_nav ul li a, 
    #site_nav ul li.section {
        cursor: pointer;
        padding: 0 12px;
        font: <virb get="customize.fonts.header_family" />;
        color: <virb get="customize.colors.nav_link" />;
    }
    #site_nav ul li a:hover,
    #site_nav ul li.section:hover {
        color: <virb get="customize.colors.nav_hover" />;
    }
    #site_nav ul li.active, #site_nav ul li.active a {
        color: <virb get="customize.colors.nav_hover" />;
    }

    #site_nav ul li.active ul li a {
        color: <virb get="customize.colors.nav_link" />;
    }

    #site_nav ul li.active ul li a:hover {
        color: <virb get="customize.colors.nav_hover" />;
    }

    #site_nav ul li.active ul li.active a {
        color: <virb get="customize.colors.nav_hover" />;
        cursor: default;
    }
4

1 に答える 1

1

次のcssをFacebook画像の周囲のアンカータグに追加します。

.fr
{
    float:right;
}

このような：

<a href='some-url' class='fr'><img src='facebook'/></a>
于 2012-09-06T22:11:19.773 に答える