I have created a second figure class for the image but still can't figure out a way to shift the image to the right while keeping the text in it's current position, they both move together and if I play around with the figcaption is screws with the formatting of all the captions, I only want to target one.
Paulie_D, that's the problem, - I can't figure out how to do it. Three of the images and captions are aligned centrally but the last image doesn't align with the text.
Oh now I see your code above (wasn't there for me before) you want to align the text centrally under each image.
Why are you using fig/figcaption for this since it's a list in a footer anyway? Figs/figcaptions are for content areas as far as I'm aware? A ul would make more semantically sense as well as being easier to manage and style.
When I add links to the elements I get the following validation error :
Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
<a href="mailto:webmaster@.co.uk"><li class="email">e-mail</li></a>
Lists have to have list items as their immediate children. Here is a working solution using what has already been done: http://jsfiddle.net/joshnh/LK9jG/
note the anchors are display block, allowing for larger clickable area. Also note the background image could be placed on either the anchor or the list item (I've done two of each).
I have a row of icons in my footer with text underneath. As the text for the last icon contains 11 characters it isn't in line with the image.
http://mbmitservices.co.uk/caption_issue.png
I have created a second figure class for the image but still can't figure out a way to shift the image to the right while keeping the text in it's current position, they both move together and if I play around with the figcaption is screws with the formatting of all the captions, I only want to target one.
Sorry for the formatting. Markdown is utter ******. Why can't we use vb code?
Have you considered using :before instead with a CSS background?
I'm not sure how that would help??!?! I only want to move one caption or one image.
Something like this: http://codepen.io/andyunleashed/pen/vCkuD
Or alternatively could use :after --> http://codepen.io/andyunleashed/pen/eBCIu
I don't understand, just make sure the image and text are centered inside the figure.
No?
I want the text has to be positioned under each image.
Paulie_D, that's the problem, - I can't figure out how to do it. Three of the images and captions are aligned centrally but the last image doesn't align with the text.
Oh now I see your code above (wasn't there for me before) you want to align the text centrally under each image.
Why are you using fig/figcaption for this since it's a list in a footer anyway? Figs/figcaptions are for content areas as far as I'm aware? A ul would make more semantically sense as well as being easier to manage and style.
@MBM Solved: http://codepen.io/anon/pen/lwbut
You are awesome! Thank you very much!
@MBM My pleasure. I updated the pen to minimize the CSS a bit.
@andy_unleash Thanks for the initial markup.
I updated Andy and Chris' pen a bit further - no need for the before pseudo class... http://codepen.io/wolfcry911/pen/sGjpC
When I add links to the elements I get the following validation error :
While this validates :
I want the anchor the links around the images and text not just the text, is that possible?
Lists have to have list items as their immediate children. Here is a working solution using what has already been done: http://jsfiddle.net/joshnh/LK9jG/
this pen is updated (similar to Joshua's) http://codepen.io/wolfcry911/pen/sGjpC
note the anchors are display block, allowing for larger clickable area. Also note the background image could be placed on either the anchor or the list item (I've done two of each).
Thanks. Valid and aligned perfectly in all browsers (in desktop mode).