...

View Full Version : Aligning icons



LearningCoder
01-15-2011, 10:58 PM
Hi, I am trying to put links next to each other inside a <div> but using icons as the links.

So i'm looking to put YouTube, Facebook, Amazon etc but I want them next to each other. So far I have:


<div class="iconlinks">
<ul>
<li><a href=".............">...........</a></li>
<li><a href=".............">...........</a></li>
<li><a href=".............">...........</a></li>
<li><a href=".............">...........</a></li>
<li><a href=".............">...........</a></li>
<li><a href=".............">...........</a></li>
</ul>
</div> a basic layout.

I need help with the CSS if anyone could be so kind.

:thumbsup:

VIPStephan
01-15-2011, 11:27 PM
Well, the appropriate CSS would be to float the list items left: .iconlinks li {float: left;}, maybe in conjunction with a right margin. However, if it’s just icons I would just put them as plain (image) links and they will align horizontally by default.



<div class="icons">
<a href=""><img src="…" alt="Amazon" /></a>
<a href=""><img src="…" alt="Facebook" /></a>
<a href=""><img src="…" alt="Twitter" /></a>


</div>

LearningCoder
01-15-2011, 11:53 PM
Thank you done it now. Quite basic stuff really! :o

Excavator
01-16-2011, 12:03 AM
Hello LearningCoder,
You see a lot of sprite images for this. Like this one - http://www.fhoke.com/blog/wp-content/uploads/2009/02/social-icons.png


See example -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
width: 1000px;
margin: 30px auto;
padding: 50px 0 300px;
background: #999;
}
ul#iconlinks {
padding: 0;
list-style-type: none;
overflow: auto;
background: #fff;
}
#iconlinks li {
display: block;
overflow: hidden;
float: left;
margin-right: 2px;
}
#iconlinks li a{
height: 140px;
width: 140px;
display: block;
}
a#twitter {background: url(http://www.fhoke.com/blog/wp-content/uploads/2009/02/social-icons.png) 315px 315px;}
a#facebook {background: url(http://www.fhoke.com/blog/wp-content/uploads/2009/02/social-icons.png) 2px 315px;}

</style>
</head>
<body>
<div id="container">
<ul id="iconlinks">
<li><a href="#" id="twitter"></a></li>
<li><a href="#" id="facebook"></a></li>
<li><a href="#">...........</a></li>
<li><a href="#">...........</a></li>
<li><a href="#">...........</a></li>
<li><a href="#">...........</a></li>
</ul>
<!--end container--></div>
</body>
</html>

LearningCoder
01-16-2011, 12:47 AM
Ah they're pretty cool, that's what I had in mind when I thought about putting the icons on my page. I've decided to just do each individual icon though becase I want my background behind them. Cheers though, i'll save that.

BTW - The url that is in the code for the 'a#facebook' doesn't work.

Excavator
01-16-2011, 01:04 AM
BTW - The url that is in the code for the 'a#facebook' doesn't work.

There is no url there. Only a # for a placeholder.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum