Caspar_PT

Independent figcaption text settings from the paragraph

4 posts in this topic

I have the following paragraphs with image on side and I need a "figcaption" on each image.

I need to set the "figcaption" text with independent settings.

How can i do this?

 

FglZu.jpg

 

 

My image.right and image.left class have this settings:

.image.right {
            float: right;
            margin: 0 0 1em 1.5em;
            top: 0.25em;
        }

.image.left {
           float: left;
           margin: 0 1.5em 1em 0;
           top: 0.25em;
        }

And I need my figcaption to use this settings:

font-size: 75%;
font-style: italic;
text-align: center;

Also, I'm not sure if the figcaption tag is correctly used in my HTML:

<p><figure><span class="image right"><img src="images/scania_old.jpg" alt="Stoptrans first truck" /><figcaption>Stoptrans first truck in the 80's</figcaption></span></figure>Vestibulum ultrices risus velit, sit amet.</p>
Edited by Caspar_PT

Share this post


Link to post
Share on other sites

1) Apply class to figure element.

2) Remove parent paragraph and wrap text within figcaption with paragraph.

3) remove span.

<figure class="image right">
<img src="images/scania_old.jpg" alt="Stoptrans first truck" />
<figcaption><p>Stoptrans first truck in the 80's</p></figcaption>
</figure>
<p>Vestibulum ultrices risus velit, sit amet.</p>

Styling property 'top' only works when property 'position' is used, using 'relative', 'absolute' or 'fixed', I don't know why you need this otherwise.

.image.right {
            float: right;
            margin: 0 0 1em 1.5em;
          /*  top: 0.25em;*/
        }

.image.left {
           float: left;
           margin: 0 1.5em 1em 0;
          /* top: 0.25em;*/
        }

styling these specific figure captions you could use

figure.image.right figcaption, figure.image.left figcaption {
font-size: 75%;
font-style: italic;
text-align: center;
}

Share this post


Link to post
Share on other sites

Thank you for your reply dsonesuk, the caption problem is now solved. :good:

Now I have two other questions;

 

a) As you see the right image text is not margin on the right (red part) like in the left one. I've looked in the CSS paragraph section but couldn't find any setting. How can I change this?

 

B) And how can I reduce that margin on the yellow spaces?

 

example.jpg

Edited by Caspar_PT

Share this post


Link to post
Share on other sites

You will always have that, because the words within the paragraph are different lengths. You can use text-align: justify; but this is frowned upon for accessibility reasons when screen readers are used, where it becomes difficult to read enlarged text with random wide spaces produced by using justify.

 

The yellow part could be margin set on paragraph, figure or both, the text can only move to the space available, as soon as this text goes beyond the height and any margins set for figure element to accommodate the text and line height it will move under the figure element, BUT! the previous line could be 99% clear from bottom edge of figure element, this means you would have a space of 99% of text/line-height, where the next line of text will come under.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now