CODEWITHSUNDEEP
htmlcss
Frank G.
Frank G.

Reputation: 1579

Social Media Icons Wont Lay Side By Side

I can't seem to figure this out. I know its easy for most. I have used float left and right but I can't seem to get the Three Social Media icons at the very top of the site to lay down side by side.

You can find the site here: http://cmrlawenforcement.com/default.asp

Here is the HTML:

<div class="socialcontainer">
<span class="connect info">
<ul>
  <li><a href="https://www.facebook.com/pages/CMR-Law-Enforcement-Testing-    Review/100299806688670" title="Be our friend" target="_blank" class="facebook">Facebook</a>        </li>
  <li><a href="https://twitter.com/cmr_policeprep" title="Follow us!" target="_blank" class="twitter">Twitter</a></li>
  <li><a href="http://www.linkedin.com/profile/view?    id=37905494&authType=NAME_SEARCH&authToken=Xbtq&locale=en_US&srchid=695550441389940130460&srchindex=1&srchtotal=333&trk=vsrp_people_res_name&trkInfo=VSRPsearchId%3A695550441389940130460%2CVSRPtargetId%3A37905494%2CVSRPcmpt%3Aprimary" title="Let's connect" target="_blank" class="linked">LinkedIn</a></li>
</ul>
</span>
</div>

Here is the CSS for it:

 /* Social Media Sprites */
 .socialcontainer {float: right; width 300px;}

 .connect ul {
  list-style: none;
      margin: 0;
      padding-right: 15px;
 }
 section.connect li {

      margin: 7px 0;
      margin-right: 5px;
 }
 .connect li a{
      display: block;
      width: 24px;
      height: 24px;
      text-indent: -999em;
      background: url(../images/menubar/socialmedia_sprites.png) no-repeat;
 }
 .connect li:last-child {margin-right: 0;}
 .connect a.facebook {background-position: left top;}
 .connect a.facebook:hover {background-position: left bottom;}
 .connect a.twitter {background-position: -24px top;}
 .connect a.twitter:hover {background-position: -24px bottom;}
 .connect a.linked {background-position: right top;}
 .connect a.linked:hover {background-position: right bottom;}

For the life of me I can't seem to figure out what is causing them to all stay on top of each other. Can any suggest what I am doing wrong?

Note: The social media icons are a sprite but I don't believe that would cause the problem.

Let me know if you have any questions?

Thank you! Frank

Upvotes: 0

Views: 1776

Answers (2)

Jordan Foreman
Jordan Foreman

Reputation: 3888

Looks like you've already accepted an answer, but I'd hate to let this fiddle go to waste:

jsFiddle

HTML

<ul>
    <li><a href="#" class="facebook">Facebook</a></li>
    <li><a href="#" class="twitter">Twitter</a></li>
    <li><a href="#" class="linkedin">LinkedIn</a></li>
</ul>

CSS

ul
{
    list-style-type: none;    
}

ul li
{
    display: inline-block;
}

ul li a
{
    display: block;

    background: url('http://cmrlawenforcement.com/images/menubar/socialmedia_sprites.png');
    background-repeat: no-repeat;

    height: 24px;
    width: 24px;

    color: transparent;
}

.facebook
{
    background-position: 0 0;
}

.facebook:hover
{
    background-position: 0 -24px;
}

.twitter
{
    background-position: -24px 0;
}

.twitter:hover
{
    background-position: -24px -24px;
}

.linkedin
{
    background-position: -48px 0;
}

.linkedin:hover
{
    background-position: -48px -24px;
}

Upvotes: 1

j08691
j08691

Reputation: 207901

Add:

.connect li {
    float:left;
}

Or:

.connect li {
    display:inline-block;
}

Your list items have default styling, so to get them next to one another you need to change the display or float property.

Upvotes: 1

Related Questions