Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Why is my CSS styling not applying to .contact-info class?

The styling of the contact page's nav bar does work however.

By adding ".png" to the end of all my images in the background-image code, the icons now do appear. However, the CSS styles are not yet applying. The icons and text are mushed together.

Here is my index.html

/*
GENERAL
*/

body {
    font-family: "Open Sans", sans-serif; 
    /*font below overrides body since it's below (cascading)*/
}


a {
    text-decoration: none; /*removes all underlines from links on a page*/
}

#wrapper {
    max-width:940px;
    margin: 0 auto; /*0 = center in browser; auto = automatically filled in as margin for the rest of the width*/
    padding: 0 5%; /* 5% of the total width of the wrapper element*/
    /*need to add some spacing called padding to prevent the text from going right up to the 
    edge of the browser window*/
}



a {
    color: #6ab47b;
}

img {
    max-width: 100%;
}


/*
HEADING
*/

/* green header*/


header {
    float:left; 
    margin: 0 0 30px 0; /*removes problematic margin at top*/
    padding: 5px 0 0 0; /* padding on top to separate text without adding margin to top*/
    width: 100%; /* since this is now a float item,
    it will otherwise float with the images. this line as a result 
    makes the header stretch across entire page and not interfere with images*/
}

#logo {
    text-align: center;  /*align text to center. */
    margin:0; /*no spacing around the edges of the element*/
}

h1 {
    font-family: 'Changa One', sans-serif; /*font falls back to generic sans serif font*/
    margin: 15px 0; /*margin has space above and below, but none on left/right*/
    font-size: 1.75em; /*em's are a relative unit of measurement 1em = 16 size default font size*/
    font-weight: normal; /*no bolding*/
    line-height: .8em;  /*adjust spacing between lines*/
}

h2 {
    font-size: .75em;
    margin: -5px 0 0; /*negative margin: sets top, want elements to be tighter together*/
    font-weight: normal;
}

h3 {
    margin: 0 0 1em 0; /*separates it a bit from other text*/
}


/*
NAVIGATION
*/


nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}

nav ul {
    list-style: none;
    margin:0 10px; /*top and then 10px left and right*/
    padding: 0;
}

nav li {
    display: inline-block; 
    /*make nav links inline, but have block properties
    block means it fills the browser width and wraps nicely
    */

}

nav a {
    font-weight: 800;
    padding: 15px 10px; /*padding on all sides of links, making click targets easier*/

}

/*
FOOTER
*/

footer {
    font-size: .75em;
    text-align: center;
    clear: both; /*prevents float from being applied on either side*/
    padding-top: 50px;
    color: #ccc;
}

.social-icon {
    width: 20px; /*these are about half the size of the icons,
    creating more info in a smaller display area, add more detail*/
    height: 20px;
    margin: 0 5px;
}



/*
PAGE:PORTFOLIO
*/

#gallery {
    margin: 0; /*takes out any kind of spacing*/
    padding: 0;
    list-style: none; /*takes out bullet points*/
}


#gallery li { /*select list items in gallery*/
    float: left; /*float items appear side by side*/
    width:45%; /* each image only takes 45% of browser, with 10% left of space*/
    margin: 2.5%; /*each image has a margin on each side of 2.5% = 10%, fills extra 10% of space*/
    background-color: #f5f5f5; /*background for each caption*/
    color: #bdc3c7; 
}

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: .75em;
    color: #bdc3c7;
}


/* PAGE ABOUT*/

.profile-photo {
    display:block; 
        /*usually only either block or inline
        block: starts on new line and takes up full width available;
        inline: only takes up as much width as necessary;

         */


        /*use auto-margins to center on page. we  don' want it to be displayed
        in-line. why not align it center? it wouldn't give us flexibiliy later
        on when we create desktop display*/
    max-width:150px;
    margin: 0 auto 30px; /*0 auto centers it, and then 30px to bottom*/
    border-radius: 100%;
        /*add rounded corners to a radius. set to 100%, so that picture will just 
        be a circle.*/
}

/*CONTACT*/

.contact-info {
    list-style:none;
    padding:0;
    margin:0;
    font-size: .9em;
}



.contact-info a{
    display:block;
    /*each image will take up space. so images have place to be displayed*/

    min-height: 20px;

    background-repeat: no-repeat;
    /*background images in css will always
    repeat by default. so only display once. no repeat*/

    background-size: 20px 20px;
    /* sizing down will make them look sharper */

    /*padding: 0 0 0 30px;*/
    /*creae space to the left*/

    margin: 0 0 10px;

}

.contact-info li.phone a{
/*no space before phone because 'phone' isn't nested inside*/
    background-image: url('../img/phone')
    /*have to use '..' because we have to step up one level since
    main.css is in css folder*/
}

.contact-info li.mail a{
/*no space before phone because 'phone' isn't nested inside*/
    background-image: url('../img/mail')
    /*have to use '..' because we have to step up one level since
    main.css is in css folder*/
}

.contact-info li.twitter a{
/*no space before phone because 'phone' isn't nested inside*/
    background-image: url('../img/twitter')
    /*have to use '..' because we have to step up one level since
    main.css is in css folder*/
}




/*
COLORS
*/

header {
    background: #6ab47b;
    border-color: #599a68;
}

h1,h2 { /*style h1 and h2 elements in same style rule*/
    color:#fff;
}

/*nav background on mobile*/
nav {
    background:#599a68;
}

