"From Bootstrap to WordPress" was retired on November 30, 2017. You are now viewing the recommended replacement.

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 How to Make a Website Adding Pages to a Website Add Iconography

Anton Bozhinov
Anton Bozhinov
12,381 Points
Posted by Anton Bozhinov
Anton Bozhinov
12,381 Points

[SOLVED] The header came down a bit in the contact page when copied the code from the about page.

Why is that happening even though they share the same css file ?

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Anton,

Could you post the code so I can have a look?

Cheers,

Ede

Marcus Parsons
Marcus Parsons
15,719 Points

Marked as solved

6 Answers

Anton Bozhinov
Anton Bozhinov
12,381 Points
Anton Bozhinov
Anton Bozhinov
12,381 Points

Hi Ede, thanks for the reply :) Here is the Contact.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Anton Bozhinov | Designer</title>
    <link rel = "stylesheet" href = "css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel = "stylesheet" href = "css/main.css">
    <link rel = "stylesheet" href = "css/responsive.css">
  </head>
  <body>
    <header>
        <a href = "index.html" id="logo">
          <h1>Anton Bozhinov</h1>
          <h2>Designer</h2>
        </a>
      <nav>
        <ul>
          <li><a href = "index.html">Portfolio</a></li>
          <li><a href = "about.html">About</a></li>
          <li><a href = "contact.html" class="selected">Contact</a></li>

        </ul>
      </nav>
    </header>
        <div id="wrapper">
          <section>
            <h3>General info</h3>

            <p>some text</p>
          </section>
          <section>
            <h3>Contact info</h3>
            <p>some text again</p>
            <ul class="contact-info">
              <li><a href= "tel:08899445533">0899445533</a></li>
              <li><a href="mailto:anton.bozhinov@gmail.com">anton.bozhinov@gmail.com</a></li>
            </ul>
          </section>
          <footer>
            <a href = "#"><img src = "img/twitter-wrap.png" alt = "twitter logo" class ="social-icon"></a>
             <a href = "#"><img src = "img/facebook.png" alt = "facebook" class ="social-icon"></a>
            <p>&copy; 2015 Anton Bozhinov</p>
          </footer>
        </div>
  </body>
</html>

The main.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%;
}



/**********************************
HEADING
***********************************/
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;
  margin: -5px 0 0;
  font-weight: normal;
}



/**********************************
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: #ccc;
}
.social-icon {
  width:20px;
  height:20px;
  margin: 0 5px;
}



/**********************************
PAGE: PORTFOLIO
***********************************/

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

#gallery a {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

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


/**********************************
COLORS
***********************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

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

/* nav background on mobile */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}
/**********************************
ABOUT PAGE
***********************************/
.profile-photo {
  display:block;
  max-width: 150px;
  margin: 0 auto 50px; 
  border-radius: 100%;
}

And the about.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Anton Bozhinov | Designer</title>
    <link rel = "stylesheet" href = "css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel = "stylesheet" href = "css/main.css">
    <link rel = "stylesheet" href = "css/responsive.css">
  </head>
  <body>
    <header>
        <a href = "index.html" id="logo">
          <h1>Anton Bozhinov</h1>
          <h2>Designer</h2>
        </a>
      <nav>
        <ul>
          <li><a href = "index.html">Portfolio</a></li>
          <li><a href = "about.html" class="selected">About</a></li>
          <li><a href = "contact.html">Contact</a></li>

        </ul>
      </nav>
    </header>
        <div id="wrapper">
          <section>
            <img src = "img/nick.jpg" alt="Photo of Nick" class = "profile-photo">

            <h3>About me</h3>

            <p> Some description</p>
          </section>
          <footer>
            <a href = "#"><img src = "img/twitter-wrap.png" alt = "twitter logo" class ="social-icon"></a>
             <a href = "#"><img src = "img/facebook.png" alt = "facebook" class ="social-icon"></a>
            <p>&copy; 2015 Anton Bozhinov</p>
          </footer>
        </div>
  </body>
</html>
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Anton Bozhinov, I edited your post so that the code would render properly. Be sure to refer to the Markdown Cheatsheet when posting code and/or save this image for reference:

code

Marcus Parsons
Marcus Parsons
15,719 Points

By the way, I haven't seen a responsive.css file used in this course. Your normalize file should have taken care of removing all of the default styles placed by the browser so that each page will look the same if they have the same code.

edeharrison
seal-mask
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points
edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Anton,

I added a universal style - 

* {
margin: 0; padding: 0;
}

And it worked for me. It's a good method to use in each project to remove the default margin and padding added to things.

Hope that solves it,

Ede

Marcus Parsons
Marcus Parsons
15,719 Points

As a side note, be sure to put this universal selector as the very top most selector in your CSS so that you won't override any margins and/or padding you write into your document.

Anton Bozhinov
Anton Bozhinov
12,381 Points
Anton Bozhinov
Anton Bozhinov
12,381 Points

Thanks Marcus for the tip about Markdown Cheatsheet. It's still my first week on treehouse and I didn't know that.

I putted the universal selector at the very top of the main.css as Marcus said, but that didn't do the job.

I posted the question and continued with the next course, that's why the responsive.css is included,but it's still blank.

P.S It's impressive how quickly you get a response here! Thanks for taking newbies seriously!

Marcus Parsons
Marcus Parsons
15,719 Points

Luckily, the place where I work puts me in front of a computer for a majority of the day so I can have time to help out. But, a lot of fellow students are eager to help out, and that makes this forum quite wonderful indeed. :)

I haven't had time today, though, to take a good, solid look at your code. I will take a look at it when I get a chance and get back to you if you haven't figured it out.

edeharrison
seal-mask
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points
edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Marcus,

Hmm, that's strange. Have you tried copying back the code that Marcus had formatted for you? As I noticed in your original you had missed the body and head tags.

Hope that's fruitful!

Ede

Marcus Parsons
Marcus Parsons
15,719 Points

Actually, I didn't do anything to the code he had besides wrap within 3 backticks. The problem is that when you don't wrap code here on the forums, certain tags will look as though they are missing, even though they aren't. All of the code you see there is what he copied and pasted in.

Anton Bozhinov
Anton Bozhinov
12,381 Points
Anton Bozhinov
Anton Bozhinov
12,381 Points

I deleted the contact.html file and rewrite it again. The problem is solved, but the mistery remains :)

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Yep, these things happen. Glad you got it sorted anyway. It's most likely to have been a small typo or error.