Hey guys, im doing the Tribute Page challenge!
Here’s what i have until now: https://codepen.io/aiden22/pen/qBqmOje
I got stuck at trying to put the figcaption inside the <img>
and at the bottom of it.
As you can see, i tried to put the figcaption as absolute positioned and the image as relative but for some reason it wont work. Seems that the position:absolute is ignoring the relative position of the img. Any idea?
ty!
I fixed it, but be aware that if you put html tags inside you text, you have to put them inside backticks so they don’t get interpreted. So, instead of ...inside the <img> and...
you need ...inside the `<img>` and ...
to get it to show up correctly. Triple backticks can be used on the line before and after code blocks.
Hello @Aiden22
Your position: absolute
is being ignored because the caption is not nested within the img
. Apply position: relative
on the #img-div
instead since it is wrapping both the img
and figcaption
and adjust the value of bottom
property on the figcaption
accordingly. Take note in codepen, you only have to put the markup which goes inside the body
tag inside the HTML section like:
Oh sorry didn’t know. Thank you!
Hey @nibble , so i tried to put position:relative
on the #img-div
but it will put the caption at the bottom of the div like this:
What i actually want is to put the caption inside the image and to get the 100% of the image’s width, not the whole div.
Ok guys, so i came with a solution:
https://codepen.io/aiden22/pen/qBqmOje?editors=1100
What i just did was to create another div just for the image and the caption, and put this secondary div inside the primary one. After that i just used the position:relative
to this second div and position:absolute
to the caption.
This was the result:
As you can see everything was good! until i found out there was a little space at the bottom of the picture. So here’s the deal: i fixed it putting a display:flex
in the secondary div. But i dont know why. I just thought that the space was because the image and caption are display:block
, but as far as i know the position:absolute
gets the caption out of the flow, so the image should fill the whole secondary div but for some reason it didn’t… Anyone can throw me some light about it? Is it because the secondary container is position:relative
and the caption inherits it too so it has both relative and absolute?
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.