[ solved ] lining up social media icons in a block

[verhoej]

Hi,

 

I have this piece of code for lining up vertically the socila media icons in a left column block.

 

<center><a href="http://pinterest.com/byxanthe/" target="_blank"><img src="/winkel/modules/wcontent1/imgs/pinterest.png" alt="Pinterest"/></a></center>

<center><a href="http://www.linkedin.com/pub/byxanthe-sieraden/4b/335/a15/" target="_blank">

<img src="/winkel/modules/wcontent1/imgs/linkedin.png" alt="LinkedIn"/></a><center>

<center><a href="http://www.facebook.com/pages/ByXanthe/173409289432313/" target="_blank">

<img src="/winkel/modules/wcontent1/imgs/fb_1.png" alt="Facebook"/></a></center>

<center><a href="http://twitter.com/#!/Byxanthe/" target="_blank">

<img src="/winkel/modules/wcontent1/imgs/twitter_1.png" alt="Twitter"/></a></center>

 

Now i want to line them up horizontal....but cant get it to work.

any help appreciated

Edited June 12, 2012 by verhoej (see edit history)

[cocothecat]

It can be neater than this but try:

 

 

<ul id="social">

<li><a href="http://pinterest.com/byxanthe/" target="_blank"><img src="/winkel/modules/wcontent1/imgs/pinterest.png" alt="Pinterest"/></a></li>

<li><a href="http://www.linkedin.com/pub/byxanthe-sieraden/4b/335/a15/" target="_blank">

<img src="/winkel/modules/wcontent1/imgs/linkedin.png" alt="LinkedIn"/></a></li>

<li><a href="http://www.facebook.com/pages/ByXanthe/173409289432313/" target="_blank">

<img src="/winkel/modules/wcontent1/imgs/fb_1.png" alt="Facebook"/></a></li>

<li><a href="http://twitter.com/#!/Byxanthe/" target="_blank">

<img src="/winkel/modules/wcontent1/imgs/twitter_1.png" alt="Twitter"/></a></li>

</ul>

 

 

CSS

#social li

{

display: inline;

list-style-type: none;

padding-right: 20px;

}

 

Obviously changing the right padding will alter the spcaing if one gets pushed onto the next line try to change the spcaing to 10px or less

Edited June 12, 2012 by cocothecat (see edit history)

[verhoej]

thanks very much...it works

[cocothecat]

No problem glad I could help

[farnamjam]

thanks