Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Centering images in variable width UL!!!!

Bottom of Page

1 to 8 of 8

  1.  
    •  
      CommentAuthorbenjitastic
    • CommentTimeMar 14th 2006 edited
     permalink
    (link)

    I have tried many things and cannot seem to be able to center the images in the page (it's elastic). Any help would be greatly appreciated...thanks!
    • CommentAuthormaspick
    • CommentTimeMar 15th 2006
     permalink
    Ben -

    Have you tried adding the following to your hoverbox class? margin: 0 auto;
  3.  permalink
    I tried that, but it didn't work. The ul with the class hoverbox has no defined width and you can't apply margin: auto to anything with an undefined width.

    Thanks anyway!

    Any more ideas!?
    • CommentAuthorKanashii
    • CommentTimeMar 16th 2006
     permalink
    text-align: center;?
  5.  permalink
    yes that would work if my LI's were not floated left.

    I'm starting to think there is no way...
    • CommentAuthorMcJay
    • CommentTimeMar 17th 2006 edited
     permalink
    Nope.. there ain't any way you can accomplish that with floated list-items.. You have to make them inline: http://24ways.org/advent/centered-tabs-with-css
    •  
      CommentAuthoranblik
    • CommentTimeMar 17th 2006 edited
     permalink
    Hello ben,

    If you noticed, <UL class=hoverbox> element being thrown out of "main-content" area to the extreme right. using DOM, you can clearly see it in IE. But <LI> elements declared within <UL> are in its place.

    If you follow this calculation, you will get everything centered aligned.

    1. .hoverbox : declare a WIDTH:90%, define MARGIN: 0 auto (please remove all other margin defined in this class.

    2. .hoverbox LI : now declare a WIDTH: 22% to <LI> element.

    Hope it will work.
  8.  permalink
    anblik,
    Thanks, that works well if you're viewing it in a 1024px wide screen. As soon as I decrease the width of the page the pictures start overlapping each other. This is because of the <LI>s having a percent width (they need to be fixed width).

    McJay,
    Thanks for the link, I'll check it out.

1 to 8 of 8

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page