SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    What's the best way to handle images with notes?

    My job involves HTML-izing a lot of reports. Most of these start off as Word docs, and many contain images.

    The images usually have a note below, like this:

    [image here]
    Figure 1: picture of a mouse

    I want the page to look tidy, so I try to nest smaller images within the document and let the body text wrap around them. This is easy to do with a div, and I'm using this CSS:

    Code:
    .imgleft { float:left; padding:0px 10px 5px 0px }
    (there's also one to float the image right).

    This works just fine, until I have a note for the image. Since the note text has no way of knowing how wide the image is, I have to use <br> tags to keep the text from pushing the div to the right and creating blank space. The only word-around is to assign a width to the div, but since all the images are a different width, that gets clunky.

    I don't know of any way to put a div around the image and not let the text push it wider. Does anyone else?
    <cfset myblog = "http://cydewaze.org/">

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I can't think of a way to do that with CSS, but you could do it with JS.

    A CSS alternative might be to work out the likely minimum width of potential images, and then set that as a width or max-width for the caption. That will mean it won't be as wide as some images, but does that matter?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Having the image wider than the text is fine. The only thing is that if we have a wider image, and a long string of text, it'll grow vertically, and make whitespace that way.

    [ s u p e r d u p e r w i d e i m a g e ]
    figure 1:
    this is a
    super
    wide
    image.

    I should just mandate an image width of like 40% of the content area width, then make everyone re-size their images
    <cfset myblog = "http://cydewaze.org/">

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,457
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Is this what you have in mind?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <!--
    Widths in a table-cell are only a "suggestion".
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <meta http-equiv="content-style-type" content="text/css">
        <style type="text/css">
    body {
        background-color:#bdf;
        padding:0;
        margin:0;
    }
    .canvas {
        background-color:#fff;
        width:740px;
        overflow:hidden;
        padding:10px;
        margin:0 auto;
    }
    .edgeleft,
    .edgeright {
        display:table;
        border:1px solid #888;
        overflow:hidden;
    }
    .edgeleft {
        clear:left;
        float:left;
    }
    .edgeright {
        clear:right;
        float:right;
    }
    .tablecell {
        display:table-cell;
        width:1px;
    }
    img {
        display:block;
        background-color:#ccc;
    }
        </style>
    </head>
    <body>
    
    <div class="canvas">
        <div class="edgeleft">
            <div class="tablecell">
                <img src="img.jpg" alt="" width="300" height="200">
                <p>This is the caption for this image.  This is the caption for this image.</p>
            </div>
        </div>
        <div class="edgeright">
            <div class="tablecell">
                <img src="img.jpg" alt="" width="400" height="200">
                <p>This is the caption for this image.  This is the caption for this image.</p>
            </div>
        </div>
        <div class="edgeleft">
            <div class="tablecell">
                <img src="img.jpg" alt="" width="500" height="200">
                <p>This is the caption for this image.  This is the caption for this image.</p>
            </div>
        </div>
    </div>
    
    </body>
    </html>

  5. #5
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Yeah, hmmmm. Sure is a lot of divs though.
    <cfset myblog = "http://cydewaze.org/">

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,457
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Thanks for the feedback.

    PS: You call it a table, I call it div behavior. Think about it.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Nice example, ronpat. Gah, I must learn more about display: table. I keep forgetting about it. (It wasn't really usable when I started out, so never crept into my field of view.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I knew about display: table, but I think we had problems with IE7 support, which is still a huge chunk of our user base.
    <cfset myblog = "http://cydewaze.org/">

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cydewaze View Post
    IE7 support, which is still a huge chunk of our user base.
    IE7 has around 1% market share. Encourage them to upgrade by giving them a crappy layout.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    IE7 has around 1% market share. Encourage them to upgrade by giving them a crappy layout.
    They don't have a choice. A lot of state and federal gov't agencies (which are the majority of our audience) are strapped to IE7 (and in some cases IE6) for various reasons, including in-house apps that were designed to run on a specific browser. They won't upgrade until they test every facet of operation, and when there's a new version right around the corner, they often wait.

    As such, our IE7 share is still around 20%. Heck, we just got upgraded from 6 just over a year ago.
    <cfset myblog = "http://cydewaze.org/">

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,457
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    It sounds like the desired effect can be achieved with html and css but "company rules" and technical restrictions prevent you from achieving it. Makes more sense than "lot of divs".

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You can always resort to JS if needed.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    It sounds like the desired effect can be achieved with html and css but "company rules" and technical restrictions prevent you from achieving it. Makes more sense than "lot of divs".
    Oh don't get me wrong. Your solution works really well; I'm just trying to figure out how to make it work within our existing template (that already has a few too many nested divs) without having unexpected behavior inherited from what's already there.

    But the IE7 thing is a real pain. At least we don't have to code for IE6 anymore.
    <cfset myblog = "http://cydewaze.org/">

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,457
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Oh don't get me wrong.
    Although I initially thought your reply, "a lot of divs", was somewhat disingenuous, it also gave me good chuckle.

    From the movie, "Amadeus", came the line where Emperor Joseph II told Mozart that his composition of "The Marriage of Figaro" had "too many notes". Your comment struck a funny chord, so to speak <still laughing>.

    I understand the problem with nested tags and inheritance. It gnaws my ankle every now and then. <smile>

    Don't envy you having to support IE7. May I ask what level of government you support?

  15. #15
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Don't envy you having to support IE7. May I ask what level of government you support?
    I'm Federal, but a lot of state and local (as well as other Federal) agencies view our site.

    We're using a template that a bunch of us created over the course of many months, and as time has worn on and we've gotten better with CSS, it's clear that we did a lot of things with divs that we didn't need to. Example:

    Code:
    <div id="subnaviation">
       <div id="localnav">
          <ul>
             <li>...
    Which probably could have been handled with:

    Code:
    <ul id="localnav">
       <li>...
    But with around 50,000 pages using the new template, and a few thousand left to convert, fiddling with is is not a high priority, especially since any changes to the template would require changes to our CMS (because the CMS can create new pages with a click). Maybe once we get all the pages converted, I'll look into cleaning up the CSS and "de-div'ing".

    Your solution was impressive though, and I've filed it away for the second I get the go-ahead to ditch IE7 support. But at the rate of gov't, I might be retired first!
    <cfset myblog = "http://cydewaze.org/">


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
  •