Позиционирование изображений в CSS

Question

Моя цель - разместить кнопку Facebook и Twitter на моем веб-сайте, используя CSS. Однако то, что я хочу, похоже, не работает.

Значок Twitter всегда находится ниже значка Facebook. Также, когда я изменяю размер окна моего браузера, положение этих кнопок изменяется. Что я делаю неправильно? Вот мой 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;
}

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

Попробуйте это?(Эксперт IANA по css, но я выглядел так, как я думаю, вы хотите, чтобы он выглядел)

#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;
}

Я добавил float к правилу facebook, удалил заполнение 50px изtwitter rule.

Редактировать: Шахта работает с использованием divs.но вы используете списки, поэтому я думаю, что комбинация вложенных списков приводит к разрыву вашей.

<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>

Редактировать: http://notails.com/development/positioningsocialnetworkingicons.html

Answer 2

Хм, можешь показать мне сайт?Потому что мне нужно знать больше информации о структуре вашего сайта, однако вы можете попробовать это.

Извините за мой английский.

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