SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image menu and making content fit a div

    So I'm making an image menu that needs to be centered inside a div, I have 5 images with different widths that are inside this div, they are all the same distance apart, like so:

    image1.....image2.....imaga3.....image4.....image5

    I started thinking, how am I going to create such distance between the images so that they fit my div perfectly? I remembered some time ago making a menu just like this, except it only used text, no images.

    I used the word-spacing tag in CSS to create such distance, and it worked fine. So my solution was to use   between my images:


    image1  .....image2  .....imaga3  .....image4  .....image5

    This works flawlessly in Firefox, but I'm having an issue in Chrome, I only get this effect if I use DOUBLE   , which of course, breaks it in Firefox:

    image1    .....image2    .....imaga3    .....image4    .....image5

    Is there something I'm missing here? Maybe there's a more elegant answer for my menu? Any help is appreciated.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Yes, don't use use HTML to get a visual (presentational) result. Instead, use something like margin or padding. We need to see your page to be sure, but a way to go about this is to make an unordered list (<ul>) with each <li> containing an image. Set the <li>s to display: inline block and text-align: center. That will center the items inside the div. Then add left-right margins to get them the right distance apart.


Bookmarks

Posting Permissions

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