Divs help

Community Off Topic
1

Hello everyone i need some help…

I want to make exact the same website like this one: http://creativemuse.pw/demo/portfolio/#services

but my problem is the div positioning…
I can’t get that red div (the one with his information) in the big photo div… where says: Welcome to my site.
i get a whole other div above the picture div…
this is my html code…:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JuulHazenberg</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>


<nav></nav>
<div id="one"></div>
<div class="sect sectOne"></div>
<div class="sect sectTwo"></div>



</body>
</html>

**

And this CSS Code:

**

*{
    margin:0;

}

html, body{

    height: 100%;
}

h1, h2, h3, h4, h5, h6, p {

    margin-bottom: 20px;
}

nav{
    position: fixed;
    width: 100%;
    height: 70px;
    background-color: white;

}

.sect{
    height: 100%;
    background-size: cover;
}


#one{
    height: 80%;
    width: 100px;
    background-color: red;
}



.sectOne{
    background-image: url("../images/IMG_0568.JPG");


}


.sectTwo{
    background-color: rgba(11, 34, 45, 0.79);
}

Please help me…

2

Sure it isn’t a bit out of your league? Give me a minute, i am going to improve your code, then explain what i did.

for next time, use one of the two following options to make your html code/indent visible:

select your code and press ctrl + shift + c (or cmd + shift + c if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:

```
<p>visible</p>
```

the backtick is located above the tab key on your keyboard

3

That was simply, you give your div a position: fixed like i did here, i removed the image, since that is not working (the image is local), and if you give your #one a fixed position, the rest is fine as well, does this help?

4

Thankyou so much stetim94 !

Didn’t know it was that easy haha!

5

The problem you have, is that block automatically get below each other, as you can see in this simple bin. Of course, with position: fixed; or position: absolute, float or display: inline-block you can resolve this, all this should be covered in the course if you finish css positioning