Best way to code this in CSS/HTML

Discussion in 'Web Design and Development' started by fig, Nov 29, 2012.

  1. fig
    macrumors 6502a

    Joined:
    Jun 13, 2012
    Location:
    Houston, TX
    #1
    Hey developer types, I've got something pretty simple for a site I'm building and I'm curious how you guys might approach this:

    [​IMG]

    There's nothing especially complicated about it and the content is already constrained to the size shown by existing CSS. I'm wondering what the best approach would be to fit both paragraphs around the image and caption, however.

    I've got the image fitting correctly with a simple style that just floats right and gives a bit of padding so the text flows around it, but I'm having an issue getting the caption to sit underneath the image (it keeps popping up to the top right) Any ideas?

    I'm currently playing with it and I'm sure I'll work out a quick and dirty way to do it, just hoping someone might have a more elegant solution for this. Thanks.
     
  2. macrumors 6502

    UTclassof89

    Joined:
    Jun 10, 2008
    #2
    If you're using HTML5 you can use the <figure> and nested <figcaption> elements (put the image inside the <figure> element along with the <figcaption> and float the <figure> to the right.

    If not using HTML5 just nest <div> elements to do the same.
     
  3. macrumors 65816

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #3
    UTclassof89 has it right, stick the image and caption in a <div> and float the div if you have 1990's nostalgia.

    I try to use the latest technology, especially if it makes my job easier. Again, I'm with UTclassof89, HTML5, <fig> and <figcaption> to happiness.

    Something like:
    Code:
    <figure>
      <img src="/images/building.png" alt="Impressive Building">
      <figcaption>Engaging caption both descriptive and... where did you get this? Haha</figcaption>
    </figure>
    Then use css to float the figure element ( which will include the the caption) right.

    agreeing with the smart guy
     
  4. fig
    thread starter macrumors 6502a

    Joined:
    Jun 13, 2012
    Location:
    Houston, TX
    #4
    Thanks guys, not using HTML5 yet but that's my next development step. Any backwards compatibility issues to worry about?
     
  5. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #5
    From W3Schools:

    That is your generic answer for newbies. For a much more specific detailed look at support it is wise to compare HTML features vs. browser ENGINES (layout engines i.s. Webkit, Gecko, Trident, etc.) so I suggest you consult reference sites like this one when legacy support for clients or you matters:

    http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
     
  6. macrumors 6502a

    Joined:
    Mar 2, 2006
    Location:
    London
    #6
    HTML5 is a good thing to practice, but dependent on your project you'll have to support lower browsers (unfortunately :cool:) - mainly IE8 and lower. In which case it's simple to just use divs as we've had to do for yonks... Same heirarchy, but HTML5 elements are nicer :)

    Code:
    <div class="body_img">
        <img src="url_goes_here" />
        <div class="caption">Lorem Ipsum</div>
    </div>
    
    A very quick 2 min mock up for you:
    http://jsfiddle.net/EFce3/
     
  7. fig
    thread starter macrumors 6502a

    Joined:
    Jun 13, 2012
    Location:
    Houston, TX
    #7
    Thanks, great reference. Unfortunately most of the work I do for my day job is for commercial real estate which requires horribly archaic backwards compatibility.


    Thanks, greatly appreciated. This is almost exactly the solution I came up with :)
     
  8. macrumors regular

    segovius

    Joined:
    Sep 18, 2006
    Location:
    Barcelona / Berlin
    #8
    You can use Html5 Shiv at Google code which is a js workaround to enable html5 in browsers lower than IE9 which goes a long way to fixing most issues in backwards compatibilty.

    http://code.google.com/p/html5shiv/
     
  9. macrumors 65816

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #9
    +1 to segovius
    Yes sir, that is the way I do it, write in HTML5 and shiv it! Divitus puts me out of commission for days.

    cough, cough, hack, hack ( see what I did there? hack, haha, need coffee)
     

Share This Page