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

HTML How to Make a Website Adding Pages to a Website Build the Contact Page

Jorge Romero
Jorge Romero
601 Points
Posted by Jorge Romero
Jorge Romero
601 Points

The 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.

hum4n01d
hum4n01d
25,493 Points

Please send a fork workspace link or include your code

5 Answers

Serhii Lihus
Serhii Lihus
6,352 Points

If 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
Richard Thomas
3,029 Points
Richard Thomas
Richard Thomas
3,029 Points

WOW, after re-creating the page twice I came here and you saved the day, I couldn't sleep till I got it.

Jorge Romero
Jorge Romero
601 Points
Jorge Romero
Jorge Romero
601 Points

Thank you so much my friend :D

idan ben yair
idan ben yair
10,288 Points
idan ben yair
idan ben yair
10,288 Points

K 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
Jorge Romero
601 Points
Jorge Romero
Jorge Romero
601 Points

Thank you for your help. The is the workspace link https://teamtreehouse.com/workspaces/10163212#

idan ben yair
idan ben yair
10,288 Points
idan ben yair
idan ben yair
10,288 Points

The link appears to be broken unfortunately

Jorge Romero
Jorge Romero
601 Points
Jorge Romero
Jorge Romero
601 Points

Ok. 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&oacute;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>&copy; 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;

}