Grow your CSS skills. Land your dream job.

Figcaption – Position an image independently from a caption?

  • MBM
    # October 24, 2012 at 12:30 pm

    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.


    email

    email

    facebook

    facebook

    linkedin

    linkedin
    Phone
    07975564706

    .contact {
    float:left;
    font-size:18px;
    margin-left:80px;
    margin-right:80px;
    padding-left:20px;
    }

    .phone {
    float:left;
    margin-left:20px;
    padding-right:20px;
    font-size:18px;
    }

    Sorry for the formatting. Markdown is utter ******. Why can’t we use vb code?

    # October 24, 2012 at 12:39 pm

    Have you considered using :before instead with a CSS background?

    MBM
    # October 24, 2012 at 12:43 pm

    I’m not sure how that would help??!?! I only want to move one caption or one image.

    # October 24, 2012 at 12:52 pm

    Something like this: http://codepen.io/andyunleashed/pen/vCkuD

    # October 24, 2012 at 12:53 pm

    Or alternatively could use :after –> http://codepen.io/andyunleashed/pen/eBCIu

    # October 24, 2012 at 12:58 pm

    I don’t understand, just make sure the image and text are centered inside the figure.

    No?

    MBM
    # October 24, 2012 at 12:59 pm

    I want the text has to be positioned under each image.

    MBM
    # October 24, 2012 at 1:01 pm

    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:05 pm

    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.

    # October 24, 2012 at 1:06 pm

    @MBM Solved: http://codepen.io/anon/pen/lwbut

    MBM
    # October 24, 2012 at 1:14 pm

    You are awesome! Thank you very much!

    # October 24, 2012 at 1:15 pm

    @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

    I updated Andy and Chris’ pen a bit further – no need for the before pseudo class…

    http://codepen.io/wolfcry911/pen/sGjpC

    MBM
    # October 24, 2012 at 7:53 pm

    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

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/

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".