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 Idan shami
Idan shami
13,251 Points

how to place text beneath my photos? + how to position photos on my text

this is my code: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Protfolio</title>
        <link rel="stylesheet" href="D:/coding/style.css">
    </head>
    <body>
        <div class="container">

        <div class="header">
            <img src="bigcloud.png" alt="bigcloud" class="bigcloud">
            <div class="list">
                <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Me</a></li>
                </ul>
            </div>
        </div>

        <div class="title">Gallery</div>

        <div class="first3 clearfix">
            <img src="sakura2.jpg.jpg" alt="sakura full body" class="img1">
            <img src="sakura.jpg.jpg" alt="sakura face" class="img1">
            <img src="sensi.jpg.jpg" alt="dragonballsensi" class="img1">
            <img src="the meeting.jpg" alt="gandalf and dumbledore" class="img1">
            <img src="naruto2.jpg.jpg" alt="naruto teachers" class="img1">
            <img src="naruto.jpg.jpg" alt="naurto" class="img1">
        </div>
        </div>

        <footer class="clearfix">
        <p>
        All the art is mine, and protected by copyrights.
        </p>
        <div id="sociallogos">
            <img src="instagram.png" alt="instagram logo" class="socialmedia">
            <img src="facebook.png" alt="facebook logo" class="socialmedia">
            <img src="twitter.png" alt="twitter logo" class="socialmedia">
        </div>
        </footer>
    </body>
</html>

body {
    font-family: Comic sans MS;
    margin: 0;
}


.list ul {
    list-style: none;
}

.list li {
    display: inline-block;
    font-size: 1.8em;
    margin: 0 5em;
    margin-bottom: 0.5em
}

.header {
    background-color: #39f;
    margin-top: 0;
    box-sizing: border-box;
    box-shadow: 0.3em 0.3em 4em  #ccc;
    background: linear-gradient(#39f, #3cf)
}

a {
    text-decoration: none;
    color: #036;
}

.title {
    color: #3cf;
    font-size: 2.5em;
    padding-top: 1.5em;
    padding-left: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid #39f;
}

footer {
    background-color: #369;
    padding: 1em;
    margin-top: 1em;
    border-top: 1px solid #39f;

}

footer p {
    padding-bottom: 0.2em;
    display: inline-block;
}
/*              pics             */

.bigcloud {
    display: block;
    margin-left: 32%;
    margin-right: 10%;
    height: 50px;
}

.first3 {
    margin: 1em 0 1em 5em;
    display: inline-block;
}


.img1 {
    height: 250px;
    width: 367.91px;
    margin: 1em 2.8em;
    border-radius: 0.625em;
    box-shadow: 0.3em 0.3em 0.9em  grey;
}

.socialmedia {
    height: 1.8em;
    padding-left: 1em;
    padding-top: 2em;
}

#sociallogos {
    float: right;
    position: relative;
    bottom: 17px;
    display: inline-block;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

  1. I want to place a button beneath my images that saying "click me" but every time I set the text, it goes to the right side of my photo and whatever I do the image doesn't move beneath the image...

  2. I want to place the photo "cloud" on the list items, but I don't know how to do it..... do I need to position the photo with position: absolute? please help... I tried to check it online, but I didn't understand the explanation, or their issue wasn't mine, this is a small project that I am doing, just to see if I can find important stuff that I don't know how to do (:

have a good day ^-^

2 Answers

Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

For your buttons, you'll probably need to place both the images and buttons into a container (perhaps a "div"), and the style the containers to create the grid instead of the images themselves.

I'm not sure what you mean by "place the photo "cloud" on the list items". Do you mean have a tiny image in front of each item? Or use it as a background behind the item? If the latter, just set the "background-image" property.

For future use, you can share your entire project at once, including images, if you make a snapshot of your workspace and post the link to it here.

Idan shami
Idan shami
13,251 Points

I uploaded my project: https://w.trhou.se/uq4oxjj62y here is a photo of the page(not all of the page, I added arrows to where the buttons should be): https://imgur.com/a/IiTEb I don't know if I got your answer right... I wrapped my image and text in a div and then what... whatever I do the other photos always move to the left or the right side of the screen and never adherent to the look that they were before. and when I said, "place the photo "cloud" on the list items" I meant as a background behind the items.

thank you.

Idan.

Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

Here's an example of wrapping the image and the button in a containing div:

index.html 
      <div class="buttonbox">
        <img src="sakura2.jpg.jpg" alt="sakura full body" class="img1"><br>
        <button>Button</button>
      </div>

Then, the container is styled with the margins instead of the image, plus it centers the button.

style.css 
.img1 {
    height: 250px;
    width: 367.91px;
    /* moved margin to containing "buttonbox" */
    border-radius: 0.625em;
    box-shadow: 0.3em 0.3em 0.9em grey;
    clear: both;
}

/* the contaner holds the image and button (centered) */
.buttonbox {
    display: inline-block;
    margin: 3em 2.8em;
    text-align: center;
}

/* some button effects, just for fun */
button {
    padding: .3em .6em;
    box-shadow: 0.3em 0.3em 0.9em grey;
    transition: transform .1s ease-in, box-shadow .1s ease-in;
}
button:active {
    box-shadow: 0 0 0.3em grey;
    transform: translate(.3em, .3em);
    transition: none;
}
Idan shami
Idan shami
13,251 Points

Thank you !!! the buttons are good now (: only One problem P: I set the image cloud to every one of them but they don't seem to fit in the center of every cloud.

Thanks a lot!!!

Idan.

Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

You need a little extra room to fit the entire word within the cloud. You can add some padding for this, and then stretch the image to fit in both dimensions:

.list li {
  background-image: url(cloud.png);
  padding: 0 30px 0 10px;
  background-size: 100% 100%;
}
Idan shami
Idan shami
13,251 Points

still, nothing changes...

        <div class="header">
            <img src="bigcloud.png" alt="bigcloud" class="bigcloud">
            <div class="list">
                <ul>
                <li><div class="cloud"><a href="#">Home</a></div></li>
                <li><div class="cloud"><a href="#">Gallery</a></div></li>
                <li><div class="cloud"><a href="#">Contact</a></div></li>
                <li><div class="cloud"><a href="#">Me</a></div></li>
                </ul>
            </div>
        </div>

.list li {
    display: inline-block;
    position: relative;
    font-size: 1.8em;
    margin: 0 4em;
    margin-bottom: 0.5em;
}

.cloud {
    background:  no-repeat url(cloud.png);
    background-size: 150px;
    width: 150px;
    height: 90px;
    position: relative;
}

this is my code...

Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

It doesn't look like you implemented that last suggestion. And it doesn't involve any new HTML elements or classes.

The header HTML can remain as it was to begin with:

index.html 
        <div class="header">
            <img src="bigcloud.png" alt="bigcloud" class="bigcloud">
            <div class="list">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Me</a></li>
                </ul>
            </div>
        </div>

And those new items from my last suggestion can just be added into the existing CSS rule:

style.css 
.list li {
    display: inline-block;
    font-size: 1.8em;
    margin: 0 4em;
    margin-bottom: 0.5em
    background-image: url(cloud.png);
    padding: 0 30px 0 10px;
    background-size: 100% 100%;
}
Idan shami
Idan shami
13,251 Points

it is working, but I want the cloud a little bigger and when I change the background size, it doesn't show me the whole png.

Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

The background size is constrained to 100% in both dimensions, so it should always show the entire image. To make the cloud bigger, just increase the padding.

Idan shami
Idan shami
13,251 Points

THANKS WOW U R THE BEST ^-^