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
amit shekhar
5,433 Pointsmy main.css commands are not working for .contact.html page .. i have made the same way but its not working
i am adding this css in main.css but it's not showing any changes in preview.
/************
PAGE: CONTACT
************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
background-image: url('../img/twitter-wrap.png');
}
5 Answers
Jovanny Elias
16,204 PointsIf you change something on the .css file does anything change at all? if not it may be the way you linked your css file in your contacts page. please post your html of the contacts page so we can see how you linked your css file. that may be the issue.
Jovanny Elias
16,204 Pointsis your .css file under the same file directory as your html file if not you may need to add a "../" before your main.css file to look something like this ../(name of folder holding your css)/main.css
amit shekhar
5,433 PointsThis is my contact.html page. i can not ad "../" before main.css file . i tried to add but workspace main.css did not accept this format of file name "../" i am learning how to make a website Track. This is my contact.html page . CSS is working for about.html , index.html but not with this page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Amit shekhar | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html"id="logo">
<h1>Amit Shekhar</h1>
<h2>Designer</h2>
<a/>
<nav>
<ul>
<li><a href="index.html" >Prortfolio</a></li>
<li><a href="about.html" >About</a></li>
<li><a href="contact.html" class="selected">Contact<a/></li>
</ul>
</nav>
</header>
<div id= "wrapper">
<section>
<h3>General Information</h3>
</section>
<p>I am not currently looking for design work but i am available for .. contact me </p>
<p>Please only use phone contact for urgent in queris otherwise twitter and facebook.</p>
<section>
<h3>Contact Details</h3>
<ul class="Contact-info">
<li class="Phone"> <a href= "tel:555-6425">555-6425</a></li>
<li class="mail"><a href= "mailto:amit@example.com">amit@example.com</a></li>
<li class="Twitter"> <a href= "http://twitter.com/intent/tweet?screen_name=@iamamitshekhar">@iamamitshekhar</a></li>
</ul>
</section>
<footer>
<a href="http://www.twitter.com/imamitshekhar"><img src="img/twitter-wrap.png" alt="Twitter Logo" class= "social-icon"></a>
<a href="http://www.facebook.com/amitshekharreal"><img src="img/facebook-wrap.png" alt="Facebook Logo" class= "social-icon"></a>
<p>© 2014 Amit shekhar.</p>
</footer>
</div>
</body>
</html>
Jovanny Elias
16,204 PointsOk I see your issue the It should look as follows
<link rel="stylesheet" type="text/css" href="mystyle.css">
you did not include the type which is important as that is what tells the browser how the document should be read
Jovanny Elias
16,204 Pointsyou can read a little more about how to link css files here
amit shekhar
5,433 PointsThanks for your support but its not working i added and checked.. i am kind of newbie .
Nick petit class they have not added type css <link rel="stylesheet" type="text/css" href="mystyle.css">
in the Nick Petit video , this is the way they are teaching us. <link rel="stylesheet" href="css/normalize.css">
i am following nick petit How to make a website , add a contact page and add iconography.. these icons are not showing and other css changes though the page is created and showing but not any Css Changes.
Jovanny Elias
16,204 PointsI don't remember exactly on how he taught it but let me take a look maybe i am the one missing something.
Jovanny Elias
16,204 PointsI think i found the issue. every time on your html page that you write down your id or class you have a space after the = you are also adding spaces after your href=. try removing the spaces as syntax errors are by far the most common issue when your first starting also many pros do it so dont feel bad thats always the first thing that gets overlooked when you come across an error. below is an example of what you have and what it should be.
</header>
<div id= "wrapper">
<section>
delete the space as follows
</header>
<div id="wrapper">
<section>
same goes for the href
<li class="mail"><a href= "mailto:amit@example.com">amit@example.com</a></li>
should be
<li class="mail"><a href="mailto:amit@example.com">amit@example.com</a></li>
Jovanny Elias
16,204 Pointsplease let me know if this solves the issue.
also here is a guide for the proper way of writing your syntax for classes. Its basically the same as I said above but worth a quick look.
Jovanny Elias
16,204 PointsJovanny Elias
16,204 Pointshi I went ahead and edited your code to show up correctly on the forum. it makes it easy to read. follow the markdown cheatsheet directions. Or press edit under your post to see what I did to make your code look like this.