- This topic is empty.
October 24, 2012 at 12:30 pm #40435
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.
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?October 24, 2012 at 12:43 pm #112528
I’m not sure how that would help??!?! I only want to move one caption or one image.October 24, 2012 at 12:58 pm #112532Paulie_DMember
I don’t understand, just make sure the image and text are centered inside the figure.
No?October 24, 2012 at 12:59 pm #112533
I want the text has to be positioned under each image.October 24, 2012 at 1:01 pm #112535
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.October 24, 2012 at 1:06 pm #112537chrisburtonParticipant
@MBM Solved: http://codepen.io/anon/pen/lwbutOctober 24, 2012 at 1:14 pm #112543
You are awesome! Thank you very much!October 24, 2012 at 1:15 pm #112544chrisburtonParticipant
@MBM My pleasure. I updated the pen to minimize the CSS a bit.
@andy_unleash Thanks for the initial markup.October 24, 2012 at 1:42 pm #112550wolfcry911Participant
I updated Andy and Chris’ pen a bit further – no need for the before pseudo class…
http://codepen.io/wolfcry911/pen/sGjpCOctober 24, 2012 at 7:53 pm #112562
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.)
While this validates :
I want the anchor the links around the images and text not just the text, is that possible?October 24, 2012 at 8:08 pm #112563joshuanhibbertMember
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/October 24, 2012 at 8:16 pm #112564wolfcry911Participant
this pen is updated (similar to Joshua’s)
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).October 24, 2012 at 8:41 pm #112566
Thanks. Valid and aligned perfectly in all browsers (in desktop mode).
- The forum ‘CSS’ is closed to new topics and replies.