Re: [css-d] help getting my under by

[Philippe Wittenbergh]

> On Nov 29, 2016, at 7:28 AM, Angela French  wrote:
> 
> I'm having a heck of a time getting my figure caption text to be underneath 
> my figure.  Thank you for any advice.
> 
> http://www.dev.sbctc.edu/_testing/figure-caption.aspx
> 
> This is my html:
> 
>  alt="" width="600" height="341">
> this is my caption
> 
> 
> 
> This is my  CSS:
> 
> figure {
>position:relative;
> }
> 
> figure img {
>display:block;
> }
> 
> figcaption {
> 
>clear: both;
>position:absolute;
>bottom:0;
>left:0;
> 
> }

Well based on your example (good & correct HTML, no need for more), the caption 
is exactly where you want it to be - given the code above. So what exactly is 
your issue?

Notes:
1. you don’t need the `clear:both` on the figcaption, position: absolute takes 
care of that.
2. there is lots of white space at the bottom of the image (inside / part of 
the image) 
3. tip for debugging: use bright borders and backgrounds to see where those 
are, how they are sized (the developper tools in your favourite browser should 
do that as well…)

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] help getting my under by

[Karl DeSaulniers]

Hi Angela,
It's looks to be under for me. Left justified but under the image, not the 
figure.
To be under the figure, you have to take the figcaption out of the figure, 
technically.

I think your css declaration is incorrect for how it is structured.

figcaption {
   clear: both;
   position:absolute;
   bottom:0;
   left:0;

}

should be 

figure figcaption {
   clear: both;
   position:absolute;
   bottom:0;
   left:0;

}

My thoughts are that you meant the image inside your figure. To ensure it is 
always under the image, just place a  (line break)

this is my 
caption

But the clear:both in your css should do that already. The  helps for 
those with old browsers or css turned off. 
If you are using WordPress, make sure that WP isn't putting a  around 
your image. 
That may cause issues depending on your p {} declaration in your theme css.
If it is, just place a  around your image. 

This is how I would do it:

this is my 
caption

figure {
position:relative;
text-align:center;
}

figure div {
width:100%;
max-width:600px;
margin:0 auto;
}

figure img {
width:100%;
height:auto;
margin:0;
padding:0;
border:none;
display:inline-block;
}

figure figcaption {
clear: both;
margin: 2%;
}

This will put the caption centered below your image and make the image 
responsive.
I hope I understood correctly what you are trying to accomplish.

HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Nov 28, 2016, at 4:28 PM, Angela French  wrote:
> 
> 
> I'm having a heck of a time getting my figure caption text to be underneath 
> my figure.  Thank you for any advice.
> 
> http://www.dev.sbctc.edu/_testing/figure-caption.aspx
> 
> This is my html:
> 
>  alt="" width="600" height="341">
> this is my caption
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> This is my  CSS:
> 
> figure {
>position:relative;
> }
> 
> figure img {
>display:block;
> }
> 
> figcaption {
> 
>clear: both;
>position:absolute;
>bottom:0;
>left:0;
> 
> }
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu
> www.sbctc.edu
> 
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] help getting my under by

[Angela French]

I'm having a heck of a time getting my figure caption text to be underneath my 
figure.  Thank you for any advice.

http://www.dev.sbctc.edu/_testing/figure-caption.aspx

This is my html:


this is my caption










This is my  CSS:

figure {
position:relative;
}

figure img {
display:block;
}

figcaption {

clear: both;
position:absolute;
bottom:0;
left:0;

}











Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
www.sbctc.edu

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/