在CSS中定位图片

Question

My goal is to position a Facebook and a Twitter button on my website, using CSS. However, what I want doesn't seem to work.

The Twitter icon always sits below the Facebook icon. Also when I resize my browser's window the position of these buttons changes. What am I doing wrong? Here is my CSS:

#social {
   position: fixed;
   _position: absolute;
   z-index: 1000;
   left:70%;
   top: 120px;
   width: 100px;
   height: 50px;
}   

#social .facebook {
   float: left;
   width: 35px;
   height: 35px;
   padding: 0 0px 0 0px; /* top, right, bottom, left */
   margin: 0;
   list-style: none;
}

#social .twitter {
   float: left;
   width: 35px;
   height: 35px;
   padding: 0 0px 0 50px; /* top, right, bottom, left */
   margin: 0;
   list-style: none;
}

#social .facebook, .twitter li {
   list-style: none;
}

#social .facebook, .twitter li a {
   text-decoration: none;
}

#social .facebook, .twitter li a img {
   border: none;
}

The HTML:

<div id="social">  

<ul class="facebook">
<li><a href="http://www.facebook.com/"><img src="img/facebook-button.png" width="35"    height="35" alt="Facebook" title="Volg ons op Facebook" /></a></li>
</ul>    
<ul class="twitter">
<li><a href="http://www.twitter.com/"><img src="img/twitter-icon.png" width="35" height="35" alt="Twitter" title="Volg ons op Twitter" /></a></li>
</ul>

</div>

Answer 1

Try this? (IANA css expert, but I got this to look as I think you want it to look)

#social {
    z-index: 1000;
    float:right;
    margin-top:120px;
    width:100px;
    height:50px;
}   

#social .facebook {
    width:35px;
    float:left;
    height:35px;
    padding:0 0px 0 0px; /* top, right, bottom, left */
    margin: 0;
    list-style:none;
}

#social .twitter {
    float: left;
    width:35px;
    height:35px;
    padding:0 0px 0 px; /* top, right, bottom, left */
    margin: 0;
    list-style:none;
}

#social .facebook, .twitter li {
    list-style:none;
}

#social .facebook, .twitter li a {
    text-decoration:none;
}

#social .facebook, .twitter li a img {
    border: none;
}

I added a float to the facebook rule, removed the 50px padding from the twitter rule.

Edit: Mine works using divs. but you use lists, so I think the nested list combination is causing yours to break.

<div id="social">
    <div class="facebook">
        <a href="o-vita.nl/">
            <img src="img/facebook-button.png" width="35" height="35" alt="Facebook" title="Volg ons op Facebook" />
        </a>
    </div>
    <div class="twitter">
        <a href="o-vita.nl/">
            <img src="img/twitter-icon.png" width="35" height="35" alt="Twitter" title="Volg ons op Twitter" />
        </a>
    </div>
</div>

Edit: http://notails.com/development/positioningsocialnetworkingicons.html

Answer 2

Hm, can you show me the website? Because I need to know more information about your website structure, however you can try this.

Sorry for my English.

HTML:

<div id="social">
  <ul>
    <li><a href="http://www.facebook.com/"><img src="img/facebook-button.png" width="35"    height="35" alt="Facebook" title="Volg ons op Facebook" /></a></li>
    <li><a href="http://www.twitter.com/"><img src="img/twitter-icon.png" width="35" height="35" alt="Twitter" title="Volg ons op Twitter" /></a></li>
  </ul>
</div>

CSS:

#social {
  position:fixed;
  _position:absolute;
  z-index:1000;
  left:70%;
  top:120px;
  width:100px;
  height:50px;
}

#social ul{
  list-style:none;
  margin:0;
  padding:0;
}

#social li{
  float:left;
  width:35px;
  height:35px;
  margin:0 3px;
}

#social a{
  text-decoration:none;
}

#social a img {
   border:none;
}