SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image and Title Next to it using CSS

    Hi,

    I am completely new to CSS and would like to display a thumbnail with its title to the right of the thumbnail. How do i do this without use of tables.

    Something similar to below:

    ************
    *
    Thumbnail * Title
    *
    *
    ************

    Thanks for your help

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi HalfMan. Welcome to SitePoint.

    You could do this in several ways, depending on how important the tumbnail is. Is it just for decoration, or should it be in the html itself? It might help if you showed us what you would have done with tables, so that we cet a better sense of what you are trying to achieve.

  3. #3
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is a difficult question to answer without more information.

    Typically you would float the thumbnail left and let the text flow across the page. Or you could float them both left, both right, or one left, one right, or float the title right and let the thumbnail flow down the page.

    It all depends on what exactly you are trying to achieve.

  4. #4
    SitePoint Member
    Join Date
    May 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response. In a table i would have done it like so:


    <table>
    <tr>
    <th rowspan="2">Image Goes Here</th>
    <td>Image Title Here</td>
    </tr>
    <tr>
    <td>Item Price Goes Here</td>
    </tr>
    </table>

    I hope this helps

  5. #5
    SitePoint Member
    Join Date
    May 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please checkout: Stationery

    I would like to have a thumbnail with its title next to it.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You could do something like this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    <style type="text/css" media="all">
    .imgHolder {float: left; margin: 0 10px 10px 0;}
    </style>
    </head>
    
    <body>
    <div>
    <p class="imgHolder"><img src="image.gif" alt="item image"></p>
    <p>Image Title Here</p>
    <p>Item Price Goes Here</p>
    </div>
    
    </body>
    </html>

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Or this (based on your link):

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    <style type="text/css" media="all">
    .item {width: 400px; background: #cdf2bf; margin: 2px 0;}
    .item img {vertical-align: middle; margin-right: 10px;}
    </style>
    </head>
    
    <body>
    
    <p class="item"><img src="image.gif" alt="item image">Image Title Here</p>
    <p class="item"><img src="image.gif" alt="item image">Image Title Here</p>
    
    </body>
    </html>

  8. #8
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by HalfMan View Post
    Please checkout: Stationery

    I would like to have a thumbnail with its title next to it.
    When styling things like that, I typically float the image left and leave the text to flow around it. Then I apply overflow: auto to the containing block to make sure it expands to fit the whole thumbnail (otherwise the thumbnail will pop out of the box) and set the title to display: inline to make sure it flows around the float rather than popping down below it (due to taking up the complete width of the box) or setting a fixed width on it if you know for certain how wide the containing box will be.

    Code CSS:
    .container {
       overflow: auto;
    }
    img {
       float: left;
    }
    h3 {
       display: inline;
    }

    Code HTML4Strict:
    <div class="container">
       <img src="#" />
       <h3>Some random text here</h3>
    </div>


    If there is a risk that the text could flow below the image, then you would generally want to set the heading to display: block and used a fixed width and float it to the right to prevent the text flow around the image, which tends to look a little weird. This doesn't work if the containing block isn't a fixed width though.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    and set the title to display: inline to make sure it flows around the float rather than popping down below it (due to taking up the complete width of the box)
    It wouldn't. The p block would be behind the float (wouldn't see it at all) while the p's inline content wraps around the float. Give the dimensionless p a background colour and give the image a left margin so you can see behind it a bit.

    Exception: giving the p Haslayout means IE will treat the p as if it were a fellow float, which might make it drop down, or might make it squish in the space next to the image, depending on how that was set up.

    could just
    <p>
    <img src="image.png" alt="pen">
    <span>Pen</span>
    <span>$300</span>
    </p>

    Or substitute p for div if that doesn't count as a "paragraph" to someone. Not sure what the relationship is for all that content, so spans might not be best. Is this supposed to be where the image and the green area is??

    You could set newlines using :after and "content" if you want to be creative...
    ...depends if the newline between title and price is content or decoration. If it's content you could conceiveably have a single span with a br inside it. If it's just for looks, css.
    I'm not sure about the header tag if all that's underneath is a single price. If there's a description though...

  10. #10
    SitePoint Member
    Join Date
    May 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you very much. I used ralph.m's first solution and it worked.


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
  •