Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Figcaption – Position an image independently from a caption?

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #40435
    MBM
    Participant

    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?

    #112528
    MBM
    Participant

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

    #112532
    Paulie_D
    Member

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

    No?

    #112533
    MBM
    Participant

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

    #112535
    MBM
    Participant

    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.

    #112537
    chrisburton
    Participant
    #112543
    MBM
    Participant

    You are awesome! Thank you very much!

    #112544
    chrisburton
    Participant

    @MBM My pleasure. I updated the pen to minimize the CSS a bit.

    @andy_unleash Thanks for the initial markup.

    #112550
    wolfcry911
    Participant

    I updated Andy and Chris’ pen a bit further – no need for the before pseudo class…
    http://codepen.io/wolfcry911/pen/sGjpC

    #112562
    MBM
    Participant

    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?

#112563

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/

#112564
wolfcry911
Participant

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).

#112566
MBM
Participant

Thanks. Valid and aligned perfectly in all browsers (in desktop mode).

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.