Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Jimmy Mannan
Jimmy Mannan
5,201 Points
Posted by Jimmy Mannan
Jimmy Mannan
5,201 Points

Negative margin messing up my figure/figcaption!

How can I nest my images in figure and have figcaption appear at the bottom.

The way I have placed the images, I had to use negative margin because of which the figure's height is not expanding to both the images.

Also, Is there a better way than to use negative margin. I have tried absolute positioning but that also messes up the figure/figcaption

<figure class="images">     
    <img class="tower" src="http://s6.postimg.org/zdexbkfs1/DSC00389.jpg">
    <img class="water" src="http://s6.postimg.org/xkc0n8uld/DSC00334.jpg">
        <figcaption>KOTAH</figcaption>
</figure>

img {
    max-width: 100%;
}

.images {
    margin: 0;
    border: 4px solid red; 
}

 .tower {
    width: 260px;
    height: auto;
    margin-top: 90px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

  .water {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: -235px;
      border: 8px solid white;  

}


figcaption {
    text-align: center;
}

1 Answer

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

The problem is that the caption is going under the last element, which is being moved to the top, so it's following it. You could fix this by putting the circle image first, and then adjusting the z-index of each, like this:

HTML

<figure class="images">
  <img class="water" src="http://s6.postimg.org/xkc0n8uld/DSC00334.jpg">
    <img class="tower" src="http://s6.postimg.org/zdexbkfs1/DSC00389.jpg">
        <figcaption>KOTAH</figcaption>
</figure>

CSS

img {
    max-width: 100%;
}

.images {
    margin: 0;
    border: 4px solid red; 
}

 .tower {
    width: 260px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
   border: 1px solid green;
   position: relative;
}

  .water {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: block;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      border: 8px solid white;  
      top: 25px;
      z-index: 1;
}


figcaption {
    text-align: center;
}

I'd prefer to do this with a div, either with the main image inside as an image element or as a background image, and then use a pseudo ::before element to set the smaller circle (pseudo elements don't play nice with img elements), but the solution I provided above should also work depending on how you lay out the rest of the page.

Jimmy Mannan
Jimmy Mannan
5,201 Points
Jimmy Mannan
Jimmy Mannan
5,201 Points

Thanks Ryan, It worked perfectly as I wanted it. I had tried with z-index but I had given one image absolute and one relative positioning...I guess thats why it didnt work.

img {
    max-width: 100%;
}
.images {
   border: 2px solid red; 
} 
 .tower {
    width: 260px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 100px;
    left:0;
    right:0;
     z-index: 10;
}

  .water {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: block;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      border: 8px solid white; 
      top: 60px;
      z-index: 20;
 }

figcaption {
    text-align: center;
}

Your code is cleaner. I havent yet covered pseudo elements but i figure I should tackle them next. Thanks again jimmy

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

You're very welcome! Elements can behave strangely when you toy with their position and/or z-index, so you've got to be aware of which elements you're giving which attributes. For instance, if you give an element a position of absolute, its parent needs to have a position attribute, otherwise the element will keep looking up DOM tree until it is eventually in absolute position with the whole page itself.

Pseudo elements (::before and ::after) are handy because they tend not to affect other elements on the page as they are not really part of the DOM. There are a few tricks to getting them in the position you want and with the content you want, but they're really handy once you get the hang of them!

Anyway, happy coding! :D

Jimmy Mannan
Jimmy Mannan
5,201 Points
Jimmy Mannan
Jimmy Mannan
5,201 Points

"For instance, if you give an element a position of absolute, its parent needs to have a position attribute, otherwise the element will keep looking up DOM tree until it is eventually in absolute position with the whole page itself."

Thanks for this quick tip, Ryan I found a good video for pseudo elements here on tree house itself. Have a good day jimmy