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 Faisal Rahimi
Faisal Rahimi
4,019 Points

can anyone help me please, I'm trying to get a full header on the browser but it's not happening. below is my code.

<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>I AM | JASON</title>
<link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400,700italic,400italic,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="iamhumen.css">
</head>
 <body>
  <header>
   <a href="index.html" id="logo">
    <h1>I AM JASON</h1>
     <h2>WE ARE ONE</h2>
   </a>

    <nav>
     <ul>


      <li><a href="index.html" class="fg">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="our world.html">Our World</a></li>

     </ul>
    </nav> 

  </header>

   <div id="wrapper">

    <section>

     <ul id="gallery">
      <li>
        <a href="img/101.jpg">
        <img src="img/101.jpg" alt="">
        <p></p></a>
      </li> 

      <li>
        <a href="img/105.jpg">
        <img src="img/105.jpg" alt="">
        <p></p></a>
      </li> 

      <li>
        <a href="img/103.jpg">
        <img src="img/103.jpg" alt="">
        <p></p></a>
      </li> 

      <li>
        <a href="img/104.jpg">
        <img src="img/104.jpg" alt="">
        <p></p></a>
      </li> 

      <li>
        <a href="img/102.jpg">
        <img src="img/102.jpg" alt="">
        <p></p></a>
      </li> 
     </ul> 

    </section>

     <footer>

     <a href="http://facebook.com/faisal.rahimi2"><img src="img/facebook-wrap.png" alt="facebook-logo">
     <a href="http//twitter.com/faisal.rahimi2"><img src="img/twitter-wrap.png" alt="twitter-logo">
     <p>&copy; 2015 Faisal Rahimi</p>
     </footer>

    </div>
 </body>
</html>

/*******************
   GENERAL
*******************/


body{
font-family:'Open sans',sans-serif;
}

a{
text-decoration: none;
}

#wrapper{
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}


img{
max-width: 100%;
}


/*******************
   HEADING
*******************/

header{
float: left;
margin: 0px auto;
padding: 5px 0 0px 0;
min-width: 100%;


}

#logo{
text-align:center;
margin: 0px;
}

h1{
font-family:'changa one',sans-serif;
font-weight: normal;
margin:15px 0;
font-size: 1.75em;
line-height: 0.8em;
}

h2{
font-weight: normal;
font-size: 1.20em;
margin: -5px 0 0;
}


/*******************
   NAVIGATION
*******************/

nav{
text-align: center;
padding: 10px 0;
margin: 20px 0 0;

}

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

nav li{
display: inline-block;
}

nav a{
font-weight: 800;
padding: 15px 10px;
}

/*******************
   FOOTER
*******************/

footer{
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: red;
n n,
}

/*******************
   PAGE; PORTFOLIO
*******************/

#gallery{
margin: 0;
padding: 0;
list-style: none;
}
#gallery li{
float: left;
width: 45%;
margin: 2.5%;
background-color:#EDDBA6;
}
#gallery li a p{
margin: 0;
padding: 5%;
font-size: 1em;
color:#B2C247;
}


/********************
     COLORS
********************/
body{
background-color: #fff;
color: #CCC;
}

header{
background-color:#EDDBA6;
border-color: #E3C773;
}
nav {
background-color:#B2C247;
}

h1,h2{
color: #B2C247;
}


a{
color: red;
}
footer{
color: purple;
}


nav a, nav a:visited{
color:#fff;
}
nav a.fg, nav a:hover{
color:#99AD3D;
}

14 Answers

Tobias Mahnert
Tobias Mahnert
89,414 Points

so I assume above I AM Jason is the opening Div tag with the wrapper class? Try to put your nav section above the div, that should fix the problem

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

did you try putting your img as background image in css?

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

also your html markup is unusual. Try starting with some 

<html>
  <body>
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
  </body>
</html>
Faisal Rahimi
Faisal Rahimi
4,019 Points
Faisal Rahimi
Faisal Rahimi
4,019 Points

no i have not, but i just want my header to cover from left to right and top.

Faisal Rahimi
Faisal Rahimi
4,019 Points
Faisal Rahimi
Faisal Rahimi
4,019 Points

this is the top half of my html that the above image has not covered;

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>I AM | HUMEN</title> <link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400,700italic,400italic,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="iamhumen.css"> </head> <body> <header> <a href="index.html" id="logo">

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

Could you post the complete html? I have a feeling that your wrapper class maybe gives you trouble with its max-width property

Faisal Rahimi
Faisal Rahimi
4,019 Points
Faisal Rahimi
Faisal Rahimi
4,019 Points

for some reason the site won't let me send you the complete file, but here is the top bid;

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>I AM | JASON</title> <link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400,700italic,400italic,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="iamjason.css"> </head> <body> <header> <a href="index.html" id="logo">

Faisal Rahimi
Faisal Rahimi
4,019 Points
Faisal Rahimi
Faisal Rahimi
4,019 Points

this is so weird the above code i copy paste it but some of the tags are missing like the closing header and the div starting tag. OK i will try that, but i don't think that's the problem.

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

normally you put your nav into the header section btw

Faisal Rahimi
Faisal Rahimi
4,019 Points
Faisal Rahimi
Faisal Rahimi
4,019 Points

it is but when i copy paste it it doesn't show it here.

Faisal Rahimi
Faisal Rahimi
4,019 Points
Faisal Rahimi
Faisal Rahimi
4,019 Points

i just tried this and it worked, but how do i add border color?

<!DOCTYPE html> <html> <body> <head> <title>hello world</title> <style>

header{ background-color: red; text-align: center; margin: -22px -15px 0;

}

h1,h2{ font-family: sans-serif; font-size: 1.85em;

} </style> </head> <header> <h1>HELLO WORLD</h1> <h2>This is a test</h2> </header> </body> </html>

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

just add to your css

"EDIT"

border-color:  1px solid red;
Faisal Rahimi
Faisal Rahimi
4,019 Points
Faisal Rahimi
Faisal Rahimi
4,019 Points

its not working,

<style> header{ background-color: red; border-color: 1px solid red; text-align: center; margin: -22px -15px 0; } </style>

Kevin Kenger
Kevin Kenger
32,834 Points

Just use the border property instead of border-color.

border: 1px solid red;

Also, if the background color of your header is red, and your border is red, you won't be able to see the border.

Faisal Rahimi
Faisal Rahimi
4,019 Points
Faisal Rahimi
Faisal Rahimi
4,019 Points

i have a fixed position of the header now but cant get the border color.