Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Thanked 1 Time in 1 Post

    Spacing Images apart in a <ul>

    If you take a look at this site here:


    Notice the top menu (home, bikes, my account, etc).

    Those are basically just .png images in a <ul>

    However, I would like to space those images out horizontally, so the menu should take up about 50% of the width of that entire bar.

    Is there a simple way to do this in CSS, or should I just recreate the images themselves with wider dimensions to space it out?


  2. #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,874 Times in 1,858 Posts
    Hello BlackReef,
    I'm not sure why you have that menu nested in 3 containing elements, #menu, #mainMenu and #electraMenu. Have a look at divitis and how to avoid it.

    You also have heights and widths of containing elements set too small to contain the elements you've placed in them. Your menu is much taller than 11px so I'm not sure why .mainMenu would be that hight.

    To space out your li elements, just use some margin... something like this -
    .menu ul li a {
        color: #FFFFFF;
        float: left;
        margin: 0 20px;
        padding-left: 11px;
        padding-right: 11px;
        text-decoration: none;
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  3. Users who have thanked Excavator for this post:

    BlackReef (12-11-2012)

  4. #3
    Regular Coder
    Join Date
    Apr 2010
    Thanked 1 Time in 1 Post
    Thanks Excavator! Ya Im working with an older system that has been through several revisions before my time. I just want to massage the CSS for now until we start with a new ecommerce platform. There is a ton of junk CSS/code

    Thanks again!


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts