CSS Techniques for Image Placement

Instead of using the terms “left”, “right”, “top”, and “bottom”, you can change the position of elements using properties such as “margin”, “position”, or “float”. In order to center an icon at the end of a bar, you can experiment with these properties. However, be aware that changing the CSS code may result in unexpected outcomes, so it’s important to test your changes thoroughly.


Question:

I aim to place Facebook and Twitter buttons on my website with CSS, but my desired outcome is not being achieved.

My CSS is causing the Twitter and Facebook icons to shift positions when I resize the browser window. Although, the Facebook icon is consistently placed above the Twitter icon. Could you help me troubleshoot this issue?

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


Solution 1:

This may work for you. Although I am not an expert in CSS, I have managed to make it appear the way you desire.

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

To modify the rule, I inserted

float

into

facebook

and eliminated the

50px

padding from the

twitter

rule.

Regarding the edit, I have successfully used divs for my project. However, as you have used lists, I believe the issue arises from the combination of nested lists in your code.

Revise this URL: http://notails.com/development/positioningsocialnetworkingicons.html.


Solution 2:


Could you display the website, please? I require additional details about its structure, but you may attempt this instead.

Sorry for my English.


HTML:

  • Facebook
  • Twitter


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

Frequently Asked Questions

Posted in Css