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 trialNathan McNiece
8,590 PointsHeader 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>© 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>© 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>© 2014 Nick Pettit.</p>
</footer>
</div>
</body> </html>
3 Answers
Umar A
4,041 PointsI 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
Matt Cantrill
5,685 PointsIt doesn't look like you have a closing head tag. Make sur that it is right above the opening body tag.
Nathan McNiece
8,590 PointsThanks 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
5,685 PointsTry 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.
Nathan McNiece
8,590 PointsNathan McNiece
8,590 PointsHi 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.