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

HTML How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

samarth shukla
samarth shukla
928 Points
Posted by samarth shukla
samarth shukla
928 Points

header in CSS to color the top of header is not working on Portfolio page

header{ float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; } is not working for Portfolio page but same is working in About and Contact page.

When made header as

header{ float: left; margin: -20px 0 30px 0; padding: 5px 0 0 0; width: 100%; }

it worked fine for portfolio but margin reduced lot for About and contact page.

Aaron Wuerch
Aaron Wuerch
7,024 Points
Aaron Wuerch
Aaron Wuerch
7,024 Points

What exactly means not working? can you explain your question alittle more. Is it the Logo name or the nav or what?

samarth shukla
samarth shukla
928 Points
samarth shukla
samarth shukla
928 Points

header{ float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; } Above mentioned syntax is used to remove the background gap which is coming above header. This syntax works fine for About page and syntax page and the gap gets removed and covered by header's background color. but for portfolio page this syntax makes difference but that gap is not removed.

header{ float: left; margin: -20px 0 30px 0; padding: 5px 0 0 0; width: 100%; } So when I adjust above syntax margin in negative a little to -20Px that gap get's removed on portfolio page and looks fine also but then on About page and Contact page margin gets reduced for top.

Mark Casavantes
Mark Casavantes
Courses Plus Student 13,401 Points
Mark Casavantes
Mark Casavantes
Courses Plus Student 13,401 Points

Hi Samarth,

Please copy and paste your code with placed before all your code and after all your code. Everyone who is trying to help you will be able to do so a lot easier.

samarth shukla
samarth shukla
928 Points
samarth shukla
samarth shukla
928 Points

'''html <!DOCTYPE html> <html> <head> <meta charset= "utf-8"> <title> Samarth Shukla | Designer </title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800italic,800,400italic,600italic,700italic|Changa+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> <body> <header> <a href= "index.html" id="logo"> <h1> Samarth Shukla</h1> <h2> Designer </h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section id="gallery"> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>first image...</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>feeling good</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>i'll learn it soon...</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>it's not that much difficult</p> </a>

          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>at last feeling goooddddd!!! </p>
            </a>
          </li>
        </ul>
  </section>
  <footer>
    <a href="http://www.facebook.com">
          <img src="img/facebook.png" alt="Facebook" class="social-icon">
    </a>
    <a href="http://www.twitter.com">
          <img src="img/twitter.png" alt="Twitter" class="social-icon">
    </a>
    <p>&copy; 2014 ABCD ABCD</p>
  </footer>
</div>

</body> </html> ''' '''CSS /***************** general *****************/ body{ font-family: 'open-sans', sans-serif; }

wrapper{

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

a{ text-decoration:none; }

img{ max-width: 100%; }

h3{ margin: 0 0 1em 0; } /***************************/ /*Header/ /****************************/

/***************** Headin ****************/

header{ float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo{

text-align:center; margin: 0; }

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

h2{ font-size: 0.75em; /* padding: -5px 0 0;*/ font-weight: normal; }

/h3{ font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 2em; }/ /.selected{ color: #ffafa0; }/

/******************* 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; } /* /

/****************** Text ******************/

/******************************* Footer *******************************/

footer{ font-size: 0.75em; text-align:center; clear:both; padding-top:50px; color: #999; } .social-icon{ width:20px; height:20px; margin:0 5px; }

/******************************** Portfolio ********************************/

gallery{

margin: 0; padding: 0; list-style:none; }

gallery li{

list-style:none; float: left; width: 45%; margin: 2.5%; background-color: #fff; color: #bdc3c7; }

gallery li a p{

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

/******************************** Page: About ********************************/ .profile-photo{ display:block; max-width: 150px; margin: 0 auto 30px; border-radius:100%;

}

/******************************** Page: Contact ********************************/ .contact-info{ list-style:none; padding:0; margin: 0; font-size:0.9em; }

.contact-info a { display:block; min-height:20px; background-repeat:no-repeat; background-size:20px 20px; padding:0 0 0 30px; margin: 0 0 0 10px; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter-wrap.png'); }

/*********************************** body colors ***********************************/

/body{ background: #fff; color: #999; }/

header{ background: #6ab47b; border-color: #599a68; }

p{ color: #000; }

h1, h2{ color: #fff; }

nav{ background-color: #32ff6b; }

nav a, nav a:visited{ color: #fff; }

nav a:hover{ color: #6ba4d4; } nav a.selected{ color:#32673f; }

'''

1 Answer

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

Your CSS file is full of typo's and missing # on lots of your ID elements. If you look back through your css file you will find lots of foward slashes "/" causing lots of your css file not to work. Also if you look at "wrapper", "logo", "gallery", "gallery li" "gallery li a p" they are all missing # in your css file.

/***************** general *****************/

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

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

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

h3 {
    margin: 0 0 1em 0;
}


/*******************  Header **********************/ 


header {
    float: left;
    margin: 0 0 30px 0;
    padding: 5px 0 0 0;
    width: 100%;
}

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

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

h2 {
    font-size: 0.75em;
    /* padding: -5px 0 0;*/

    font-weight: normal;
}

h3 {
    font-family: 'Changa One', sans-serif;
    margin: 15px 0;
    font-size: 2em;
}

.selected {
    color: #ffafa0;
}


/******************* 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;
}

/****************** Text ******************/
/******************************* Footer *******************************/

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

.social-icon {
    width: 20px;
    height: 20px;
    margin: 0 5px;
}
/******************************** Portfolio ********************************/

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li {
    list-style: none;
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #fff;
    color: #bdc3c7;
}

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: #bdc3c7;
}
/******************************** Page: About ********************************/

.profile-photo {
    display: block;
    max-width: 150px;
    margin: 0 auto 30px;
    border-radius: 100%;
}
/******************************** Page: Contact ********************************/

.contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
}

.contact-info a {
    display: block;
    min-height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding: 0 0 0 30px;
    margin: 0 0 0 10px;
}

.contact-info li.phone a {
    background-image: url('../img/phone.png');
}

.contact-info li.mail a {
    background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
    background-image: url('../img/twitter-wrap.png');
}

/*********************************** body colors ***********************************/

body {
    background: #fff;
    color: #999;
}

header {
    background: #6ab47b;
    border-color: #599a68;
}

p {
    color: #000;
}

h1,
h2 {
    color: #fff;
}

nav {
    background-color: #32ff6b;
}

nav a,
nav a:visited {
    color: #fff;
}

nav a:hover {
    color: #6ba4d4;
}

nav a.selected {
    color: #32673f;
}