SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sideways "Photo Album"?

    Greetings All,

    I am new to CSS and am doing a revamp of an existing site that has a number of pages in need of your expertise. I am going XHTML 1.0 strict and CSS without tables and would like to have a colum of pictures (paintings, really) on the right-hand side of a container with textural description of each painting to the left. The hard part for me is how to ensure that the vertical spacing between paintings is based off the bottom of the picture, and not off the text. The paintings are of different widths and heights. Thanks in advance for your wisdom!

  2. #2
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    London
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not quite what you're asking, but what you describe is a legitimate application for a table: it's essentially tabular data you're presenting.

    Having said that, it should be do-able with css. Think the key will be to enclose each "picture-text pair" in a div - that will let you control the spacing... even if the text happens to take up more vertical space than the picture.

    Within the div there are various options... perhaps a pair of divs of fixed width (one for the text, one for the image) floated left? (You'll need to follow the pair with another div with clear:both to force the containing div expand.)

    Does that get you going again?

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Gary.

    I suppose it does appear to be more of a table--and I thought about using tables--but somehow that doesn't quite "feel" right for the aesthetic look I'm trying to create. Currently I have each pic-text pair enclosed in <p>. In my CSS I have an #album container with the following additions:

    #album p {
    clear: left;
    font: 80%/1.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding: 5px 5px 80px 10px;
    }

    #album img {
    float: left;
    border: 2px solid #000000;
    margin-right: 15px;
    margin-bottom: 6px;
    }

    The padding in the #album p gets me the verticality, but it is driven by the text, not the pic. The padding attribute does not appear to function as expected when applied to the img, which was my first thought. I think it must be something quite simple and I see that I'm almost there, but almost isn't good enough this time! Any further thoughts?

  4. #4
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    London
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How have you arranged your <p> and <img>? Would work if you do it like this:

    HTML Code:
    <p><img src="images/picture.gif" alt="">Image text</p>

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think it is a table. A table indicates columns and rows. A picture and description doesn't really constitute tabular data. What you're after may be better suited to a definition list. Take a look at some of the examples at http://www.maxdesign.com.au/presentation/definition/

  6. #6
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    London
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We're getting slightly off subject here... but can't resist a comment, Tyssen. If picture+description doesn't constitute tabular data - and I concede that it's a bit of a stretch - then it's hard to see how they could be considered to be term+description (or the other way around).

    But I agree that a DL could be a good choice here (!)

  7. #7
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're probably right that a dl doesn't really describe a picture/caption combination but when you have more than one pic/cap combination, you end up with a list of them and of the three lists available, the dl somehow seem more appropriate although I s'pose it could just as easily be an unordered list with <img> and <p> inside.

  8. #8
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    London
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Agreed. (Must say I have a soft spot for DLs - easier to style than ul/ols)

  9. #9
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    GaryS and Tyssen,

    Thank you both for your thoughts. I have played with both designs and the <p> has a certain economy I like. The DL has the semantic binding I was looking for (my text is more than caption, btw). Still, my overall problem remains: I can not seem to find the right CSS code to make sure that the vertical space between images is consistent within the album division. I feel as though I'm missing something quite obvious. Have you seen any examples of the type of album I'm describing?

  10. #10
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    London
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As long as the height of the text didn't exceend that of the image, then this...

    <p><img src="images/picture.gif" alt="">Image text</p>

    ... together with this...


    #album p {margin-bottom: 20px}

    ... will give the consistent vertical spacing. Which makes me think we've misunderstood your request?
    Last edited by GaryS; Jun 19, 2006 at 02:30.

  11. #11
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    uk
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thinking semanticaly, I would have to agree with Tyssen treating this as a definition list. The information used here is not tabular - I think it just gets confusing when throwing in the image combined with how the original poster explained the problem. Dan Cederholm creates this exact scenario in "Bulletproof Web Design" and uses DLs to style it. I'll dig out the code later if you still need any assistance?

  12. #12
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    GaryS--Thank you so much. I've had to add quite a bit more than just a bottom margin to get it to work. Here's the final code--perhaps you can tell me what to strip to decrease the size. Everytime I remove something from p or img things don't work right. It does not work with album p alone.

    whintersby--I'd love to see that code in the interest of learning. I still haven't committed one way or another to p or dl.

    #album {
    border: 2px solid #000000;
    background-color: #B3B997;
    padding: 15px 15px 15px 15px;
    margin: 20px 10px 20px 10px;
    }
    #album p {
    font: 80%/1.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding: 10px 10px 10px 10px;
    margin-bottom: 50px; /*This gets me back into album; otherwise bottom img overshoots the bottom of the album*/
    clear: left;
    }
    #album img {
    border: 2px solid #000000;
    vertical-align: top;
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
    }

  13. #13
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    London
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've caved in and gone the definition list route:

    HTML Code:
    <style type="text/css">
    <!--
    #album {
    border: 2px solid #000000;
    background-color: #B3B997;
    padding: 15px 15px 15px 15px;
    margin: 20px 10px 20px 10px;
    
    width: 400px; /*added to check long text */
    }
    dl{
    clear: both;
    margin-bottom: 10px;
    }
    dd {
    font: 80%/1.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
    float: left;
    padding: 10px 10px 10px 10px;
    }
    dt {
    vertical-align: top;
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
    
    /* probably want to give this a width greater than you're widest image */
    
    }
    .spacer{
    line-height:0;
    clear: both;
    }
    HTML Code:
    
    <div id="album">
    <dl>
       <dt><img src="images/logo.gif" alt=""></dt>
       <dd>Photo caption</dd>
    </dl>	 
    <dl>
       <dt><img src="images/logo.gif" alt=""></dt>
       <dd>Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption Very long photo caption </dd>
    </dl>	 
    <dl>
       <dt><img src="images/logo.gif" alt=""></dt>
       <dd>definition of the word</dd>
    </dl>	 
    	 	 
    <div class="spacer">&nbsp;</div>
    	 
    </div>
    Note the slight hack at the end to force the containing div tro expand.

  14. #14
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by GaryS
    I've caved in and gone the definition list route:

    <code snipped>

    Note the slight hack at the end to force the containing div tro expand.
    The hack is very useful to me. Thanks! As I said, I'm new to CSS. The choice now between p and dl is an interesting one to me. The CSS code for both is essentially the same, but the markup for the dl is considerably more involved. In a small project one can afford to be a purist. I will have several hundred images spread across many pages, however... At least I've accomplished the goal of not using a table, thanks to all of you. Although off-topic, I'm still interested in hearing principled reasons why the dl should be used over the p in this application.


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
  •