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 trialAmon Dow III
4,086 PointsMy header border does not extent across the full top screen like nick header border i need help
My green border does not extent along the full webpage like in the video for some weird reason is inserting a small space along the two edges i believe my code is the exact same here here is my code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Amon First Website | Construction Profolio </title>
<link rel="stylesheet" href="css/normalize.css">
<!--This is a comment. this customize font link must go before the main code-->
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="amonindex.html"id="logo">
<h1>Amon Dow</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li>
<a href="amonindex.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>
<li>
<a href="img/numbers-01.jpg" alt="">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color and texture</p>
</a>
</li>
<li>
<img src="img/green-frog.jpg" alt"" >
<p>Blah</p>
</li>
<li>
<a href="img/numbers-02.jpg" >
<img src="img/numbers-02.jpg" alt="">
<p>Blah</p>
</a>
<li>
<a href= "img/numbers-06.jpg" >
<img src="img/numbers-06.jpg" alt="">
<p>Blah</p>
</a>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Blah</p>
</a>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Blah</p>
</a>
<p>
Gallery will go here
</p>
</ul>
</section>
<footer>
© 2015 Amon Dow III.
</footer>
</div>
</body>
</html>```
```css
/*General Notes Style Apply to whole page layout
*
*
*/
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
/*******************************Heading************************************************/
#logo {
text-align: center;
margin: 0;
}
h1{
font-family:'Changa One', sans-serif;
margin: 15px 0;
font-size:1.75em;
}
/************************************Color********************************************/
/********************************* body site********************************************* */
body {
background-color: #fff;
color: #999;
}
/********************************Header************************************************
*
*
*/
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
padding:0;
margin:0;
}
nav {
background: #599A68;
}
/*header backgound color for text */
h1, h2 {
color: #fff;
}
/*links*/
a {
color: #999;
}
nav a {
color: #fff;
}
nav a:visited {
color: #fff;
}
/* selected nav links */
nav a .selected, nav a:hover {
color: blue;
}```
2 Answers
Benjamin Payne
8,142 PointsHey Amon,
One thing I notice right off the bat is that the doctype should be just html
. Below is a HTML5 valid setup from emmet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
This is by no means a 'be all end all' but the old html4 doctype you have above should be updated.
I can't see where you have a width set for the nav
element so try adding the following code to your css.
nav {
display: block;
width: 100%;
}
Let me know if that helps,
Ben
Christopher Sea
3,726 PointsNot sure, but maybe the alt"" after the green-frog.jpg is causing a problem. should be alt=""
Amon Dow III
4,086 PointsAmon Dow III
4,086 PointsI try inserting the code in my css but it did not work And i am using aptana studio3 so how would you update it to html5
Amon Dow III
4,086 PointsAmon Dow III
4,086 Pointsi tried adding inserting the code into my css file and it did not work but how to i update the version to html5 i using aptana studio3
Amon Dow III
4,086 PointsAmon Dow III
4,086 Pointsi tried adding inserting the code into my css file and it did not work but how to i update the version to html5 i using aptana studio3
Amon Dow III
4,086 PointsAmon Dow III
4,086 Pointsi tried adding inserting the code into my css file and it did not work but how to i update the version to html5 i using aptana studio3