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 Responsive Web Design and Testing Adjust the Profile Page and Header

Posted by Nathan McNiece
Nathan McNiece
8,590 Points

Header and Navigation not adjusting.

For some unknown reason, the header and navigation bar are failing to float to the left and right. I know it is not an issue with css as I have copied the css from the project downloads to make sure. However, there doesn't seem to be an issue with my html.

Index.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nathan McNiece | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' 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> Nathan McNiece </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> <ul id="gallery"> <li> <a href="img/numbers-o1.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with colour and texture.</p> </a> </li>

          <li>
          <a href="img/numbers-o2.jpg">
          <img src="img/numbers-02.jpg" alt="">
          <p>Playing with blending modes in photoshop.</p>
            </a>
        </li>

        <li>
          <a href="img/numbers-o6.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p>Trying to create an 80's style of glows.</p>
            </a>
        </li>

        <li>
          <a href="img/numbers-o9.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Drips created using Photoshop brushes.</p>
            </a>
        </li>

        <li>
          <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt="">
          <p>Creating shapes using repetition.</p>
            </a>
        </li>

      </ul>
  </section>
  <footer>
    <a href="http//::facebook.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> 
    <a href="http//::facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
    <p>&copy; 2014 Nathan McNiece.</p>
  </footer>
</div>
</body>

</html>

about.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nathan McNiece | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' 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> Nathan McNiece </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="Photograph of Nick Pettit" class="profile-photo"> <h3>About</h3> <p> Hi, I'm Nathan McNiece! This is my design portfolio where I share all of my favourite work. I am a sports fanatic and relish the opportunity to design websites with sporting elements.</p>

  </section>
  <footer>
    <a href="http//::facebook.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> 
    <a href="http//::facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
    <p>&copy; 2014 Nathan McNiece.</p>
  </footer>
</div>
</body>

</html>

contact.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nathan McNiece | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' 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>Nathan McNiece</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 id="primary"> <h3>General Information</h3> <p>I am not currently looking for new design work. However, I am available for speaking gigs and similair engagements. If you have any questions please dont hesitate to contact me. My best point of contact is generall email.</p> </section>

  <section id="secondary">
      <h3>Contact Details</h3>
    <ul class="contact-info">
      <li class="phone"><a href="tel:0422678086">0422678086</a></li>
      <li class="mail"><a href="mailto:nathan@sempercreative.com">nathan@sempercreative.com</a></li>
      <li class="twitter"><a href="http://twitter.com">@sempercreative</a></li>
    </ul>
  </section>
  <footer>
    <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
    <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
    <p>&copy; 2014 Nick Pettit.</p>
  </footer>
</div>

</body> </html>

3 Answers

Umar A
Umar A
4,041 Points
Umar A
Umar A
4,041 Points

I don't see anything wrong with your html! I copied your code and used it with my style.css and it worked!

Take a look at this photo

Nathan McNiece
Nathan McNiece
8,590 Points

Hi Umar, thank you for your reply. Instead of having the logo and navigation centred on the desktop screen, I am trying to get them to float to the left and right respectively. Like this:

So it will say Nathan McNiece, Designer; on the left. And Profile - About - Contact to the right of the screen.

Matt Cantrill
Matt Cantrill
5,685 Points
Matt Cantrill
Matt Cantrill
5,685 Points

It doesn't look like you have a closing head tag. Make sur that it is right above the opening body tag.

Nathan McNiece
Nathan McNiece
8,590 Points

Thanks for your response Matt. However, I do have a closing body tags on all html docs, I have placed them where the video has directed.

Matt Cantrill
Matt Cantrill
5,685 Points
Matt Cantrill
Matt Cantrill
5,685 Points

Try this code: '''HTML <head> <meta charset="utf-8"> <title>Nathan McNiece | Designer</title> <link rel= "stylesheet" href="ADD THE NAME OF THE CSS STYLESHEET HERE"> </head> <body> <header> <a href="index.html" id="logo"> <h1> Nathan McNiece </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> <ul id="gallery"> <li> <a href="img/numbers-o1.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with colour and texture.</p> </a> </li>

      <li>
      <a href="img/numbers-o2.jpg">
      <img src="img/numbers-02.jpg" alt="">
      <p>Playing with blending modes in photoshop.</p>
        </a>
    </li>

    <li>
      <a href="img/numbers-o6.jpg">
      <img src="img/numbers-06.jpg" alt="">
      <p>Trying to create an 80's style of glows.</p>
        </a>
    </li>

    <li>
      <a href="img/numbers-o9.jpg">
      <img src="img/numbers-09.jpg" alt="">
      <p>Drips created using Photoshop brushes.</p>
        </a>
    </li>

    <li>
      <a href="img/numbers-12.jpg">
      <img src="img/numbers-12.jpg" alt="">
      <p>Creating shapes using repetition.</p>
        </a>
    </li>

  </ul>

</section> <footer> <a href="http//::facebook.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http//::facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Nathan McNiece.</p> </footer> </div> </body> ''' And that should add the css to your webpage.