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
Patrick McDermott
2,377 PointsNeed help- Not sure whether it is the CSS or HTML
I am trying to start my first website. I have set a div labeled container which holds all my coding. Width is 800px, and my two pieces of texts are 380px width, with 20px margin on the left hand side of the left piece of text, and 20px margin to the right on my right piece of text. I am trying to create a footer which I want different colour to lie at the bottom. When I change the colour, my pieces of texts AND my footer change colour. I dont know why its changing both when I have only selected my footer to change.
HTML---------
<!DOCTYPE html> <html>
<head> <title>Home | P&R Designs</title> <link rel="stylesheet" href="normalise.css"> <link rel="stylesheet" href="color.css">
</head>
<body> <div class="container">
<ul class="nav">
<li><a href="home.html">Home</a></li>
<li><a href="aboutus.html">About us</a></li>
<li><a href="service.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="port.html">Portfolio</a></li>
</ul>
<div class="box"></div>
<div class="main1">
<h2>Home</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="main2">
<h2>Home</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="footer">
<p> Email: macdermott_3@hotmail.com<br>Mobile: 07534934730<br>Work: 01789 268479</p>
</div>
</div>
</body> </html>
AND MY CSS---------------------
html { font-family: sans-serif; }
.nav { margin-top: 0px; height: 100px; margin: 0px 20px 0px 20px; padding: 10px 20px 10px 20px; width: 800px; }
.container { height: 100%; width: 800px; margin: auto; }
.box { width: 760px; height: 300px; margin: auto; background: black; }
footer {
height: 10px;
margin: 50px 20px 10px 20px;
background-color: blue;
}
/* body width: 800px column width: 390px gutter width: 20px
*/
.main1 { width: 380px; float: left; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 20px; }
.main2 {
width: 380px;
float: right;
padding: 0px 0px 0px 0px;
margin: 0px 20px 0px 0px;
}
.nav { width: 760px; }
If anyone can help me out It would be very appreciated
Cheers
5 Answers
Graham Davidson
Courses Plus Student 14,966 PointsHi Patrick
Is this online anywhere to take a look at?
G
Graham Davidson
Courses Plus Student 14,966 PointsNot sure if this helps but you are using
div id="footer"
and then referring to footer in the style sheet instead of #footer
I would just use sectional code and change that section to be footer as opposed to a div
G
Patrick McDermott
2,377 PointsIll give it a go. Im also using the normalize.css, so im going to have quick look through that in case something is causing it there
Cheers
Patrick McDermott
2,377 PointsDid it! Had to clear both from the floats :)
Cheers
Dani Kellogg
Full Stack JavaScript Techdegree Student 16,734 PointsI think Graham may be right. The CSS needs the "#" for the id "footer".
Patrick McDermott
2,377 PointsDid it! Had to clear both from the floats :)
Cheers
Patrick McDermott
2,377 PointsYeah, I changed it but still the text turns colour. I can change everything about the footer, but the colour for some reason starts half way up the page. Could it be my heights and widths I have set for other elements?
Cheers
Graham Davidson
Courses Plus Student 14,966 PointsCould you stick the code on http://codepen.io/ and I/we will be able to troubleshoot it for you easier.
G
Patrick McDermott
2,377 PointsPatrick McDermott
2,377 Pointsnot at the moment, I literally just started, I can change the text of the footer on its own, the alignment, everything, but when I change the colour, it changes the footer and text