Sign in to follow this  
Followers 0
Copernic

CSS - Aligning images horizontally

7 posts in this topic

I'm new to CSS and am trying to figure out what the best way is to align 3 or more images horizontally with some text on the top.

 

Something like this:

 

SVHuYJk.jpg

 

 

live example on Winamp website (follow us box, right side):

http://www.winamp.com/

 

I searched everytwhere on the web but I stumbled on a lot of unnecessary stuff for Wordpress etc... Until now I have just this but no CSS:

<div id="social">
<p>FOLLOW US ON SOCIAL SITES</p>
    <ul>
    <li><a href="http://www.youtube.com/user/example"><img src="images/youtube.png" alt="youtube"></a></li>
    <li><a href="http://www.twitter.com/example"><img src="images/twitter.png" alt="twitter"></a></li>
    <li><a href="http://www.facebook.com/example"><img src="images/fb.png" alt="facebook"></a></li>
     </ul>
</div>

Thanks!

Share this post


Link to post
Share on other sites
#social ul li {
float:left;
}

/* or */ 

#social ul li {
display:inline-block;
}
4 people like this

Share this post


Link to post
Share on other sites

Very hard to do it! :blush: Thank you and God Bless!

Share this post


Link to post
Share on other sites

inline-block wont work under ie6 and will work only for inline level elements under ie7 (li is a block level element).

 

If you need ie6 and ie7 support use the first option.

Share this post


Link to post
Share on other sites

I'd suggest to always use float and only use inline-block when you have no other choice because of browser support ;)

Share this post


Link to post
Share on other sites

I'd suggest to always use float and only use inline-block when you have no other choice because of browser support ;)

I would say Ie8+ is pretty good browser support :p. While it does depend on the situation, it does save you from having to deal with clearing floats. 

Share this post


Link to post
Share on other sites

I'd suggest to always use float and only use inline-block when you have no other choice because of browser support ;)

 

Well you don't always need or even want to support ie6 and ie7.

 

What he really wants to do is changing the display to inline-block. Float removes the elements from the normal flow of the web page and float it right or left. It can cause display problems if you don't properly understand what float is and what it does specially if you over use it in context it should not really be used.

 

My advise is to use inline-block because this is what he wants to do. If ie6 and ie7 support is really needed then float could be used or the list dropped. The list makes sense as far as semantic goes but when you want to support ie6 you must be ready to cut some corners.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.