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 trialJorge Romero
601 PointsThe header changed it's position
On the contact page when i add the headline <h3> for some reason a space appears at the margin-top of the header. The margin-top was set to 0 before and it works fine on the other pages. I copied the code from the "about" page and this also happens when i remove the image before the h3 tag.
5 Answers
Serhii Lihus
6,352 PointsIf you look closer to the "h3" selector (in main.css), you'll see that after property there is a semicolon. Replace it with colon instead.
h3 {
margin; 0 0 1em 0;
}
Richard Thomas
3,029 PointsWOW, after re-creating the page twice I came here and you saved the day, I couldn't sleep till I got it.
Jorge Romero
601 PointsThank you so much my friend :D
idan ben yair
10,288 PointsK W is right, we will need to see your code in-order to assist you further. Please copy paste your code in to a message and follow the "Markdown Cheatsheet" or fork your workspace link.
Thanks.
Jorge Romero
601 PointsThank you for your help. The is the workspace link https://teamtreehouse.com/workspaces/10163212#
idan ben yair
10,288 PointsThe link appears to be broken unfortunately
Jorge Romero
601 PointsOk. Here is the code for the contact page and the main css.
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jorge Romero | Desarrollador</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic,800,400italic|Changa+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div id="logo">
<a href="index.html">
<h1>Jorge Romero</h1>
<h2>Desarrollador</h2>
</a>
</div>
<nav>
<ul>
<li><a href="index.html">Portafolio</a></li>
<li><a href="about.html">Acerca de</a></li>
<li><a href="contacto.html" class="selected">Contacto</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<h3 class="title3">Información General</h3>
<p>Por favor solo usar el telefono para urgencias, si desea comuncarse conmigo la mejor manera es via e-mail.</p>
</section>
<section>
<h3 class="title3">Detalles de contacto</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555-6464">555-6446</a></li>
<li class="mail"><a href="mailto:romero.manuguian@gmail.com">romero.manuguian@gmail.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=@manuguian" target="_blank">@manuguian</a></li>
</ul>
</section>
<footer>
<a href="http://www.facebook.com">
<img src="img/facebook-wrap.png" alt="facebook" class="social-icon">
</a>
<a href="http://twitter.com">
<img src="img/twitter-wrap.png" alt="twitter" class="social-icon">
</a>
<p>© Jorge Romero</p>
</footer>
</div>
</body>
</html>
/**************
GENERAL
***************/
body{
font-family: 'Open Sans', sans-serif;
}
a{
text-decoration: none;
}
#wrapper{
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
img{
max-width: 100%;
}
/**************
HEADING
***************/
#logo{
text-align: center;
margin: 0;
}
header{
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
h1{
font-family: 'Changa One', sans-serif;
font-size: 1.75em;
margin: 16px 0;
font-weight: normal; /*quita cualquier propiedad, como por ejemplo "Bold"*/
line-height: 0.8em; /*separacion entre lineas*/
}
h2{
font-size: 0.75em;
margin: -0.5px 0 0;
font-weight: normal;
}
/**************
NAVEGATION
***************/
nav{
text-align: center;
margin: 20px 0 0;
padding: 10px 0;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li{
display: inline-block;
}
nav a{
font-weight: 800;
padding: 15px 10px;
}
/**************
FOOTER
***************/
footer{
font-size: 0.75em;
text-align: center;
padding-top: 50px;
color: #ccc;
clear: both;
}
.social-icon{
width: 20px;
height: 20px;
margin: 0 5px;
}
/**************
GALERIA
***************/
#galeria{
margin: 0;
padding: 0;
list-style: none;
}
#galeria li{
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#galeria li a p{
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
/**************
PAGINA: ACERCA DE
***************/
.foto-personal{
display: block;
max-width: 200px;
margin: 0 auto 30px;
border-radius: 100%;
}
h3{
margin; 0 0 1em 0;
}
/**************
PAGINA: CONTACTO
***************/
.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;
}
.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.png');
}
/**************
COLORES
***************/
h1, h2{
color: #fff;
}
header{
background: #6ab47b;
border-color: #599a68;
}
nav{
background: #599a68;
}
nav a, nav a:visited{
color: #fff;
}
nav a.selected{
color: #6ab47b;
}
nav a:hover{
color: #6ab47b;
}
hum4n01d
25,493 Pointshum4n01d
25,493 PointsPlease send a fork workspace link or include your code