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

Posted by Nandakishore J
Nandakishore J
4,641 Points

How to place a few text over an image and another set below?

I would like to keep a heading over the image, and the paragraph below it. I would like the image to stay within the div width too. Thank you for replies.

I used the image position as absolute to find that all the text below went up.

2 Answers

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

Hi, in situations like this it is probably best if you add what you have tried so people can use this as a guide to help solve your problem.

That said, if you have a 'div' with say 'h3', 'img' and 'p' inside, it would be something like below. Of course it all comes down to how your 'feature' is built.

<div class="feature">
  <h3>Example heading</h3>
  <img src="image.png">
  <p>Example body copy, or insert lorem ipsum here.</p>
</div>

.feature              { margin:2.5%; width:45% }
.feature img       { max-width:100%; }

Oh, and setting anything to 'position:absolute' is like removing it from it's 'inline' position and it then becomes relative to the next parent that has 'position' defined.

Zoltán Holik
Zoltán Holik
3,401 Points
Zoltán Holik
Zoltán Holik
3,401 Points

HTML5 figure tag is the best option, with some extra header and caption :) 

<figure>
  <h3>Heading</h3>
  <img src="http://i1-news.softpedia-static.com/images/news2/Picture-of-the-Day-Real-Life-Simba-and-Mufasa-Caught-on-Camera-in-Tanzania-392687-2.jpg" alt="Macaque in the trees">
  <figcaption>Lorem ipsum dolor sit amet</figcaption>
</figure>

figure{
  position: relative;
}
figure h3{
  position:absolute;
}