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

css| how to place a photo over my text?

this is my code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Protfolio</title>
        <link rel="stylesheet" href="D:/css/style.css">
    </head>
    <body>
        <div class="header">
            <div class="list">
                <ul>
                <li><a href="#">Home</a><img src="cloud.png" alt="cloud" class="cloud"></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="container">
        </div>
    </body>
</html>

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

.container {
    width: 70%;
    margin: 0 auto;
}

.list ul {
    list-style: none;
}

.list li {
    display: inline-block;
    font-size: 2em;
    margin: 0 4em;
}

.header {
    background-color: #39f;
    padding: 0.8em;
    margin-top: 0;
    box-sizing: border-box;
}

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

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

/*              cloud pics             */

.cloud {
    width: 150px;
    height: 90px;
    position: relative;
}

now, I want to place the photo "cloud" on the text "Home", but I don't know how to do it.....

do I need to place 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 (:

I appreciate it, thank you and have a good day (:

1 Answer

Idan shami
Idan shami
13,251 Points

Ok, thank you, I will try it. but, do you have a method for how to place it with position absolute?(what to write in the offsets to place the image in the exact point where I want it..)