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 erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Div problem!

if i add a new div with text on top of my content, but still in the container div,

it pushes my header down so its a gap on top of the page, heres a image on how it looks like http://imgur.com/N2f0x75 anyone know what the problem is? and how to fix it.

Kind regards.

// Erdrag

1 Answer

Stephen O'Connor
Stephen O'Connor
22,291 Points
Stephen O'Connor
Stephen O'Connor
22,291 Points

Can you post your code? It looks like something has a top margin. Have you used a css reset?

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points 
:root {
    font-family: 'Roboto Slab', serif;
    min-height: 98%;
    border-bottom: 40px solid #0c4750;
}

* {
  -webkit-border-radius
}

/*BODY SELECTOR*/


body {
    height: 100%;
    background: hsl(188, 74% , 21%);
    background: -webkit-linear-gradient(#0e535d , #8ce1ee);
    background: -moz-linear-gradient(#0e535d , #8ce1ee);
    background: -ms-linear-gradient(#0e535d , #8ce1ee);
    background: -o-linear-gradient(#0e535d , #8ce1ee);
    background: linear-gradient(#0e535d , #8ce1ee);
    color: #FFFFFF;
    line-height: 1.6;
}

/*THE CONTENT AREA*/
.container {
    max-width: 1000px;
    min-height: 100%;
    margin: 0 auto;
    padding: 0 5%;
}

/* STYLES THE h1 and h2 and paragraph on the page */

h1, h2 {
    margin-bottom: .28em;
    font-weight: bolder;
    font-size: 28px;
    font-family: 'Droid Serif', serif;
    text-shadow: 1px 1px 1px black;



}

p {
    font-weight: bold;
    font-size: 18.88px;
    margin: 0.8em 0;


}



/*************
HEADER STYLING
*******************/

header {
   float: left;
   margin: 0 0 40px 0;
   padding: 0 0 0 0;
   width: 100%;
   min-height: 100%;
}


header {
    background:#0b3f47;
    border-color: #0b3f47;

}

header {
    border-bottom: 5px solid #082f35;
    border-top: 5px solid #082f35;
    margin-bottom: 110px;
}



.image {
  width: 50%;
  float: left;
}


.intro-pic {
    display: block;
    margin: auto 0;
    text-align:center;
}


.image {
  top: 50%;
  bottom: 50%;
}



/*STYLING FOR THE OTHER LINKS ON THE PAGE*/

a.Other-links {
    text-decoration: none;
    color: #101010;
}

a.Other-links:hover {
   text-decoration: underline;
   color:#000;
}




/******************
NAVIGATION LINKS STYLING
*************************/
a.nav-links  {

  background-color:#006b8f;
  height: 100%;
  margin: 5px 0px 0px 2px;
  padding: 0px 5px 0px 5px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
  text-decoration:none;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  border: 2px solid black;
}

a.nav-links:hover {
    background-color:#00506b;   
    -moz-box-shadow: 0px 0px 1px black; 
    -webkit-box-shadow: 0px 0px 1px black;
    box-shadow: 0px 0px 1px black;

}

a.nav-links.selected {
  background-color:#00506b;
}

.nav a {
    padding: 10px 40px 10px 40px; 
    width: 100%;
}

.nav ul  {
    list-style: none;   
    margin: 0px 28px;
    padding: 0;
}

.nav li {
    display: inline-block;
    font-size: 14px;
}


/*NAVIGATION SELECTORS*/

.nav {
    text-align: right;
    width: 50%;
    float: right;
    padding-bottom: 2%;
  margin-top: 5%;

}


/*FOOTER*/

.copyright {
  font-family: 'Merienda One', cursive;
}

.copyright {
    max-width: 100%;
    text-align: center;
    margin-top: 64px;
    color: #303030;
}

#date-stamp {
   width: 100%;
  text-align: center;
  margin-bottom: 5px;
  font-size: 13px;
  color: #505050 ;
  font-family: 'Merienda One', cursive;
}

.social-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-bottom: -10px;
  margin-left: 10px;
  margin-top: 50px;
  -moz-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
  -webkit-transition:all .2s ease-out;
  transition:all .2s ease-out;
}

.social-icon:hover {
   -webkit-transform:translate(0px,-12px);
  -moz-transform:translate(0px,-12px);
  -ms-transform:translate(0px,-12px);
  -o-transform:translate(0px,-12px);
  transform:translate(0px,-12px);
}

.github {
  position: fixed;
  width: 100px;
  height: 100px;
  bottom: -14px;

}

.github-chat {
  position:fixed;
  width: 120px;
  height: 100px;
  bottom:45px;
  left: 50px;
}


/******************
INDEX PAGE 
*************************/


.work h2 {
  text-align: center;
  min-width: 90%;
}

.work {
   margin: 0 auto;
    max-width: 70%;
}



.work p {
  text-align: center;
}

.still-learning h2{
  text-align: center;
}

.still-learning p {
  text-align: center;
}

.still-learning {
   margin: 0 auto;
    max-width: 70%;
}
Stephen O'Connor
Stephen O'Connor
22,291 Points

And your HTML.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points 
<body>
     <header class="main-header">
        <div class="image">
          <a href="index.html">
            <img class="intro-pic img" src="img/mainlogo.png" title="Home" alt="logo">
          </a>
        </div>
        <nav class="nav">
          <ul>
            <li><a class="nav-links selected" href="index.html">Home</a></li>
            <li><a class="nav-links" href="about.html">About</a></li>
            <li><a class="nav-links" href="contact.html">Contact</a></li>
          </ul>
        </nav>
    </header>  
      <div class="container"> 
        <div class="work">
          <h2>What you will see!</h2>
          <p>Some things that you can / are going to see on this website,
            in the future is me creating stuff for fun. like websites, simple
            visual programming games and more! (Read more about it in the "About" section)

            A great site i use to learn about all kind of different things is the<a class="Other-links" href="http://teamtreehouse.com" target="_blank">Treehouse</a> website.</p>
        </div>
        <div class="still-learning">
         <h2>Still learning!</h2>
         <p>Im still learning all the things about Web development, web design, and much more, and you never run out of things to learn. Some sites i can reccomend that has great tutorials and forums is <br> <a class="Other-links" href="http://teamtreehouse.com" target="_blank">Treehouse</a> &amp; <a class="Other-links" href="http://sololearn.com" target="_blank">Sololearn</a></p>
        </div>
Stephen O'Connor
Stephen O'Connor
22,291 Points

I can't see what might be causing it here ... can you upload your code to codepen or a test server and post the link? It might be a browser default styling for the image you are using in the header but without being able to inspect it live it is difficult to say.

Have you added a css reset to your stylesheet? Normalize for example?

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

yeah i have added normalize,

and heres a codepen

http://codepen.io/anon/pen/emRgzP

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

you have any idea on how to fix it?

Stephen O'Connor
Stephen O'Connor
22,291 Points

Your codepen doesn't display the image and doesn't look like your posted image so it is very difficult to try and debug. Sorry. If you had it on a server, like a test server I could have a look, but for just now I can't help you I am afraid.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

i added some placehold.it pictures now

http://codepen.io/anon/pen/emRgzP