내비게이션 아래에 소셜 미디어 아이콘 추가

Question

오른쪽 탐색 메뉴 바로 아래에 소셜 미디어 아이콘을 추가하려고하지만 이미지를 연결해야하는 위치를 정확히 모르겠습니다. 어떤 도움이라도 대단히 감사하겠습니다! 나는 아래에 내 사이트 CSS와 HTML을 추가했습니다. 사이트 : http://customjtw.virb.com/

CSS :

/* 
--------------------------------------- 
APOLLO 
--------------------------------------- 
by Ryan Clark 
www.ryanvsclark.com 
---------------------------------------                           
*/ 


/* ---------- GLOBAL STYLING RULES & RESETS ---------- */ 
* { 
    margin: 0px; 
    padding: 0px; 
} 

<virb get="customize.fonts.font_face" /> 

body { 
    background: <virb get="customize.colors.background_footer" />; 
    font: normal <virb get="customize.fonts.body_size" /> <virb get="customize.fonts.body_family" />; 
    color:<virb get="customize.colors.text" />; 
    line-height: 1.5; 
    font-family: <virb get="customize.fonts.body_family" />,serif; 
} 

hr { display: none; } 

#page hr { 
    display: block; 
    border: none 0; 
    border-top: 1px solid <virb get="customize.colors.line_page" />; 
    width: 100%; 
    height: 1px; 
    margin: 0 0 20px 0; 
} 

input, option, textarea, 
button { 
    font: normal <virb get="customize.fonts.body_size" /> <virb get="customize.fonts.body_family" />; 
} 

ul, ol { 
    list-style-type: none; 
} 

q:before, q:after { content: ""; } 

big { font-size: 12px; } 
small { font-size: 9px; } 

img { border: none; } 

a { 
    color: <virb get="customize.colors.link" />; 
    text-decoration: none; 
    outline: none; 
} 

a:hover { 
    color: <virb get="customize.colors.link_hover" />; 
} 

#footer a { 
    color: <virb get="customize.colors.footer_link" />; 
    text-decoration: none; 
    outline: none; 
} 

#footer a:hover { 
    color: <virb get="customize.colors.footer_link_hover" />; 
} 

p, h1, h2, h3, h4, h5, h6, 
ol, ul { 
    line-height: 1.5; 
} 
#container_right p { 
    line-height: 150%; 
} 
#page #description h2, #page #blog .text h3 { 
    font-size: 1.5em; 
    font-family: <virb get="customize.fonts.body_family" />; 
} 

.homepage #page #description h2 { 
    margin: 10px 0 0 0; 
    font-size: 1.5em; 
} 

.homepage #page #description h3 { 
    font-size: 1.2em; 
    font-family: <virb get="customize.fonts.body_family" />; 
    color:#888; 
} 

#header_wrapper, #page_wrapper, #footer_wrapper { 
    width:100%; 
    position:relative; 
} 



/* ---------- 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; 
    } 


/* ---------- PAGE ---------- */ 

div#page_wrapper { 
    background: <virb get="customize.colors.background_page" />; 
    z-index: 1; 
    overflow: hidden; 
} 

div#page { 
    width:960px; 
    margin:0 auto; 
    padding:25px 0 15px; 
    overflow: hidden; 
    border-top: 1px solid <virb get="customize.colors.line_page" />; 
    border-bottom: 1px solid <virb get="customize.colors.line_page" />; 
} 

body.index div#page {padding-bottom: 0;} 

#page div#description { 
    position: relative; 
    padding: 0; 
    width:600px; 
} 
    #page #description p, #page #description h2, #page #description h3, #page #description h4, #page #description h5, #page #description h6 { 
     padding: 0 0 15px 0; 
    } 

    #page #description ul li, #page #description ol li {padding: 0 0 5px 0;} 

    #page #description h2 {line-height: 1.3;} 

div#share { 
    display: block; 
    position: relative; 
    clear: both; 
    padding: 10px 0 0 0; 
} 

#page #title { 
    display: yes; 
    font-size: 22px; 
    color:#527fb1; 
    padding: 0 0 12.5px 0; 
} 


/* ---------- SIDEBAR ---------- */ 

div#widgets { 
    font-size: 11px; 
    overflow: hidden; 
    line-height: 0; 
    font-family: <virb get="customize.fonts.footer_family" />; 
} 

