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 trialEmily Barber
943 PointsMy header color will not change
My header will not change color my main has: a { text-decoration: none; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
logo {
text-align: center; margin: 0; }
a { color:#6ab47b; }
header{ background: #6ab47b; border-color: #599a68; }
and my index has:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Em Barber | Designer</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>Em Barber</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">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul>
<li>
<a href="img/numbers-01.jpg">
<img src"img/numbers-01.jpg" alt="">
<p>Experimentation with colour and texture.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80s style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.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://twitter.com/emmiebarbs"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/embarber"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 Em Barber.</p>
</footer>
</div>
</body>
</html>
12 Answers
Nick Beatty
9,257 PointsIt's hard to tell from how the forum has formatted your post here, but I'm assuming that you have the <header> stuff </header> tags in your index.html?
Nick Beatty
9,257 PointsOh, I see that we have to use cunning backticks to include code. My bad.
So, I assume you have <header> Stuff </header>
in your index.html?
Emily Barber
943 Pointsyes I have: <header> <a href="index.html" id="logo"> <h1>Em Barber</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>
Emily Barber
943 Pointsoh it literally creates it.....I have <header> everything i need inbetween then </header>
Christoph Wischow
Courses Plus Student 305 PointsMaybe it's "background-color:#6ab47b;" not just the word "background:"
Emily Barber
943 PointsI have background right... how do i copy my text and post it on here I dont understand markdown cheat
Christoph Wischow
Courses Plus Student 305 PointsTry to paste it on pastebin like this:
Emily Barber
943 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Em Barber | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<style>
</style>
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Em Barber</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-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with colour and texture.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-06.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-09.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://twitter.com/emmiebarbs"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/embarber"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 Em Barber.</p>
</footer>
</div>
</body>
</html>
Emily Barber
943 PointsOh I cant do it :(
Christoph Wischow
Courses Plus Student 305 PointsHmm, you just have to paste your css/html code into the little frame at http://pastebin.com/ and copy and paste the link into this forum.
If it doesn't work you can send the sourcecode via email/fb to me
Nick Beatty
9,257 PointsYou can use triple back-ticks ( ` ) to put little bits of code in here, if that helps? See the "Markdown Cheatsheet" link below the answer-entry box.
Emily Barber
943 Points1 -
Highcharts Change Bar Color Based on Value
1 +
<!DOCTYPE html>
2 -
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: 'Spiritual Gifts Results'
},
colors: [
'#3BBEE3'
],
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Service'
}
},
series: []
};
var data = document.getElementById("<%= hdn_Data.ClientID %>");
// Split the lines
if (data.value != "") {
var lines = data.value.split('n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
// Create the chart
var chart1 = new Highcharts.Chart(options);
}
});
2 +
<html>
3 -
3 +
<head>
4 -
Categories,Administration,Evangelism,Mercy,Shepherding,Leadership,Wisdom,Teaching Total Points,11,5,4,4,3,2,1
4 +
<meta charset="utf-8">
5 -
5 +
<title>Em Barber | Designer</title>
6 -
series.name = item;
6 +
<link rel="stylesheet" href="css/normalize.css">
7 -
7 +
<link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400,700,700italic,800' rel='stylesheet' type='text/css'>
8 -
series.data.push(parseFloat(item));
8 +
<link rel="stylesheet" href="css/main.css">
9 -
9 +
<style>
10 -
series.color: '#f6f6f6'
10 +
</style>
11 -
11 +
</head>
12 -
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: 'Spiritual Gifts Results'
},
colors: [
'#3BBEE3'
],
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Service'
}
},
series: []
};
var data = document.getElementById("hdn_Data");
// Split the lines
if (data.value != "") {
var lines = data.value.split('n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
var data = {};
if (itemNo == 0) {
series.name = item;
} else {
data.y = parseFloat(item);
if (itemNo <= 3) {
data.color = 'Gray';
}
else {
data.color = '#3BBEE3';
}
series.data.push(data);
}
});
options.series.push(series);
}
});
// Create the chart
var chart1 = new Highcharts.Chart(options);
}
});
12 +
<body>
13
<header>
14
<a href="index.html" id="logo">
15
<h1>Em Barber</h1>
16
<h2>Designer</h2>
17
</a>
18
<nav>
19
<ul>
20
<li><a href="index.html" class="selected">Portfolio</a></li>
21
<li><a href="about.html">About</a></li>
22
<li><a href="contact.html">Contact</a></li>
23
</ul>
24
</nav>
25
</header>
26
<div id="wrapper">
27
<section>
28
<ul id="gallery">
29
<li>
30
<a href="img/numbers-01.jpg">
31
<img src="img/numbers-01.jpg" alt="">
32
<p>Experimentation with colour and texture.</p>
33
</a>
34
</li>
35
<li>
36
<a href="img/numbers-02.jpg">
37
<img src="img/numbers-02.jpg" alt="">
38
<p>Playing with blending modes in Photoshop.</p>
39
</a>
40
</li>
41
<li>
42
<a href="img/numbers-06.jpg">
43
<img src="img/numbers-06.jpg" alt="">
44
<p>Trying to create an 80's style of glows.</p>
45
</a>
46
</li>
47
<li>
48
<a href="img/numbers-09.jpg">
49
<img src="img/numbers-09.jpg" alt="">
50
<p>Drips created using Photoshop brushes.</p>
51
</a>
52
</li>
53
<li>
54
<a href="img/numbers-12.jpg">
55
<img src="img/numbers-12.jpg" alt="">
56
<p>Creating shapes using repetition.</p>
57
</a>
58
</li>
59
</ul>
60
</section>
61
<footer>
62
<a href="http://twitter.com/emmiebarbs"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
63
<a href="http://facebook.com/embarber"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
64
<p>© 2014 Em Barber.</p>
65
</footer>
66
</div>
67
</body>
68
</html>