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
Mohammed tefou
1,507 PointsThis website I'm making is similar to the Tutorial video on this site. I have a slight issue with adding a new page
I do know how to add another page, I've copied and pasted the entire original html file to my other new page's file, but the issue is.. whenever i load the new page, everything seems to be enlarged and the body is moved to the right hand side
5 Answers
Kristopher Van Sant
Courses Plus Student 18,830 PointsHey there! In addition to what the others have said, there are a few other things I noticed.
Divs should be placed only in the body. It could be considered bad practice to place divs outside of the body. Here you have a div, with the ID headwrapper, that is being opened above the opening head tag. If you are trying to style the document as a whole, you can select the html element or the body element. There is no need to put stylings around the head element since this portion doesn't display on your site anyways. Is this div meant for the header inside the body?
You also have two closing div tags floating around. One is after the header tag. Is this for the opening div tag with the ID headwrapper? If so place before the opening header tag. And the other is towards the bottom above the closing body tag. Is this for the div with the ID wrapper? If so it should come after the closing section tag since you opened it before the section tag.
You’re missing a closing list tag for your “Latest Offers” link
I recommend doing a little research on wrappers and their proper placement. Also try looking at some style guides for HTML and CSS, or even compare what you have to other sites. Your code is a little messy to read but can easily be cleaned up with a few fixes here and there.
You’re doing great so far though! It can be confusing at first when it comes to remembering where to put everything. You can easily get lost in your code. Keep up the awesome work!!
Happy Coding :)
Hannah Mackaness
4,437 PointsHeya,
Pleas can you past the code? Maybe then I can help
Thanks, Hannah
Mohammed tefou
1,507 Points<!DOCTYPE html>
<html>
<div id="HeadWrapper"
<head>
<meta charset="utf-8">
<title> Mohammed</title>
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="C:\Users\Mohammed.Hanad\Desktop\Website\stylesheet.css">
</head>
<body>
<header>
<a href="aboutus.html" id="logo">
<h1> Mohammed's</h1>
<h2>Website</h2>
</a>
<nav>
<ul id="navmenu">
<li><a href="latestoffers.html" class="selected">Latest Offers</a>
<li><a href="newcars.html"> New Cars</a>
<ul class="sub1">
<li><a href="mercedes.html"> Mercedes</a></li>
<li><a href="mazda.html"> Mazda</a></li>
<li><a href="toyota.html"> Toyota</a></li>
</ul>
</li>
<li><a href="usedcars.html">Used Cars</a></li>
<li><a href="fleetandbusiness.html"> Fleet and Business</a></li>
<li><a href="financeandinsurance.html">Finance and insurance</a></li>
<li><a href="ownersarea.html"> Owner's Area</a></li>
<li><a href="aboutus.html">About Us</a></li>
</ul>
</nav>
</header></div>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="numbers-01.jpg">
<img src="numbers-01.jpg" alt"">
<p>Experimenting color and texture</p>
</a>
</li>
<li>
<a href="numbers-02.jpg">
<img src="numbers-02.jpg" alt"">
<p>Experimenting color and texture</p>
</a>
</li>
<li>
<a href="numbers-06.jpg">
<img src="numbers-06.jpg" alt"">
<p>Experimenting color and texture</p>
</a>
</li>
<li>
<a href="numbers-09.jpg">
<img src="numbers-09.jpg" alt"">
<p>Experimenting color and texture</p>
</a>
</li>
<li>
<a href="numbers-12.jpg">
<img src="numbers-12.jpg" alt"">
<p>Experimenting color and texture</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com"><img src="twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com"> <img src="facebook-wrap.png" alt="Facebook"></a>
<p>
2015 Mohammed
</p>
</footer>
</div>
</body>
</html>
Mohammed tefou
1,507 Pointsmy css:
/**********************
GENERAL
***********************/
body {
font-family: 'Open Sans', sans-serif;
}
html {overflow: scroll;
}
#wrapper {
width: 1000px;
margin: 0 auto;
padding: 0 5%;
}
#HeadWrapper {
width:90%;margin:auto;min-width:2000px;max-width:2000px
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/**********************
Heading
***********************/
ul#navmenu {
list-style: none;
text-align: center;
outline: none;
width: 1300px;
float: right;
position: relative;
margin-right: 277px
}
/*Hovering*/
ul#navmenu li:hover > a {
background-color: gray;
}
ul#navmenu li:hover a:hover {
background-color: gray;
}
/*positioning*/
ul#navmenu ul.sub1 {
display: none;
position: absolute;
top: 47px;
left: 0px;
}
ul#navmenu .sub1 li {
margin-top: 0px;
list-style-type: none;
margin-left: -40.5px;
}
ul#navmenu .sub1 a {
margin-top: 0px;
}
/*dropdowntime*/
ul#navmenu li:hover .sub1 {
display:block;
margin-top: 0px;
}
ul#navmenu a {
text-decoration: none;
display: block;
width: 125px;
height: 50px;
background-color: #080808;;
}
ul#navmenu li{
width: 180px;
text-align: center;
position: relative;
float: left;
}
nav {
text-align: center;
padding: 100px 0;
margin: 20px 0 0;
}
#logo {
text-align: center;
margin:o;
}
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
***********************/
/**********************
FOOTER
***********************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color:#ccc;
}
/**********************
PAGE: PORTOFOLIO
***********************/
#gallery {
margin: 0;
padding 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 1.2em;
color: #bdc3c7;
}
}
}
/**********************
COLOURS
***********************/
/* site body */
body {
background-color: #fff;
color:#999
}
/*green header */
header {
background: #000000;
border-color:#080808;
}
/*nav background on mobile*/
nav { background-color:#080808;
}
h1, h2 {
color: #fff;
}
/*link colour*/
a {
color:#080808;
}
nav a, nav a:visited {
color: #fff;
}
/*selected nav link colour*/
nav a.selected, nav a:hover {
color:#white;
}
Hannah Mackaness
4,437 PointsI haven't looked at the whole code..and I'm quite new..but what happens if you close the div tag at the top?
Mohammed tefou
1,507 PointsIt's already closed just before the wrapper div
Hannah Mackaness
4,437 Pointsthe third line of code looks like it's missing a > ?
Mohammed tefou
1,507 PointsYes I've fixed that, but I knew it wasn't the cause as the same missing > was in my original file too and it looks fine compared to my new page
Rudy Tan
Courses Plus Student 16,635 PointsYou kinda have too many curly brackets there in your CSS. In your PORTFOLIO section.
Mohammed tefou
1,507 PointsMohammed tefou
1,507 PointsIt's weird how my original html file named "index.html" is fine but when i load my other page, that error occurs