div#widgets:after { 
    display: block; 
    visibility: hidden; 
    clear: both; 
    content: "\00A0"; 
} 

    #widgets .module { 
     display: block; 
     float: left; 
     width: 300px; 
     padding: 0 0 20px 0; 
     margin: 0 30px 0 0; 
    } 
    #widgets .last_module {margin: 0;} 

     #widgets .module h4 { 
      font: italic <virb get="customize.fonts.body_size"/> <virb get="customize.fonts.footer_family" />; 
      color: <virb get="customize.colors.widget_text" />; 
      letter-spacing: .2px; 
      padding: 0 0 10px 0; 
      margin-bottom:10px; 
      border-bottom: 1px solid <virb get="customize.colors.line_footer" />; 
     } 
      #widgets h4 a { color: <virb get="customize.colors.footer_link" />; } 
      #widgets h4 a:hover { color: <virb get="customize.colors.footer_link_hover" />; } 

     #widgets .module p { 
      font-size: <virb get="customize.fonts.body_size" />; 
      line-height: 150%; 
      padding: 0; 
     } 

      #widgets .module.twitter ul li span a, 
      #widgets .module.lastfm ul.recent_plays li span { 
       color: <virb get="customize.colors.footer_link" />; 
      } 
      #widgets .module.twitter ul li span a:hover { 
       color: <virb get="customize.colors.text" />; 
      } 

     #widgets .module.lastfm ol { 
      list-style-type: decimal; 
      list-style-position: inside; 
     } 

      #widgets .module.rss-feed ul, 
      #widgets .module.blog-posts ul, 
      #widgets .module.twitter ul, 
      #widgets .module.lastfm ul.upcoming_events, 
      #widgets .module.lastfm ul.recent_plays { 
       margin-bottom: -10px; 
      } 

      #widgets .module.rss-feed ul li, 
      #widgets .module.blog-posts ul li, 
      #widgets .module.twitter ul li, 
      #widgets .module.lastfm ul.upcoming_events li, 
      #widgets .module.lastfm ul.recent_plays li { 
       padding-bottom: 10px; 
      } 

       #widgets .module.lastfm ol li img { display: none; } 

     #widgets .count_2, #widgets .count_5, #widgets .count_8, #widgets .count_11, #widgets .count_14, #widgets .count_17 { 
      margin: 0; 
     } 


    /* AUDIO PLAYER */ 

    .module.audio_player ul { 
     display: block; 
     width: 278px; 
     background: #fff; 
     border: solid 1px #ddd; 
     border-radius: 5px; 
     padding: 10px 10px 15px 10px; 
     overflow: hidden; 
    } 
    .module.audio_player li .album_image { 
     height: 75px; 
     width: 75px; 
     padding: 5px 15px 5px 5px; 
     margin-bottom: 10px; 
     display: block; 
     float:left; 
    } 
    .module.audio_player li .album_image img { 
     height:75px; 
     width:75px; 
    } 

    .module.audio_player li { 
     display: none; 
    } 
    .module.audio_player li.selected { 
     display: block; 
    } 
    #widgets .module.audio_player li h3 { 
     text-align: left; 
     font-size: <virb get="customize.fonts.body_size" />; 
     padding-bottom: 2px; 
    } 
     #widgets .module.audio_player li h3 .download { 
      display: none; 
     } 
    #widgets .module.audio_player ul h4 { 
     display: block; 
     text-align: left; 
     font: normal 12px <virb get="customize.fonts.footer_family" />; 
     text-transform: none; 
     border: none; 
     letter-spacing: 0; 
     padding: 0 0 2px 0; 
     margin: 0; 
     color: <virb get="customize.colors.text" />; 
    } 
    .module.audio_player .controls { 
     display: block; 
     float: left; 
     margin:5px 0 10px 0; 
     text-align: left; 
     padding-bottom: 10px; 
     width: 180px; 
     border-bottom: 1px solid <virb get="customize.colors.line_page" />; 
    } 
     .module.audio_player .controls .prev, 
     .module.audio_player .controls .next { 
      display: inline-block; 
      width: 20px; 
      height: 30px; 
     } 
     .module.audio_player .controls .prev a, 
     .module.audio_player .controls .next a { 
      display: inline-block; 
      width: 20px; 
      height: 30px; 
      overflow: hidden; 
      text-indent: 1000px; 
      -moz-border-radius: 7px; 
      -webkit-border-radius: 7px; 
      border-radius: 7px; 
     } 
     .module.audio_player .controls .prev a { 
      background: url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat left -7px; 
     } 
     .module.audio_player .controls .next a { 
      background: url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat right -7px; 
     } 

     .module.audio_player .controls .playpause { 
      display: inline-block; 
      height: 30px; 
      width: 35px; 
      overflow: hidden; 
     } 
      .module.audio_player .controls .playpause a { 
       display: block; 
       height: 30px; 
       width: 35px; 
       overflow: hidden; 
       text-indent: 1000px; 
       background: <virb get="customize.colors.text" /> url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat center -7px; 
       -moz-border-radius: 7px; 
       -webkit-border-radius: 7px; 
       border-radius: 7px; 
      } 
      .module.audio_player .playing .controls .playpause a { 
       background: <virb get="customize.colors.link" /> url(<virb get="theme.assets.url" />graphics/sprite_controls.png) no-repeat center -52px; 
      } 

    .module.audio_player audio { 
     width: 150px; 
     padding: 15px 5px 0px 5px; 
    } 

    .module.audio_player .length { 
     display: block; 
     height: 6px; 
     width: 150px; 
     border: solid 1px #ddd; 
     background: #ddd; 
     -moz-border-radius: 2px; 
     -webkit-border-radius: 2px; 
     border-radius: 2px; 
     position: relative; 
     margin-top: 9px; 
     float:left; 
     margin-left:95px; 
    } 
     .module.audio_player .length .load { 
      height: 6px; 
      width: 0%; 
      display: block; 
      background: <virb get="customize.colors.text" />; 
      position: absolute; 
     } 
     .module.audio_player .length .progress { 
      height: 6px; 
      width: 0%; 
      display: block; 
      background: <virb get="customize.colors.link" />; 
      position: absolute; 
     } 
     .module.audio_player .length .time { 
      color: <virb get="customize.colors.text" />; 
      font-size: <virb get="customize.fonts.body_size" />; 
      position: absolute; 
      left: 157px; 
      top: -4px; 
     } 



