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 can't I add any new CSS rules to new classes or id´s that has any effect?

I am experiencing many irrational issues when I am trying to code some simple HTML with CSS. Most of the code is taken directly from courses here. Now the biggest problem seems to be that I can not add any new classes to my CSS that will have any effect in the browser. I have tried to move the classes higher up in the DOM with same result. I have tried creating new documents for the site, have copied and pasted different parts of the code, have written minimal code just to try single function but no difference in result. I am sitting on a MBPR and have been using TextWrangler and Sublime. Anyone got any idea? When I make changes to existing classes, they work, most of them.

4 Answers

Sean T. Unwin
Sean T. Unwin
28,672 Points

I strongly recommend you test your code through a validator:


  • Your doctype declaration is incorrect - there should be no space between the exclamation mark and the word 'doctype'.
  • In each of your navs, change id="selected" to class="selected" as id's must be unique, i.e no duplicates.
  • You are missing the closing div tags on .main-nav in both instances (top and bottom of page)
  • body tag needs style attribute for `background: img/bg3.jpg". Although you should be able to remove that inline styling now (see below).
  • In main.css - .main-nav ul li, change vertical-align: center; to vertical-align: middle;.
  • Change @media screen (max-width: 718px) to @media screen and (max-width: 718px) {}.

1: .gallery will not be styled at all, no matter what I do with the code.

Remove list-style: none; from .gallery and add the following after the .gallery rule:

.gallery ul {
    list-style: none;
}

There is something else going on here, but I haven't been able to decipher what it is... strange indeed.

2: I have to put the background-image, both for body and .wrapper, inline, as nothing happens when put in stylesheet.

URL references in stylesheets are relative to where the stylesheet is located. So if the img folder is relative to your HTML document and your stylesheet is in css/main.css, then the value of background-image in your CSS would be url('../img/bg3.jpg').

Also, the background-image property in your body selector is incorrect. The values you have there are for other background properties as shown below:

body {
/* Change the following: */
/* !!    background-image: center center fixed; */
    background-image: url('../img/bg3.jpg');
    background-attachment: fixed;
    background-position: center center;
/* end edit */
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #111;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;

}

3: I can't effect the a:active in nav, even when I've put it in an div for each active site. I could for a moment do a underline styling for the id="selected", but then even that stopped working.

.main-nav ul li a:hover does not have a closing curly bracket which is preventing the next rule (`:active') being read.

Thank you so much for that. Regarding bg-img, I had tried that syntax before, and it didn't work, but now it does indeed work. The one think that I still can't get to work is having the nav link in different color when that site is shown. I have looked it up on forums and one solution is to use a JS script, but I do believe that it hasn't been required when I've done it a few years ago. If you have any suggestions I would greatly appreciate it. Just to be clear, it isn't a:active I am trying to use, but having the linked menu item change color, which is why I've made the id="selected". Thank you for great answer and time. Martin

Sean T. Unwin
Sean T. Unwin
28,672 Points

Are you placing a dot at the start of the class name in your CSS? Note, that you do NOT add the dot in your HTML element's class attribute.

Perhaps you could post some sample code for us to look at. See this post about posting code - https://teamtreehouse.com/forum/posting-code-to-the-forum .

Thank you for your response, but as you can tell by my code, the problem lies elsewhere. It might be something very simple that I am continuously missing, but I can't understand what.

So the problems are:

1: .gallery will not be styled at all, no matter what I do with the code.

2: I have to put the background-image, both for body and .wrapper, inline, as nothing happens when put in stylesheet.

3: I can't effect the a:active in nav, even when I've put it in an div for each active site. I could for a moment do a underline styling for the id="selected", but then even that stopped working.

This is my HTML and CSS:

<! DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Designgolv.com</title> 
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsive.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body background="img/bg3.jpg">
        <style>

        #wrapper {
            background-image: url("img/grey_bg.png");

        }

        </style>

        <div id="wrapper">
            <div id="content">
                <header>
                    <div id="logo"><img src="img/logo2.png" alt="designgolv.com" /></div>

                    <div class="home_header"><img src="img/db_header.jpg" alt="exempelbilder"> </div>

                    <nav>
                        <div class="main-nav">
                            <ul>
                                <li><div id="selected"><a href="index.html">VÄLKOMMEN</a></div></li>
                                <li><a href="designbetong.html">DESIGNBETONG</a></li>
                                <li><a href="designgjuteriet.html">DESIGNGJUTERIET</a></li>
                                <li><a href="galleri.html">GALLERI</a></li>
                                <li><a href="webbshop.html">WEBBSHOP</a></li>
                                <li><a href="kontakt.html">KONTAKT</a></li>
                            </ul>

                    </nav>
                </header>

                <section>

                    <div class="welcome"><h2>DESIGNBETONG - Tunn betong för alla utrymmen</h2></div>
                    <div class="main_column">



                    <p>Designbetong är en cementbaserad beläggning som man lägger ut där man önskar ett snyggt betongutseende. Oavsett om ni önskar en ruff industrikänsla eller en slät elegans har vi anpassade koncept. Ni kan köpa materialet och lägga själva eller köpa det inlagt och klart av oss eller våra samarbetsparters runt om i landet.</p> 

                    <p>Beläggningen Designbetong består av en pulverdel där man har en kedja av sandsorter och naturlig cement, anpassade för att stå emot slitage på ett bra sätt. Härdaren som är vätskedelen innehåller en typ av limm vilket get ett bra fästa i underlaget och en sprickfri betong. </p>

                    <p>Vi har också tillsatt en “fördröjare” så att man har god tid på sig att skapa det utseende man vill ha. Även dagen efter är beläggningen fortfarande så mjuk att den går att slipa med vanligt sandpaper. </p>

                    <p>När man känner sig nöjd med slipningen läggs ytbehanding ut med en mopp. Den förseglar ytan mot smuts och är självpolerande.</p>

                    <p>Inga specialmaskiner, inga kurser! <br>
                    Alla kan lägga detta material.</p>

                    <p>Möblering av rummet kan ske efter 2 dagar.</p> 

                    </div>
                    <div class="secondary_column"> <div class="coltest">
                        <h3>Kontakta oss direkt:</h3>

                        <p><a href="tel:0706363800">070 63 63 800</a></p>
                            <p><a href="mailto:marcus@designgolv.com">marcus@designgolv.com</a></p>

                        <h3>Fördjupningar:</h3>
                        <p>Designgolv (mer om oss)</p>
                        <p>ROT-avdrag</p>
                        <p>Affärstillfälle</p></div>
                    </div>



                    <div class="clearClass"></div>

                    <div id="dbAlternativesHeader">
                        <h3>Välj den eller de lösningar som passar bäst in på dina önskemål för beskrivning och teknisk information.</h3>
                    </div>

            <div class="gallery">



              <ul>
                <li><a href="designbetong_orginal.html"><img src="img/db1.jpg" alt="designbetong orginal"><p>Designbetong Orginal</p></a></li>
                <li><a href="designbetong_industry.html"><img src="img/db_industry.jpg" alt="designbetong industry"><p>Designbetong Industry</p></a></li>
              </ul>
            </div>


                </section>
                     <nav>
                        <div class="main-nav">
                            <ul>
                                <li><div id="selected"><a href="index.html">VÄLKOMMEN</a></div></li>
                                <li><a href="designbetong.html">DESIGNBETONG</a></li>
                                <li><a href="designgjuteriet.html">DESIGNGJUTERIET</a></li>
                                <li><a href="galleri.html">GALLERI</a></li>
                                <li><a href="webbshop.html">WEBBSHOP</a></li>
                                <li><a href="kontakt.html">KONTAKT</a></li>
                            </ul>

                    </nav> 
                <footer>

                </footer>
            </div>
        </div>  
    </body>

</html>
/************************************
    Main CSS 
*************************************/

/************************************* 
    GENERAL 
*************************************/


@font-face {
  font-family: zygo;
  src: url(zygo.ttf);
}

p, h2, h3 {
    color: #e6e6e6;
    font-family: 'Open Sans', sans-serif;
}


a {
    text-decoration: none;
    color: #e6e6e6;
}



h3 {
    font-size: 1.25em;
    color: red;
}


img {
    width: 100%;
}


/************************************* 
    BODY 
*************************************/

body {
    background-image: center center fixed;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #111;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;

}

/************************************* 
    CONTAINER 
*************************************/

#wrapper {

    max-width: 940px;
    margin: 0 auto;
    margin-bottom: 0;
    background-color: #999;
    min-height: 900px;
    padding: 0 15px 10px;
    /*-moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;*/

}

#content {
    max-width: 718px;
    margin: 0 auto;
    display: block;

}


/************************************* 
    HEADER
*************************************/

#logo {

    width: 80%;
    display: block;
    margin: 0 auto;
    padding-top: 15px;
}

.home_header {
    max-width: 718px;
    height: auto;
    display: block;
    margin: 10px auto;
    padding-right: 0;
}

nav {
    text-align: center;
    max-width: 718px;

    margin: 0 auto;
    background-color: hsla(90, 100%, 100%, 0.3);
    border-top: 1px solid hsla(90, 100%, 100%, 0.5);
    border-left: none;
    border-right: none;
    border-bottom: 1px solid hsla(90, 100%, 100%, 0.5);
    padding-top: 0;
    padding-bottom: 0;

}

nav ul {
    padding-top: 0;
    padding-bottom: 0;
}

.main-nav ul li {
    display: inline-block;
    margin: .25em auto;
    vertical-align: center;
    padding-top: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0;


}

.main-nav ul li a {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75em;
    text-decoration: none;
    text-shadow: 1px 1px 3px #333;
    color: #ddd;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.main-nav ul li a:hover {
    color: red;


.main-nav ul li a:active {
    font-size: 2em;
    text-decoration: underline;
}

.contact-info {
    list-style: none;
    color: #e6e6e6;
}


/************************************* 
    CONTENT
*************************************/

.welcome {

    display: block;
    clear: both;
}

.main_column {
    max-width: 500px;
    display: block;
    float: left;

}

.secondary_column {
    max-width: 218px;
    font-size: 0.75em;
    display: inline;
    float: left;
    margin-left: 50px;
}

.clearClass {
    clear: both;
    margin-bottom: 20px;
    border: 1px solid #d6d6d6;
    border-bottom-style: solid;
    border-top-style: none;
}



/************************************* 
    DESIGNBETONG ALTERNATIVES GALLERY
*************************************/

.gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    color: #d6d6d6;
}



/************************************* 
    FOOTER 
*************************************/


/************************************* 
    MEDIA QUERIES
*************************************/

@media screen (max-width: 718px)