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 trialmelissa brown
4,670 PointsMargins not changing
When I add a margin of 10px on the bottom of the a elements, I don't see an increased space between the lines.
Main css
/* ************************************
GENERAL
***************************************/
body {
font-family: 'open sans', sans-serif;
}
#wrapper {
max-width:940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width:100%;
}
h3{
margin: 0 0 1em 0;
}
/* ************************************
HEADING
***************************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Special Elite', 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
***************************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li{
display:inline-block;
}
nav a{
font-weight: 800;
padding: 14px 10px;
}
/* ************************************
footer
***************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5%;
}
/* ************************************
PAGE PORFIOLIO
***************************************/
#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: 0.75em;
color: #bdc3c7;
}
/* ************************************
PAGE ABOUT
***************************************/
.profile-photo {
display:block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/* ************************************
CONTACT
***************************************/
.contact-info{
list-style:none;
margin: 0;
padding: 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 0 20px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
/* ************************************
COLOURS
***************************************/
/* site body*/
body {
background-color: #fff;
color: #999;
}
/* green header*/
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile devices*/
nav {
background: #599a68;
}
/* logo text */
H1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b;
}
/* nav link*/
nav a, nav a: visited {
color: #fff;
}
/* selected nav link*/
nav a.selected, nav a:hover {
color: #32673f;
}
contact.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Melissa Brown | Designer </title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Melissa Brown</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"class="selected">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<h3>General Informatoin </h3>
<p> I am currently looking new collaborations</p>
<p> Please contact me via email </p>
</section>
<section>
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555 555">555-555</a></li>
<li class="mail"><a href="mailto:mbrown_@hotmail.com">mbrown_85@hotmail.com</a></li>
</ul>
</section>
<footer>
<a href="http//twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a>
<a href="http//facebook.com/nickpettit"><img src="img/facebook.png" alt="facebook logo" class="social-icon"></a>
<p>© 2014 Melissa Brown.</p>
</footer>
</div>
</body>
</html>
thanks
4 Answers
Ken Alger
Treehouse TeacherMelissa;
If it is for your .contact-info a
links, you have a syntax error in your CSS.
You are missing a semi-colon after display: block
on the line before.
You also need to remove the space between the #
and the gallery li
.
Ken
Ken Alger
Treehouse TeacherAnd... in under Nav Link you need to remove the space between nav a:
and visited
.
Ken
Richmond Lauman
28,793 PointsI don't see any rules for 10px margin bottom of any a elements in your code, but your code is a little hard to read with the messed up formatting. what was the specific selector path for the a elements you intend to ahave a 10px bottom margin?
Richmond Lauman
28,793 PointsI see you fixed the formatting. I will look again.
Richmond Lauman
28,793 PointsYeah I still don't see any a elements with 10px of margin bottom
Richmond Lauman
28,793 PointsGood catch Ken. And if it is .contact-info a the margin: 0 0 0 20px; needs to be margin: 0 0 10px 20px; If Melissa wants a 10px margin bottom.
melissa brown
4,670 Pointsthanks guys all fixed
Ken Alger
Treehouse TeacherKen Alger
Treehouse TeacherEdited for mark-up
Melissa;
Welcome to Treehouse! To see how to post your code in the forums, please see the following post.
Happy coding,
Ken