/***** @group Cart widget *****/ 

.cart-widget { 
    width: 75px; 
    text-align: center; 
    position: fixed; 
    top: 100px; 
    right: 0; 
    z-index: 2000; 
} 

    .cart-widget .cart { 
    background: <virb get="customize.colors.line_page" />; 
    font-family: <virb get="customize.fonts.body_family" />; 
    font-size: <virb get="customize.fonts.body_size" />; 
    color: <virb get="customize.colors.text" />; 
    padding: 10px; 
    } 
    .cart-widget .cart span { 
     display: block; 
    } 
    .cart-widget .cart span.label { 
     font-size: .65em; 
     text-transform: uppercase; 
    } 
    .cart-widget .cart span.cart-total { 
     font-weight: bold; 
    } 

    .cart-widget .checkout { 
    background: <virb get="customize.colors.link_hover" />; 
    padding: 5px 10px; 
    text-transform: uppercase; 
    color: <virb get="customize.colors.background_page" />; 
    font-size: 9px; 
    display: block; 
    margin-top: 1px; 
    -webkit-transition: all .2s linear; 
     -moz-transition: all .2s linear; 
     -o-transition: all .2s linear; 
      transition: all .2s linear; 
    } 
    .cart-widget .checkout:hover { 
     background: <virb get="customize.colors.link" />; 
    } 

/***** @group Cart widget *****/ 



/* ---------- FOOTER ---------- */ 

div#footer { 
    width:960px; 
    margin:0 auto; 
    padding:25px 0; 
    font-family: <virb get="customize.fonts.footer_family" />; 
    color: <virb get="customize.colors.widget_text" />; 
}  

span#virb_customize_footer { 
    color: <virb get="customize.colors.footer_text" />; 
    padding-top: 10px; 
    width:100%; 
    display: block; 
} 


/* ie7 specific styles */ 

.ie7 .audio_player .controls .playpause a, 
.ie7 .audio_player .controls .prev a, 
.ie7 .audio_player .controls .next a { 
    font-size:0; 
    display: block; 
    line-height: 0; 
} 

/* ---------- SOCIAL LINKS WIDGET ---------- */ 
div.social-links ul { 
    margin:0; 
    padding:0; 
    list-style: none; 
    overflow: hidden; 
    } 

    div.social-links ul li a { 
     float:left; 
     display:block; 
     text-indent: -9999px; 
     }  

    div.social-links ul.large a { 
     width:64px; 
     height:64px; 
     margin:0 5px 5px 0; 
     } 

     div.social-links ul.large.simplebutton li a, 
     div.social-links ul.large.shinycircle li a, 
     div.social-links ul.large.shinybutton li a { 
      width:64px; 
      height:66px; 
      margin:0 5px 5px 0; 
     } 

    div.social-links ul.small li a { 
     width:32px; 
     height:32px; 
     margin:0 5px 5px 0; 
     } 

     div.social-links ul.small.simplebutton li a, 
     div.social-links ul.small.shinycircle li a, 
     div.social-links ul.small.shinybutton li a { 
      width:32px; 
      height:33px; 
      margin:0 5px 5px 0; 
     } 

HTML :

