Figcaption within border of image

#1

Hi everyone,

I am currently trying to build the tribute page and have decided to see if I could figure out how the example page was made without looking at the code. I have tried to add a caption to my image within a small white border as shown in the example.

I have been nabbing examples from all over the web but nothing seems to solve my problem. The html I have written so far is:

<div class="container fluid">
  <div id="fondo">
    <div class="silver-background"  id="grey-space">
      <h1 class="text-center" style="font-family: Lobster">
        Nuria Graham</h1>
      <h3 class="text-center" style="font-family: Lobster"><i>Bell-ringing vigatana</i></h3>
        <figure class="img-set">
      <img  src="https://scontent-mad1-1.xx.fbcdn.net/v/t31.0-8/21641069_10212517607227735_5380049354458771362_o.jpg?oh=c4e2847819d93cd810951520a4079ee2&oe=5B1E8E7F" alt="Una tia de la plana">
        <figcaption class="text-center">Una rata a Vic</figcaption>
        </figure>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae diam quis magna interdum varius. Phasellus sit amet euismod odio. Curabitur dictum mattis rutrum. Aliquam erat volutpat. Nulla a dapibus metus. Nulla quis pulvinar lectus, at facilisis purus. Sed et lectus vitae tortor fermentum efficitur ut eu risus.
<br><br>
Proin placerat ut lacus non vestibulum. Donec nec maximus turpis, et tincidunt lorem. Cras sit amet mollis felis. Etiam vulputate nulla massa, nec interdum sapien congue vitae. Duis consequat tellus vel est pellentesque, et laoreet nunc consectetur. Phasellus ultricies velit vitae metus bibendum tincidunt. Ut risus risus, auctor dignissim magna pharetra, iaculis aliquet risus. Vestibulum mattis dignissim lorem sit amet tempus. Cras ut risus sit amet odio pellentesque vestibulum. Etiam convallis vestibulum massa et dignissim. Etiam sagittis metus quam, et sagittis nunc imperdiet sit amet. Vestibulum porta nunc enim, ut vulputate metus tristique eu. Proin pellentesque nisi vitae purus pretium, in rutrum felis consectetur.
<br><br>
Maecenas tempor a erat volutpat dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam egestas et tortor ac mattis. Aliquam ut maximus metus. Donec convallis nibh sit amet augue ultricies, eu suscipit felis imperdiet. Aliquam eu libero eu purus pharetra vehicula at ut dolor. Nunc quis eros mollis, convallis justo eget, tempor magna. Phasellus dignissim pellentesque odio, non tincidunt tellus convallis id. Nam tempor accumsan nisi, quis congue ipsum pharetra eget. Mauris interdum nibh sapien, eu mollis nibh porta eu. Nam non ullamcorper lacus. Aliquam at leo id metus interdum varius. Sed gravida egestas tellus ac blandit. 
      </p>
    </div>
  </div>
</div>

And the css meant to format it all is the following:

body{
  margin-top: 60px;
}
.silver-background{
  background-color:  	#E8E8E8;
  border-radius: 5px;
}

.img-set {
  border-bottom: 30px solid white;
}

.img-set img {
    display: block;
    margin: 0 auto;
    width: 90%;
    height: auto;
    max-width: 90%;
    border-radius: 5px
}

I have been able to either have a border separate the caption from the image or indeed have the border begin after the caption I cannot put the caption in the white border. Any ideas?

Thanks so much everyone!

#2

It will be easier if you use bootstrap to build the page. Use everything you have learned up till now.
You are right with the <div class=“container” . Check the bootstrap documentation about jumbotron and try again.

1 Like
#3

In the example, the image and the text below are in a container with a white background. That is where the white background comes from. It is not a border. Also, you will notice the image in the example is almost touching the top, left, and right sides of the white container.

In your project, if you want to create a white section just below the image and have all of it still be in the grey container, then you will need to wrap the image and the text inside a new container with white background and nest this container inside the grey container. See below how that could be done.

Relevant HTML section:

      <div class="white-container">
        <figure class="img-set">
      <img  class="img-responsive" src="https://scontent-mad1-1.xx.fbcdn.net/v/t31.0-8/21641069_10212517607227735_5380049354458771362_o.jpg?oh=c4e2847819d93cd810951520a4079ee2&oe=5B1E8E7F" alt="Una tia de la plana">
        <figcaption class="text-center">Una rata a Vic</figcaption>
        </figure>
      </div>

Complete CSS code:

body {
  margin-top: 60px;
}
.silver-background {
  background-color: #e8e8e8;
  border-radius: 5px;
}

.white-container, img {
  border-radius: 5px 5px 0 0;
}

.white-container {
  background: white;
  margin: 0 auto 20px auto;
  width:80%;  
}
1 Like
#4

Hello @macnick,

Thanks for replying. I have started a new bootstrap version of the same page. Jumbotron simplifies the color scheme and general layout but I am still no nearer to organising my caption as I wanted. Any indications on that front?

Thanks again.

#5

Hi @RandellDawson,

Unfortunately implementing your code has caused the photo to expand quite a lot and no longer be centered. I will look into trying to implement your changes and maintain the original image format and position. I’m sure figuring it out will teach me a lot!

Thanks for your help!

#6

Can you post your latest code? It would be great if you could use Codepen or JSFiddle, so I can see any changes you make without you having to repost your updated code each time in the forum.

1 Like
#7

Of course @RandellDawson, I’m using codepen as per the indications of the challenge. I believe the problem lies in the fact that I had defined the following css to format and position the image:

.img-set {
  border-bottom: 30px solid white;
}

.img-set img {
    display: block;
    margin: 0 auto;
    width: 90%;
    height: auto;
    max-width: 90%;
    border-radius: 5px
}

And in the new implementation they are removed. Trying to use both your css classes and mine at the same time results in a very ugly border!:joy: I will keep working on it but any advice is greatly appreciated!

Thanks

#8

My code was meant to replace yours completely. You can use mine and change the width of the white-container class to 90% to match what you originally had for the img-set class.

Also, since I did not know you were using Bootstrap 4, I mistakenly applied the img-responsive class (Bootstrap 3) instead of img-fluid to your img element’s class. Change that and see if that looks better.

1 Like
#9

Thanks a lot @RandellDawson!

#10

As you understand I want to help you learn and not telling you how to do it.

Please search the documentation for Bootstrap 3, (in Bootstrap 4 I think it does not exist) and you will find how to do it in HTML without using any CSS.

#11

Hi @macnick,

I’ve manage to implement the following page using CSS only to define the classes for the social media link buttons. Apart from that everything uses bootstraps container, jumbotron, thumbnail and grid features.

Thanks for the advice!

1 Like
#12

You nailed it! Great job.

1 Like
#13