Icon alignment help

I'll be honest here, when it comes to code, I'm slightly behind the times. I prefer design, and am trying to set up a little landing page I made.

vaoko.com

Now I have no idea how to align the icons in "landscape" or horizontally next to each other.

Is my code that bad or is there a simple fix?

Any help would be great.

 

Nice design. I love the color combo. Yes, a simple fix is available. Here is what you'll have to do.

You'll have to use unordered <ul> list items <li> and style the list items. You can use the below code.

First a little twist to your mark up; use <li> tag to your items (icons)

<div id="social">
<ul>
<li><a href="http://vaoko.com/#" title="I'm an Apple Fanboi!" class="ap"></a></li>
<li><a target="_blank" href="http://twitter.com/richardshank" title="Follow me on Twitter!" class="tw"></a></li>
<li><a target="_blank" href="http://www.facebook.com/richard.shank" title="Connect with me on Facebook!" class="fb"></a></li>
<li><a target="_blank" href="mailto:rick@vaoko.com" title="Request a quote!" class="ma"></a></li>
</ul>
</div>

Code (markup):

Now style the lists. Add the below style to your css

#social {
margin: 0px auto;
padding-top: 20px;
[B]width:37px; [/B][COLOR="Red"]<-- Remove This; this acting as wrapper for the ul and if it is defined so less then li items won't spread horizontally; don't define any width if you don't need to -->[/COLOR]
}
#social ul {
margin: 0;
padding: 0;
list-style-type: none; 
}
#social ul li { 
display: inline; [COLOR="DarkGreen"]<-- this will make sure lists are spread horizontally -->[/COLOR]
margin:0px 5px; [COLOR="DarkGreen"]<-- creates some gaps between items(icons); try avoiding use "padding" to avoid cross-browser issues -->[/COLOR]
}
#social ul li a {
display:inline-block;
}

Code (markup):

you can remove "display:block" from .ap, .tw, .fb, .ma as your are defining at #social ul li a {display:inline-block;}

Hope this will help you. Shoot any queries if not resolved.

 

@radiant_luv I can't thank you enough! It works perfectly. To center the UL I added text-align: center; is this fine or is there a better way of doing so?

Once again many thanks

 

I'm glad that helped. text-align:center to the div social is perfectly okay. I don't think you'll have more content within that wrapper div, if you would had it those would have been aligned to center as well.