<!DOCTYPE html> 
<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]--> 
<!--[if IE 7 ]> <html lang="en" class="ie ie7"> <![endif]--> 
<!--[if IE 8 ]> <html lang="en" class="ie ie8"> <![endif]--> 
<!--[if IE 9 ]> <html lang="en" class="ie ie9"> <![endif]--> 
<html> 
    <head> 
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> 
<style type='text/css'> 
.accordion {margin:0px;border-bottom: 1px solid #e5e5e5;width: 300px}.accordion dt{padding-top:0px;padding-bottom:10px;font: 14px arial}.accordion dd {padding-top: 0px;padding-bottom: 10px;font-size: 12px}.accordion a {display: block;color: black;font-weight: bold;text-decoration: none}body{font: 12px arial}​ 
</style> 

<script type='text/javascript'>//<![CDATA[ 
    $(function(){ 
     (function($) { 

     var allPanels = $('.accordion > dd').show(); 

     $('.accordion > dt > a').click(function() { 
       $(this).parent().next('dd').slideUp(); 

     if($(this).parent().next().is(':hidden')) 
     { 
       $(this).parent().next().slideDown(); 
     } 

     return false; 
     }); 

    })(jQuery); 
    });//]]> 

</script> 

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> 
<style type='text/css'> 
.accordionbr {margin:0px;border-bottom: 1px solid #e5e5e5;width: 300px}.accordionbr dt{padding-top:0px;padding-bottom:10px;font: 14px arial}.accordionbr dd {padding-top: 0px;padding-bottom: 10px;font-size: 12px}.accordionbr a {display: block;color: black;font-weight: bold;text-decoration: none}body{font: 12px arial}​ 
</style> 

<script type='text/javascript'>//<![CDATA[ 
    $(function(){ 
     (function($) { 

     var allPanels = $('.accordionbr > dd').hide(); 

     $('.accordionbr > dt > a').click(function() { 
       $(this).parent().next('dd').slideUp(); 

     if($(this).parent().next().is(':hidden')) 
     { 
       $(this).parent().next().slideDown(); 
     } 

     return false; 
     }); 

    })(jQuery); 
    });//]]> 

</script> 

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> 
<style type='text/css'> 
.accordion2 {margin:0px;border-bottom: 1px solid #e5e5e5;width: 640px}.accordion2 dt{padding-top:0px;padding-bottom:10px;font: 14px arial}.accordion2 dd {padding-top: 0px;padding-bottom: 10px;font-size: 12px}.accordion2 a {display: block;color: black;font-weight: bold;text-decoration: none}body{font: 12px arial}​ 
</style> 

<script type='text/javascript'>//<![CDATA[ 
    $(function(){ 
     (function($) { 

     var allPanels = $('.accordion2 > dd').show(); 

     $('.accordion2 > dt > a').click(function() { 
       $(this).parent().next('dd').slideUp(); 

     if($(this).parent().next().is(':hidden')) 
     { 
       $(this).parent().next().slideDown(); 
     } 

     return false; 
     }); 

    })(jQuery); 
    });//]]> 

</script> 

    <!-- APOLLO --> 
    <virb load="title" /> 
    <virb load="meta" /> 
    <virb load="css" /> 
    <virb load="icon" /> 

    <!--[if lt IE 8]> 
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script> 
    <![endif]--> 
    </head> 

    <body class="get[page.type] get[page.format] get[page.class]"> 

    <!-- HEADER WRAPPER --> 
    <div id="header_wrapper"> 

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

     <div id="site_nav"> 
      <virb load="nav" /> 
     </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 --> 

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


    <!-- PAGE WRAPPER --> 
    <div id="page_wrapper"> 

     <!-- PAGE --> 
     <div id="page"> 
     <virb load="template" /> 
     </div> 
     <!-- END PAGE --> 

    </div> 
    <!-- END PAGE WRAPPER --> 


    <!-- FOOTER WRAPPER --> 
    <div id="footer_wrapper"> 

    <!-- FOOTER --> 
     <div id="footer"> 

     <!-- WIDGETS/SITE --> 
     <div id="widgets"> 
      <virb load="widgets" /> 
     </div> 
     <!-- END SIDEBAR --> 

     <p><virb customize="footer" /></p> 

     </div> 
     <!-- END FOOTER --> 

    </div> 
    <!-- END FOOTER WRAPPER --> 

    </body> 
</html> 

Answer 1

그것은이 순수 HTML이 아니기 때문에 말할 조금 어렵다 (그 virb 태그가 템플릿 태그 실제 html을 삽입 할 장소를 표시하십시오.), 그러나 <virb load="nav" /> 태그 뒤에는 #site_nav div 안에있을 것입니다. 그것들은 추가 된 탐색 목록 아래에있게되지만 여전히 오른쪽으로 떠있을 것입니다. 이와 같이 :

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

     <div id="site_nav"> 
      <virb load="nav" /> 
      <a href="..."><img src="..."/></a> 
      <a href="..."><img src="..."/></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 클래스 또는 스타일을 추가하십시오.