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 How to Make a Website Adding Pages to a Website Style New Pages

Ben Brenton
Ben Brenton
266 Points
Posted by Ben Brenton
Ben Brenton
266 Points

Adding caption text for photo

I have followed the example on the video re: Nick's photo and this has all worked out fine. However, I wish to add a photo and also have a caption underneath (i.e. the name of the pictured person), as well as paragraph text alongside.

One class won't handle properties for both photo and text so they need to be separated, however not all the properties seem to take effect. Below is the CSS code I am trying to implement with this page:

.profile                {
    float: right;
    list-style: none;
    border-radius: 20px;
}

.profile                {   
    font-family: 'Coda' , sans-serif;
    font-style: italic;
    color: #000;    
}

Any ideas?

3 Answers

Casey Antoine
PLUS
Casey Antoine
Courses Plus Student 5,174 Points
Casey Antoine
Casey Antoine
Courses Plus Student 5,174 Points

To give you an example of how I did the page:

<section>
      <ul id="gallery">
        <li>
          <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="">
            <p>Experimentation with color</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p> Playing with blending modes in Photoshop.</p>
          </a>
        </li>
        <li>
...

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li{
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color:#bdc3c7;
}

#gallery li a p{
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

You should get better results if you split your declarations for each of the elements. Hope this helps.

shezazr
shezazr
8,275 Points
shezazr
shezazr
8,275 Points

your selectors are the same in both set so they will target elem with class of profile. post your html as well.

Ben Brenton
Ben Brenton
266 Points
Ben Brenton
Ben Brenton
266 Points 
    <ul class="profile">
            <li><img src="img/benprofile.jpg" alt="cannot display image">
                <p>Ben Brenton</p>
            </li>
        </ul>
Casey Antoine
PLUS
Casey Antoine
Courses Plus Student 5,174 Points
Casey Antoine
Casey Antoine
Courses Plus Student 5,174 Points

Give your caption <p> tags a class and set your css declarations to that for your font. I think your issues are coming from the two css declarations for your .profile.

OR change your declarations in CSS to be more precise:

.profile img{}

.profile p {}
Ben Brenton
Ben Brenton
266 Points
Ben Brenton
Ben Brenton
266 Points 
.profile                {
    float: right;
    border-radius: 100%;
    font-family: 'Coda' , sans-serif;
    color: #000;
}

This is my updated css code, but the caption text sits on the top-left corner of the picture, rather than underneath. Apart from using a list function, is there any other way of doing this?

Ben Brenton
Ben Brenton
266 Points
Ben Brenton
Ben Brenton
266 Points

Unfortunately no difference, still the same issues.