/*nav links*/
nav a, nav a:visited { /*nav a:visited is a pseudoclass. so what this does is
    make the links stay white even if they've been visited*/
    color: #fff;
}
/*selected nav links*/
nav a.selected, nav a:hover {  /*only select those with class 'selected
    also used pseudoclass to affect hover.*/
    color: #32673f

here is my contact.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"> <!-- meta data not revealed to user -->
    <title> Dan Wu | Designer </title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet"> 
    <!-- will be referring to fonts in main.css, so it has to be loaded already. -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!-- rel says what doc it is relative to existing doc. so normalize is a stylesheet. -->
</head>
<body>
    <header>

        <a href="index.html" id="logo"> <!-- anchor URL/text and go to another page. -->
        <h1>Dan Wu</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> <!-- create unordered list -->

        </nav> <!-- simply a semantic statement that says where the navigation is. -->
    </header> 

    <div id="wrapper"> <!-- id is to identify the div -->

        <section>
            <h3>General Information </h3>
            <p>Don't hesitate to contact me</p>
        </section> <!-- will contain image gallery -->

        <section>
            <h3>Contact Details </h3>
            <ul class="contact-info"></ul>
                <li class="phone"> <a href="tel:111-1111">111-1111</a></li>
                <li class="mail"> <a href="mailto:wu12345@gmail.com">wu12345@gmail.com</a></li>
                <li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=nickrp">Tweet me</a></li>
        </section> <!-- will contain image gallery -->


        <footer>
            <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png", alt="Twitter logo" class="social-icon"></a>

            <a href="http://twitter.com/nickrp">
            <img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon">
            </a>

            <p>&copy; 2014 Dan Wu. </p> <!-- copyright character using &copy; -->
        </footer> <!-- bottom: info to feature every page -->

    </div>



</body>
</html>

I already looked at semi-relevant links such as: https://teamtreehouse.com/community/my-maincss-commands-are-not-working-for-contacthtml-page-i-have-made-the-same-way-but-its-not-working

Please arrange your code properly or paste the link of your workspace snapshot.

li items are out of ul

<ul class="contact-info"></ul>
                <li class="phone"> <a href="tel:111-1111">111-1111</a></li>
                <li class="mail"> <a href="mailto:wu12345@gmail.com">wu12345@gmail.com</a></li>
                <li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=nickrp">Tweet me</a></li>

Thank you so much Ashish! That definitely helped with the CSS of the list. But why do you think the icons are still not showing?

May be <a> is inline so change its display property to inline-block or block.

May I have the link to your workspace?

Hi Ashish,

I've tried both block and inline block, which makes no difference.

.contact-info a{
    display:inline-block;
    /*each image will take up space. so images have place to be displayed*/

    min-height: 20px;

    background-repeat: no-repeat;
    /*background images in css will always
    repeat by default. so only display once. no repeat*/

    background-size: 20px 20px;
    /* sizing down will make them look sharper */

    /*padding: 0 0 0 30px;*/
    /*creae space to the left*/

    margin: 0 0 10px;

}

5 Answers

Ali .
Ali .
15,521 Points

HI Daniel , u should put it </ul> end of <li></li> like this :

<ul class="contact-info"> <li class=""> <a href=""</a></li></ul>

Ali

This is how the tutorial has it.

https://teamtreehouse.com/library/how-to-make-a-website/adding-pages-to-a-website/build-the-contact-page

Go to 9:07. I have it the exact same way.

I also tried your suggestion and put </ul> at the end of every list item. No effect.

hey man , you should to fix your ul list item because all your list is outside of the ul so I Will to fix it for you , I hope help , and now fix it on HTML so good luck!

1 - example is wrong! <ul class="contact-info"></ul> <li class="phone"> <a href="tel:111-1111">111-1111</a></li> <li class="mail"> <a href="mailto:wu12345@gmail.com">wu12345@gmail.com</a></li> <li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=nickrp">Tweet me</a></li> 2 - this second example is Right! <ul class="contact-info"> <li class="phone"> <a href="tel:111-1111">111-1111</a></li> <li class="mail"> <a href="mailto:wu12345@gmail.com">wu12345@gmail.com</a></li> <li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=nickrp">Tweet me</a></li> </ul>

Hi is the main difference the addition of the </ul> tag at the end? I have that in my original example.

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,413 Points

Hi Daniel,

Your css styles are not appearing on the .contact-info class because the <li> tags within the unordered list are not being targeted. Try targeting the list items like so:

.contact-info, li{
    list-style:none;
    padding:0;
    margin:0;
    font-size: .9em;
}

Also, instead of assigning your background images/pngs to the <a> tags, why not try adding a <span> tag immediately after the <a> tags in your html? Then you could give a unique id to each span tag and assign your background images to each span:

<li class="phone"> <a href="tel:111-1111">111-1111</a><span id="phone"></span></li>

..just make sure that you give a height and a width property to each span tag so that the images will show up. For example:

#phone{
  background:url('img/icon.png') no-repeat;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

Then you could add a margin-left property to each span/img so that they don't appear squished together with the li tags.

Hope that helps:-)

sadly my contact page doesn't even load anymore...

I added the li target, but it had no effect :(

Display inline-block; since inline elements never take on the height and width from CSS.

Kabolobari Benakole
PLUS
Kabolobari Benakole
Courses Plus Student 14,278 Points

Here's your solution:

So, I posted it on Dropbox so you can download the images and see that it all works. If you have any issues lemme know.

https://www.dropbox.com/sh/39f6hlgxinn5bl7/AADM1bI3uQSTdCxxjE_wAy14a?dl=0