Caspar_PT Posted February 19, 2017 Share Posted February 19, 2017 (edited) 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? 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 February 19, 2017 by Caspar_PT Link to comment Share on other sites More sharing options...
dsonesuk Posted February 19, 2017 Share Posted February 19, 2017 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; } Link to comment Share on other sites More sharing options...
Caspar_PT Posted February 19, 2017 Author Share Posted February 19, 2017 (edited) Thank you for your reply dsonesuk, the caption problem is now solved. 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? And how can I reduce that margin on the yellow spaces? Edited February 19, 2017 by Caspar_PT Link to comment Share on other sites More sharing options...
dsonesuk Posted February 19, 2017 Share Posted February 19, 2017 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now