SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Some centering help please

    page/site CSS file

    I have got a centering prob' with the above gallery and on the photos linked from it.
    the borders and shadows round the pics are generated by the CSS including a float left to get them to flow against one another, but I would like the rows of photos to align centrally. I can't really use a set of margin auto's
    ie.
    Code:
    	margin-right: auto;/*centres in compliant browsers*/
    	margin-left: auto;/* "	" */ 
    	width: 760px;
    as I want to be able to put different sizes and numbers of photos on each row, which would end up with a different overall size.
    The problem is similar on the pages for the bigger pictures, these are all different widths so I would need a separate class for each page if I used the usual method mentioned above I would have to set the width depending on the with of the photo on the page.

    Any insight would be useful, thanks

    P.S. if anyone looks at the page in Safari, yes I have seen the problem with the nav' at the top, I will get to in on tuesday.

  2. #2
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wish I could help with the centering problem but still learning. Just wanted to let you know in your Footer "Events" is misspelled.

    John

  3. #3
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a similar problem, but had to give up and go back to using the <center> html tag.

    I'll be watching to see what answers you get...
    Mikel
    Good decisions come from experience.
    Experience comes from making bad decisions.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you float the images then they will either be floated left or right (its a shame theres no float:center as it would be useful for situations like these )

    Your only option is to display the images as inline elements and to have text-align:center on a parent in order to center them.

    This would centre the images in the same way that any amount of text would be centred and they could be spaced apart with margins etc. However this makes it very difficult (if not impossible) for you to also caption the images and add those shaded borders. You could add the captions and borders to the actual image itself but I assume the captions may change anyway so its probably not feasible.

    If you must have the images centred and captioned then I hate to say it but a table would be the most sensible solution in this case. (or just left them float left)

    Paul

  5. #5
    SitePoint Enthusiast PurplePenny's Avatar
    Join Date
    May 2004
    Location
    Oxford
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its a shame theres no float:center as it would be useful for situations like these
    Since align=center is ubiquitous you would think that a replacement in CSS would have been one of the first things considered. Any idea why there isn't such a thing? It would certainly be useful.

    Penny

  6. #6
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes adding the borders to the images themselves would be the easy solution, but it would add extra size to the images, it also wouldn't look as good as the photos are better as jpeg's and the border is better as a gif the photos would end up with very low compression so not to mess up the border.
    What I may do is have one single celled table for each row of photos, would the cell's 'align=centere' work on the float?
    p.s. Thanks for spotting the spelling error, john.


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
  •