SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centering images with captions

    Hi,
    so, (cough, cough,) sorry, I've actually asked this once before but didn't get an answer, but it's come up on a different site & I'd like to figure it out. I have a row of images (in my example below, just 2). they have captions centered below them & they are sitting nicely side by side. However, they are in a container div, and I want them to sit in the center of the container div, side by side, in a row, and row upon row if necessary. I can do side by side, row upon row, but I can't get them centered.

    Here is my css:
    /* homepage rules */
    #wrapper { /* light green outer div */
    background-color: #93c273;
    padding: 2.5%;
    margin-top: 1em;;
    margin-right: 2em;
    margin-bottom: 1em;;
    margin-left: 2em;
    }

    #container { /* cream container div */
    background-color: #ece6c6;
    padding: 2em;
    margin-left: auto;
    margin-right: auto;
    }

    div.float {
    float: left;
    text-align: center;
    width: 140px;
    padding: 0.5em;
    }

    div.float p {
    text-align: center;
    }

    #purchase {
    clear: both;
    padding-right: 15%;
    padding-left: 15%;
    }
    and here is my html:
    <body>
    <img src="images/header3.gif" width="500" height="50">
    <div id="wrapper">
    <div id="container">
    <div class="float">
    <img src="images/home_jack.jpg">
    <br />
    <p>
    The Art Gallery
    </p>
    </div>

    <div class="float">
    <img src="images/home_untitledbronze.jpg">
    <br />
    <p>
    The Artist's Statement
    </p>
    </div>
    <div id="purchase">
    <img src="images/border.gif">
    </div>
    <!-- end cream container div -->
    </div>
    </div>
    </body>
    Hope I made sense! Any help would be appreciated!

  2. #2
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A problem I have seen before and the solution depends on how much extra data you are willing to provide.

    For instance if you are happy to say that all images have a given width iWidth(which you already have by setting the width of the float div) and that there will be a set number of images per row iCount then you can simply put all the floated images inside a containing div that will be iWidth*iCount wide and can be centered by setting both the left and right margin to auto.

    On the last line you may have to put in extra spacing divs if the line isn't full and you aren't willing to have the last row left justified.

  3. #3
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ideally, I had hoped that there was a solution that worked for images that didn't have a uniform width.

    For the specific page I am working on, which can be seen here:
    http://essenceofthemountains.com/tem...homepage4.html
    the images has small variations in width.

    However, as you can see in my css above, each image is in a class with a defined width of 140 (this is because without a defined width, these wouldn't sit side by side in mac ie, it needed a defined width or it was stacking them on top of each other.)

    So, I guess since I have 4 with a width of 140, I should be able to factor in padding and make the right size container div.

    Thanks for the pointer. So you are saying there is no way to center a row of images with captions in a liquid way--without putting them in a static sized container div?

  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)
    Thanks for the pointer. So you are saying there is no way to center a row of images with captions in a liquid way--without putting them in a static sized container div?
    I found the easiest solution was to attach the caption to the image in a graphics program and then just use text-align:center on the parent div. (You can use padding/margins to space them out a bit.) It's a bit of a pain I know

    Failing that you could do something like this assuming the images ar nearly the same width and you keep the captions a similar length.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>essence of the mountains - nature artwork by Robin August, Asheville, NC</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    body {
     background-color: #14402b;
     font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
     font-size: 75%;
     color: #666600;
     margin: 0;
     padding: 0;
     text-align: center;
    }
    a:link {
     text-decoration: underline;
     color: #666600;
    }
    a:hover {
     color: #DE8619;
    }
    a:visited {
     color: #14402b;
    }
    #header {
     margin-top: 0.75em;
    }
    /* homepage rules */
    #wrapper { /* light green outer div */
     background-color: #93c273;
     padding: 1.5em;
     margin-top: 1em;;
     margin-right: 3.7em;
     margin-bottom: 1em;
     margin-left: 3.7em;
    }
    #container {
     background-color: #ece6c6;
     padding: 1.5em;
     margin-right: 0.75em;
     margin-left: .75em;
     text-align:center;
    }
    #container img {padding:25px;}
    #container span{position:absolute; margin-left:-120px}
    #purchase {
     clear: both;
     padding-right: 15%;
     padding-left: 15%;
    }
    #purchase img {
     margin-bottom: 0.5em;
    }
    -->
    </style>
    </head>
    <body>
    <div id="header"><img src="http://essenceofthemountains.com/tem...es/header3.gif" width="500" height="50"></div>
    <div id="wrapper">
     <div id="container">
      <img src="http://essenceofthemountains.com/tem.../home_jack.jpg">
      <span>Caption 1</span>
      
      <img src="http://essenceofthemountains.com/tem...tledbronze.jpg">
      <span>Caption 2</span>
      
      <img src="http://essenceofthemountains.com/tem...irchleaves.jpg">
    	 <span>Caption 3</span>
      <img src="http://essenceofthemountains.com/tem...3_homepage.jpg">
      <span>Caption 4</span>
     <div id="purchase">
     <img src="http://essenceofthemountains.com/temp/images/border.gif">
     <br />
     <a href="purchase.html">Purchase the Artwork</a>: 
     <br />
     follow this link to email Robin about purchasing her artwork, or view 
     the <a href="gallery.html">gallery</a> to see 
     the variety of notecards, season's card and 
     photographs available.
     </div>
     <!-- end cream container div --> 
     </div>
    </div>
    </body>
    </html>
    Which is why I usually just resort to just floating the images and captions left and space them out with some padding

    You could use display:table-cell which I think (?) would accomplish what you want but IE doesn't support it unfortunately.

    Not much help I know.

    Paul

  5. #5
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your thoughts, I always appreciate them, Paul!

    Adding captions to the image--rough! I'll play around with the other options you have both suggested & see how it goes...

  6. #6
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Of course you could always use a table. I like css but there is some stuff that it doesn't do at all well and this is one of them.

    My tips would be, don't put in any attibutes that are not mandatory on any of the table tags, use css to format it.

  7. #7
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, funny you say that--I originally did this whole page as a table and the code above is me trying to redo it with css. I was hoping to make a tableless site, for once.

  8. #8
    SitePoint Enthusiast JasonRCS's Avatar
    Join Date
    Oct 2003
    Location
    Ohio
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by furryyuri
    Yeah, funny you say that--I originally did this whole page as a table and the code above is me trying to redo it with css. I was hoping to make a tableless site, for once.
    I am just learning about all the wonders of css, but here is a though:

    Could you use a list that is displayed inline to display the images and then center the list.

    Ex:

    Code:
     <ul>
       <li>image<b />text</li>
       <li>image<b />text</li>
     </ul>
    Just a thought, I have seen how you can make list display inline and thought this might work?????
    Jason

  9. #9
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting idea! ....they are lining up in a row, but no luck so far getting the <ul> to center. wrapped a div align="center" around it, tried putting it in a div with margin left right set to auto, also tried <ul align="center"> (I don't know if that's even valid). No luck yet...

  10. #10
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, align is not an attibute of div ( I think) and even if it is that is better done with css.

    Setting left and right margin on the div to auto will not work without setting it's width and the default with of a div is 100% of it's container meaning that centering it does not change it's position.

    Did you try setting the left and right margin of the ul to auto.

    On tables, not having tables on your site is not a Holy Grail that you should be aiming for. Tables have there place, if, for instance, you want to display tabulated data. What you should not be doing is using tables for your main page layout and you should certainly not be having any table cells with spacer gifs in them.

    To summerise you should be aiming for only having tables for those things that they were designed to do (displaying tabluate data).

  11. #11
    SitePoint Enthusiast JasonRCS's Avatar
    Join Date
    Oct 2003
    Location
    Ohio
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by furryyuri
    Interesting idea! ....they are lining up in a row, but no luck so far getting the <ul> to center. wrapped a div align="center" around it, tried putting it in a div with margin left right set to auto, also tried <ul align="center"> (I don't know if that's even valid). No luck yet...
    Try:

    text-align:center;

    in your Container Div CSS this with the <UL> should work..... I think?
    Jason

  12. #12
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope. In fact, I don't know what I was thinking when I said I got them to line up with <ul> because I can't duplicate. It's ok with just images but when I add the line breaks (for the captions) they are no longer in a row.
    Guess it just can't be done!

  13. #13
    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,

    I've tried before and came up with the same answers I've already given.

    However in a perfect world all it would take would be this.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    .outer {width:500px;
    border:1px solid red;
    text-align:center;
    display:table;
    }
    p {display:table-cell;}
    </style>
    </head>
    <body>
    <div class="outer">
    <p>image image<br />text
    </p>
    <p>image image<br />text
    </p>
    <p>image image<br />text
    </p>
     
    </div>
     
    </body>
    </html>
    Unfortunately it only works in Mozilla etc, ie doesn't understand it at all.

    That's probably made you feel worse now anyway

    Paul

  14. #14
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sigh...in a perfect world
    <beating head against wall>
    I can't believe there's no answer!

    btw, what's display: table-cell ?

  15. #15
    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)
    btw, what's display: table-cell ?
    It declares the element to be a table cell (like a td) and takes on the characteristics of a table cell. Therefore things like vertical align can be used to align inner elements within it.

    Paul

  16. #16
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ohhhh, that makes sense. Sorry, I'm a little brain dead--end of the day. Thanks again!

  17. #17
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But Paul, if you are going to declare a div to act as a table and fill it with p's declared
    as table cells then what is the difference between that and just putting in a table tag
    with some table cells inside it ?

  18. #18
    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 Benanfa,
    what is the difference between that and just putting in a table tag
    with some table cells inside it ?
    Well for one thing it's still not a table

    But granted theres not much code difference

    This:
    Code:
    <div class="outer">
    <p>image image<br />text</p>
    <p>image image<br />text</p>
    <p>image image<br />text</p> 
    </div>
    as opposed to this:
    Code:
      <table summary"This is a table used for layout">
    	<tr> 
    	  <td>image image<br />text</td>
    	  <td>image image<br />text</td>
    	  <td>image image<br />text</td>
    	</tr>
      </table>
    Obviously we avoid the "not using tables for layout" directive but it's all subjective anyway as we can only use this example on a minority of browers

    I'm not against tables and sometimes as you say a small table with css formatting is perfect for the job in hand. (I just like to try and do everything without them and to tell you the truth I never was much good at doing layouts with tables (not that my css designs are much better but I keep trying lol).

    In this instance a table probably is the only way to code the problem reliably. Although If I was doing it, I wouldn't bother with the centering and I'd just float them left. (Perhaps that's why I'll never be a good designer because I'm easily satisfied.)

    Paul


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
  •