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
Sean Flanagan
33,235 PointsAre my colours interfering with each other?
Hi. I typed in the following the CSS:
a { color: magenta; }
For the body of the web page I typed:
body { background-color: #fff; color: #999; }
According to Nick Pettit, the code for the body text is supposed to change to grey, but it's still magenta.
Where have I gone wrong?
Thanks in advance
Sean :-)
Sean Flanagan
33,235 PointsThe OU? I didn't mention this on my profile. Marcus H? From Leicester? I was in touch with an OU student by the name of Marcus Handa. Is that you?
Marcus H
4,267 Pointsyeah, small world lol
Sean Flanagan
33,235 PointsHey! How are you doing? I suppose my photo gave me away. I've pulled out of TU100 because of stress. 5 consecutive nights of bad sleep. I was afraid I'd crash my car. I've deferred the module until October. I'll have to start again, but I keep the scores from assignments passed and I needn't pay another penny. I just have to register. How go your OU studies?
Marcus H
4,267 PointsThat's not good, I hope you feel better soon.
I quit the degree last xmas and have been learning web design/dev since February, I found the TU100 too boring and didn't think computer science was be a good fit for me. I'm really enjoying learning this stuff and hoping I can make a career out of it at some point.
Sean Flanagan
33,235 PointsSince I dropped out, the stress has eased considerably. A friend told me about this site. I've been here less than a week and already I'm enjoying learning about how to create a website. How did you find out about Treehouse?
Marcus H
4,267 PointsI'd done a tiny bit of HTML in the past and thought I might like to try and learn it properly this time so looked at some reviews for good place's to learn and treehouse kept getting mentioned so I started the trial and haven't looked back since. I've been learning at other places as well so that's why my score hasn't gone up much lately.
I don't have you on skype any more, not sure what happened there.
Sean Flanagan
33,235 PointsYou've more points than me. How long have you been a member of Treehouse?
Marcus H
4,267 PointsSince the beginning of Feb, what's your skype address again?
4 Answers
Rasmus Willemoes Paulsen
12,436 PointsIn the code you typed only links will be magenta. But regular body copy will be gray. Try have a look at this example I just made.
Sean Flanagan
33,235 PointsHi Rasmus. Hi Dino. I've just looked my workspace over and worked out what happened. The caption under each picture is a link and the links are magenta. As it stands, I've not yet typed any normal text in the body of the page. I'm confident that'll change later on. Thanks guys. :-)
Sean
Sean Flanagan
33,235 PointsI've removed the hyperlink references under the pictures, as they're not really needed, they just bounce you up to the pictures themselves. Then I refreshed the page and the colour of the body text is now grey. So Rasmus, Dino, thank you both very much. I've only been with Treehouse for 4 days and already everyone has been so supportive. :-)
Jason Anello
Courses Plus Student 94,610 PointsI need to remember to refresh the page before answering.
It may not cause you any problems later on but I would change it back so both the image and caption is one big link. This way you can learn the fix for the problems rather than changing the html to make the problem go away.
It's possible you haven't gotten to this yet but there is a css rule which changes the color of these captions.
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7
}
So any text that is inside of a link will need a rule to override that magenta color because text inside of a link will inherit that magenta color.
The h1 and h2 which make up the logo on this project are inside of a link and so they also need their own rule to override that magenta color.
h1, h2 {
color: #fff;
}
Dino Paškvan
Courses Plus Student 44,108 PointsIf that is all of your CSS, then the color of the body text should be grey and only links should appear in magenta, as is visible in this example.
Jason Anello
Courses Plus Student 94,610 PointsWithout being able to see the rest of the css and the html my only guess would be that this body text you're expecting to be grey is inside of a link. This would make it magenta if you do not have any other css to make it a different color.
Sean Flanagan
33,235 PointsHi Jason. I've restored the links. Thanks. :)
Sean
Sean Flanagan
33,235 PointsHi Jason. Here's my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sean Flanagan | Medical Records Clerk</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Sean Flanagan</h1>
<h2>Medical Records Clerk</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>
<li>
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with colour and texture.</p>
</li>
<li>
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</li>
<li>
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</li>
<li>
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</li>
<li>
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</li>
</ul>
</section>
<footer>
<a href="img src="img/Sean.jpg" alt="">
<p>© 2014 Sean Flanagan.</p>
</footer>
</div>
</body>
</html>
And next is my css:
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
#logo {
text-align: center;
margin: 0;
}
a {
color: magenta;
}
header {
background: blue;
border: 3px solid teal;
}
h1, h2 {
color: #fff;
}
nav {
background: red;
}
nav a, nav a:visited {
color: white;
}
nav a.selected, nav a:hover {
color: #0000ff;
}
body {
background-color: #fff;
color: #999;
}
I hope this helps. Thanks. :-)
Sean
Jason Anello
Courses Plus Student 94,610 PointsHi Sean,
It looks like you've removed the links completely. I thought from your earlier comment that you only removed the captions from the links.
You should put the links back in as you see in the project. The point of doing this is so that each gallery item will link to the full size image. You either click the image or its caption and the browser loads the full size image.
Also, it looks like you don't yet have the css I posted which changes that caption color. I would just wait until you get to that part and not worry about the magenta color. It will eventually change once you get to the css I posted.
It looks like you do have the css which changes the logo text to white.
Marcus H
4,267 PointsMarcus H
4,267 PointsHi Sean, how's the studying at OU going?