1 Reply Latest reply on Dec 30, 2011 5:33 PM by mytaxsite.co.uk

    Help needed

    Saedalama

      Hi,

      I am trying to move my social media icons to the very right side of my page. Here is my code:

      <body>

              <div id="container">

            <div class="header">

          <div class="content">

            <div class="logo">

                <a href="http://www.sijiewang.com/">

                    <span class="logo_img"></span>

              </a>

          </div>

         

                  <div class="navigation">

                  <div id="social_links">

                  <a href="https://twitter.com/#!/sijiewangDesign" target="_blank"><img src="images/twitter.png" alt="twitter" /></a>

                   <a href="http://www.facebook.com/pages/Sijie-Wang-Design/135183696495590" target="_blank"><img src="images/facebook.png" alt="Facebook" /></a>

                   <a href="http://www.linkedin.com/profile/view?id=65511320&trk=tab_pro" target="_blank"><img src="images/linkedin.png" alt="linked in" /></a>

                   </div>

                   <div xmlns="" id="drop_sort">

                  

                    <ul class="clearfix">

                      <li>

                        <a href="http://www.sijiewang.com" class="active">

       

                          <span>Home</span>

                        </a>

                      </li>

                      <li>

                        <a href="http://www.sijiewang.com/about/">

                          <span>About</span>

                        </a>

                      </li>

       

                      <li>

                        <a href="http://www.sijiewang.com/print/">

                          <span>Print</span>

                        </a>

                      </li>

                      <li>

                        <a href="http://www.sijiewang.com/web/">

                          <span>Web</span>

       

                        </a>

                      </li>

                      <li>

                        <a href="http://www.sijiewang.com/contact/">

                          <span>contact</span>

       

                        </a>

                      </li>

                    </ul>

                  </div>

      </div>

                <div class="clear"></div>

              </div>

             

      <body>

      </body>

       

       

      CSS Code:

      body {

          margin: 0;

          background: #FFF;

         

      }

      ol, ul {

          list-style: none;

      }

       

      table {

          border-collapse: separate;

          border-spacing: 0;

      }

      caption, th, td {

          text-align: left;

          font-weight: normal;

      }

       

      body {

          font: Normal 100%/1.5em Arial, Sans Serif;

          background: #FFF;

          margin: 0;

          padding: 0;

          color: #5e5e5e;

         

      }

      ul, ol, dl {

          padding: 0;

          margin: 0;

      }

      h1, h2, h3, h4, h5, h6, p {

          margin-top: o;

          padding-right: 15px;

          padding-left: 15px;

      }

      a img {

          border: none;

      }

      a:link {

          color: #535353;

          text-decoration: none;

          font-weight:bold;

      }

      a:visited {

          color: #6E6C64;

          text-decoration: none;

      }

      a:hover, a:active, a:focus {

          text-decoration: none;

      }

       

      a:defaultlinks {

          color: #600;

          text-decoration: none;

          font-family:Arial, Helvetica, sans-serif;

          font-weight:bold;

          font-size:13px/1.3em;

          font-size:100%;

      }

      #container {

          width: 900px;

          background: #FFF;

          margin: 0 auto;

      }

      .wrapper {

          background-color: #FFF;

         

      }

       

      .content {

          padding: 20px 0 ;

          width: 800px;

          min-height: 1000px;

          margin: 0 auto;

          float:right;

          background-position:center;

      }

       

       

       

      /* HEADER */

       

      .header {

          background-image: url(../../graphic%20design/website_sijiewang1/sijie/images/header.png);

          height: 180px;

          background-repeat:no-repeat;

          float: right;

          position:absolute;

      }

       

       

      .header .content {

          padding: 48px 0px 0 0px;

         

      }

       

       

      .header .logo {

          float: left;

      }

       

      .header .logo .logo_img {

          background: url(../../graphic%20design/website_sijiewang1/sijie/images/logo.png);

          display: block;

          width: 400px;

          height: 100px;

          background-repeat:no-repeat;

      }

       

       

      .header .navigation {

          padding-top:30px;

          float: right;

      }

       

      .header.social_links {

       

          float: right;

          display:block;

          margin-left: 5px;

       

      }

       

       

      /* HEAD */

       

      Thank you for your help . Much appreciated!

        • 1. Re: Help needed
          mytaxsite.co.uk Level 6

          If you post a link to your test page then somebody can help you out.  Your code is not correct as it stands and also, your CSS has some errors.  To move your social media to the right side then you should consider floating the entire DIV to the right.

           

          Hope this helps.