help getting my <figcaption> under by <figure>

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

help getting my <figcaption> under by <figure>

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:

<figure><img src="/resources/images/colleges-staff/upk-help-01.png" alt="&#34;&#34;" width="600" height="341">
<figcaption>this is my caption</figcaption>
</figure>









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
[hidden email]<mailto:[hidden email]>
www.sbctc.edu<http://www.sbctc.edu/>

______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|

Re: help getting my <figcaption> under by <figure>

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 <br /> (line break)

<figure style="text-align:center;"><img src="/resources/images/colleges-staff/upk-help-01.png" alt="&#34;&#34;" width="600" height="341"><br /><figcaption>this is my caption</figcaption></figure>

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

This is how I would do it:

<figure><div><img src="/resources/images/colleges-staff/upk-help-01.png" alt="&#34;&#34;" /></div><br /><figcaption>this is my caption</figcaption></figure>

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 <[hidden email]> 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:
>
> <figure><img src="/resources/images/colleges-staff/upk-help-01.png" alt="&#34;&#34;" width="600" height="341">
> <figcaption>this is my caption</figcaption>
> </figure>
>
>
>
>
>
>
>
>
>
> 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
> [hidden email]<mailto:[hidden email]>
> www.sbctc.edu<http://www.sbctc.edu/>
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|

Re: help getting my <figcaption> under by <figure>

Philippe Wittenbergh
In reply to this post by Angela French

> On Nov 29, 2016, at 7:28 AM, Angela French <[hidden email]> 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:
>
> <figure><img src="/resources/images/colleges-staff/upk-help-01.png" alt="&#34;&#34;" width="600" height="341">
> <figcaption>this is my caption</figcaption>
> </figure>
>
>
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|

Re: help getting my <figcaption> under by <figure>

Angela French


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/


I found an example online to try to model mine after:  http://html5doctor.com/the-figure-figcaption-elements/ 

I got it to work by a simple <figcaption style="clear:left " >.  However, if I remove the clear:left from the inline declaration and put it in the style sheet, it doesn't work, even with !important.   I can't figure out what is playing on it in the css.

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



______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|

Re: help getting my <figcaption> under by <figure>

Chris Rockwell
The issue appears to be at line 1725 of sbctc.css.  Is floating every image
in the main container the desired behavior? If so, you'll have to
explicitly reset for either all <img> within a <figure> element or use a
class.  You'll need to be more specific with your declaration than what
you've done here:

@media (min-width: 992px) {
  main img {
    ...
    float: left;
  }
}




On Tue, Nov 29, 2016 at 1:03 PM Angela French <[hidden email]> wrote:

>
>
> 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/
>
>
> I found an example online to try to model mine after:
> http://html5doctor.com/the-figure-figcaption-elements/
>
> I got it to work by a simple <figcaption style="clear:left " >.  However,
> if I remove the clear:left from the inline declaration and put it in the
> style sheet, it doesn't work, even with !important.   I can't figure out
> what is playing on it in the css.
>
> http://www.dev.sbctc.edu/_testing/figure-caption.aspx
>
>
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|

Re: help getting my <figcaption> under by <figure>

Angela French
Thank you all.  I got it using a clear:both on the <figcaption>.   I realized I don't have a good understanding of the clear property values for example clear:both  vs clear:left or clear:right;

-----Original Message-----
From: [hidden email] [mailto:[hidden email]] On Behalf Of Chris Rockwell
Sent: Tuesday, November 29, 2016 10:58 AM
To: Angela French; Philippe Wittenbergh
Cc: CSS-D
Subject: Re: [css-d] help getting my <figcaption> under by <figure>

The issue appears to be at line 1725 of sbctc.css.  Is floating every image in the main container the desired behavior? If so, you'll have to explicitly reset for either all <img> within a <figure> element or use a class.  You'll need to be more specific with your declaration than what you've done here:

@media (min-width: 992px) {
  main img {
    ...
    float: left;
  }
}




On Tue, Nov 29, 2016 at 1:03 PM Angela French <[hidden email]> wrote:

>
>
> 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/
>
>
> I found an example online to try to model mine after:
> http://html5doctor.com/the-figure-figcaption-elements/
>
> I got it to work by a simple <figcaption style="clear:left " >.  
> However, if I remove the clear:left from the inline declaration and put it in the
> style sheet, it doesn't work, even with !important.   I can't figure out
> what is playing on it in the css.
>
> http://www.dev.sbctc.edu/_testing/figure-caption.aspx
>
>
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> 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 [[hidden email]] 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 [[hidden email]]
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/