Divs position help!


#1

hello i got a problem with position of one of my divs.

i want to have 2 divs position fixed under each other. but when i do this both of them divs comes mixed up....

this my html code:

<Div id="mobielbalk">

</Div>


<!--NAVIGATIEMENU-->

<nav>
    <a id="home" href="#homesection">Home</a>
    <a id="portfolio" href="#portfoliosection">Portfolio</a>
    <a id="skill" href="#skillsection">Skills</a>
    <a id="about" href="#aboutsection">About</a>
    <a id="contact" href="#contactsection">Contact</a>
</nav>

this is my CSS code:

nav {
    position: fixed;
    width: 100%;
    height: 70px;
    background-color: white;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 30px;

}

nav a {

    text-decoration: none;
    Font-size: 80px;
    color: black;
    font-family: PT Sans Narrow;
    letter-spacing: -2px;
    margin-left: 40px;
    line-height: 80px;
}

/*  ZWARTEBALK  */

#mobielbalk{
    background-color: black;
    width: 137%;
    height: 250px;
    position: fixed;
}

so what happends here is that the div of my navigation stays and my black div also stays but the black div is "under" the navigation div....
and i want to have them both under each other but also both positioned fixed....


#2

you could simple do this. the problem you have, is that for some reason, you decided you made your nav 70px high, while you can obviously see, this element is far more then 70px high, after you resolve this issue, you can simple push the nav down


#3

Thankyou stetim94!!!


#4

another problem..
now i want to put a image in that black div. once i put it and change size it resize my whole black div... why?
i put it in a different class....
HTML code:

<Div id="mobielbalk">
    <div class="Logo1"></div>





</Div>

CSS CODE:

#mobielbalk{
    background-color: black;
    width: 137%;
    height: 250px;
    position: fixed;
}


#mobielbalk, .Logo1{
    content: url("http://i650.photobucket.com/albums/uu221/Wilson_Vera_Gallardo/Juul%20website/logo_zpsy0gncdqo.png");
    width: 100px;
    height: 100px;
}

#5

because you separate your css selectors with a comma (komma in dutch), either way, this means you want the following styling to both #mobielbalk and logo1, you want to use #mobielbalk logo1 as css selector, this will select logo1 inside #mobielbalk.

Furthermore, i highly recommend to make all html tags (div, and more) lowercase, same for your css selectors and classes, it only (unnecessary) increases the changes of mistakes.

i once helped someone who had:

<div class="Someclass">

and then in css:

.someclass {/* some css rules */}

good luck catching that mistake, codecademy might forgive you this mistake, but try this outside of codecademy, it won't work, and it can be time consuming to find these kind of mistakes


#6

aha! i get it.

thanks for de feedback