Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Nov 29, 2012, 06:39 PM   #1
fig
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
Best way to code this in CSS/HTML

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:



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.
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Nov 29, 2012, 08:33 PM   #2
UTclassof89
macrumors 6502
 
Join Date: Jun 2008
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.
__________________
Flash will be around a lot longer than Steve Jobs will.
UTclassof89 is offline   1 Reply With Quote
Old Nov 30, 2012, 08:05 AM   #3
960design
macrumors 6502a
 
Join Date: Apr 2012
Location: Destin, FL
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
__________________
TI-99/4A, tape cassette, 12" B&W Zenith
960design is offline   0 Reply With Quote
Old Nov 30, 2012, 05:04 PM   #4
fig
Thread Starter
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
Thanks guys, not using HTML5 yet but that's my next development step. Any backwards compatibility issues to worry about?
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Dec 1, 2012, 04:44 AM   #5
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by fig View Post
Thanks guys, not using HTML5 yet but that's my next development step. Any backwards compatibility issues to worry about?
From W3Schools:

Quote:
HTML5 is not yet an official standard, and no browsers have full HTML5 support.
But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.
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/Compari...s_%28HTML_5%29
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Dec 1, 2012, 03:25 PM   #6
MagicWok
macrumors 6502a
 
Join Date: Mar 2006
Location: London
HTML5 is a good thing to practice, but dependent on your project you'll have to support lower browsers (unfortunately ) - 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/
__________________
Mac Pro, MBP & MBA.
iPad, iPhone & iPod Touch
= All my money belongs to
MagicWok is offline   0 Reply With Quote
Old Dec 1, 2012, 09:54 PM   #7
fig
Thread Starter
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
Quote:
Originally Posted by SrWebDeveloper View Post
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/Compari...s_%28HTML_5%29
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.


Quote:
Originally Posted by MagicWok View Post
HTML5 is a good thing to practice, but dependent on your project you'll have to support lower browsers (unfortunately ) - 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/
Thanks, greatly appreciated. This is almost exactly the solution I came up with
__________________
figdigital | @figdigital | dribbble
fig is offline   0 Reply With Quote
Old Dec 2, 2012, 11:34 AM   #8
segovius
macrumors regular
 
Join Date: Sep 2006
Location: Barcelona / Berlin
Send a message via AIM to segovius Send a message via Yahoo to segovius Send a message via Skype™ to segovius
Quote:
Originally Posted by fig View Post
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.
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/
segovius is offline   0 Reply With Quote
Old Dec 3, 2012, 08:26 AM   #9
960design
macrumors 6502a
 
Join Date: Apr 2012
Location: Destin, FL
Quote:
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/
+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)
__________________
TI-99/4A, tape cassette, 12" B&W Zenith
960design is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
go through html code DennisBlah iPhone/iPad Programming 3 Feb 10, 2014 04:36 AM
Best way get current with HTML/CSS macmesser Web Design and Development 17 Nov 2, 2013 08:54 PM
Is Coda still the popular choice for CSS and HTML? chrono1081 Web Design and Development 3 Oct 27, 2013 03:06 PM
Slicing Tutorial to HTML / CSS AFPoster Web Design and Development 3 Nov 2, 2012 03:49 AM

Forum Jump

All times are GMT -5. The time now is 11:14 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC