CODEWITHSUNDEEP
htmlcss
user3241684
user3241684

Reputation: 7

placing my social icons in CSS

I have been adding social icons to the top of my webpage, i have been able to add 3 so far horizontally but not when ever i try and add another it just wont show, please would you look at my code if there is any mistakes, Thankyou

CSS; 

#social  {
top:18px;
left:15px;
height:32px;
width:500px;
position:absolute;
z-index:2;
}

.facebook {
background-image:url(../img/64_x_64px/facebook_dark.png);
height:32px;
width:32px;
background-size:32px;
display:inline-block;
}
.facebook:hover {
background-image:url(../img/64_x_64px/facebook_active.png);
}
.twitter {
background-image:url(../img/64_x_64px/twitter_dark.png);
height:32px;
width:32px;
background-size:32px;
display:inline-block;
}
.twitter:hover {
background-image:url(../img/64_x_64px/twitter_active.png);
}
.in {
background-image:url(../img/64_x_64px/in_dark.png);
height:32px;
width:32px;
background-size:32px;
display:inline-block;
}
.in:hover {
background-image:url(../img/64_x_64px/in_active.png);
}
.youtube {
background-image:url(../img/64_x_64px/youtube_dark.png);
height:32px;
width:32px;
background-size:32px;
display:inline-block;
}
.youtube:hover {
background-image:url(../img/64_x_64px/youtube_active.png);
}

HTML; 

<body>
<div id="social">
<div class="facebook"></div>
<div class="twitter"></div>
<div class="in"></div>
<div class="youtube"></div>
</div>
<div id="logo">
</div>
<div id="bar">
</div>
<div id="middle">
</div>
</body>
</html>

Thankyou for your help !

Upvotes: 0

Views: 153

Answers (1)

dev7
dev7

Reputation: 6369

It seems to be working fine.

Take a look at this JSFiddle

I added the following tag to the buttons:

float:left;

But it was working ok on my browser, even before. Maybe you are simply missing the 4th image?

Hope this helps!

Upvotes: 2

Related Questions