CODEWITHSUNDEEP
htmlcss
jaycss88
jaycss88

Reputation: 69

Stacking <li> Images

What am I missing from this to make these image links stack next to each other? Just simple image links with rollover controlled by CSS.

I feel like I'm missing a margin or a padding or something...

Any help would be greatly appreciated. 

/* Social */

.social-links {
	padding-top: 50px;
	position: relative;
	
	
}

.social-links-list li{
 	margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
	
}


.social-links-list li, .social-links-list a {
    height: 36px;
    display: block;
	float:left;
}

.twitter{
	float:left;
    width: 36px;
    background: url('deleted for example');
	background-size: 36px 36px;
}

.twitter a:hover {
    background: url('deleted for example');
	background-size: 36px 36px;
}

.facebook {
	float:left;
    width: 36px;
    background: url('deleted for example');
	background-size: 36px 36px;
}

.facebook a:hover {
    background: url('deleted for example');
	background-size: 36px 36px;
}

.youtube {
	float:left;
    width: 36px;
    background: url('deleted for example');
	background-size: 36px 36px;
}

.youtube a:hover {
    background: url('deleted for example');
	background-size: 36px 36px;
}

.linkedin {
	float:left;
    width: 36px;
    background: url('deleted for example');
	background-size: 36px 36px;
}

.linkedin a:hover {
    background: url('deleted for example');
	background-size: 36px 36px;
}

.blogs {
	float:left;
    width: 36px;
    background: url('deleted for example');
	background-size: 36px 36px;
}

.blogs a:hover {
    background: url('deleted for example');
	background-size: 36px 36px;
}

.googleplus {
	float:left;
    width: 36px;
    background: url('deleted for example');
	background-size: 36px 36px;
}

.googleplus a:hover {
    background: url('deleted for example');
	background-size: 36px 36px;
}
<div class="social-links">
	<ul class="social-links-list">
		<li class="twitter"><a href="#"></a></li>
		<li class="facebook"><a href="#"></a></li>
		<li class="youtube"><a href="#"></a></li>
		<li class="linkedin"><a href="#"></a></li>
		<li class="blogs"><a href="#"></a></li>
		<li class="googleplus"><a href="#"></a></li>
	</ul>
</div>

Upvotes: 1

Views: 44

Answers (2)

Paul Redmond
Paul Redmond

Reputation: 3296

You are positioning them on top of each other with position

How about inline-block

.social-links-list li{
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

http://codepen.io/anon/pen/adzaXa

Upvotes: 2

Aaron
Aaron

Reputation: 10440

Your problem is with the position: absolute; on the li.

.social-links-list li{
    margin: 0;
    padding: 0;
    list-style: none;
   /* position: absolute;  REMOVE THIS */
    top: 0;
}
.social-links-list {
    display: flex; /* ADD DISPLAY: FLEX; TO THE UL */
}

You should also remove all the float: left; styles applied to the anchors.

Upvotes: 1

Related Questions