CODEWITHSUNDEEP
htmlcss
LucasGracia
LucasGracia

Reputation: 125

divs not showing but their content is

I've coded a simple website to test my skills and everything has been going fine so far, but now any div that i add doesn't show up but any content i put in the div does! (e.g if i write 'hello' inside a div then i can see it on the webpage but if i change the background color, height and width in CSS then none of these changes show up). Heres the code:

<!DOCTYPE html>
<html>
    <head>
        <title>Learning JavaScript</title>

        <meta charset="utf-8"></meta>
        <meta content="text/html; charset=utf-8" http-equiv="Content-type"></meta>
        <meta content="width=device-width, initial-scale=1" name="viewport"></meta>

    <style type="text/css">

    body{
        margin: 0;
        background-color: black;
    }

    #menubar{
        height: 60px;
        width: 100%;
        background-color: #FF8000;
    }
    #menubar img{
        float: left;
    }
    #menubar ul{
        float: left;
        list-style: none;
    }
    #menubar li{
        float: left;
        padding:2px 60px 0 50px;
        color: #2B2A29;
        font-weight: bold;
        border-right: 1px solid black;
    }

    #break{
        clear: both;
    }

    #flagImage{
        position: relative;
        top: -123px;
        z-index: -1;
    }
    #flagImage img{
        width: 100%;
        height: 400px;
    }

    #projectWindow{
        height: 505px;
        width: 385px;
        background-color: orange;
        float: left;
        position: relative;
        left: 200px;
        top: -100px;
    }
    #projectWindow img{
        height: 425px;
        width: 385px;
        margin: 0;
        padding: 0;
    }
    .bottomBanner{
        height: 50px;
        width: 100%;
        background-color: #2B2A29;
        color: orange;
        text-align: center;
        font-size: 2.5em;
        padding: 0;
    }
    .changingText{
        height: 25px;
        width: 100%;
        background-color: grey;
        text-align: center;
        color: white;
        padding: 0;
        position: relative;
        top: -5px;
    }
    #servicesWindow{
        height: 505px;
        width: 385px;
        background-color: orange;
        float: left;
        position: relative;
        left: 400px;
        top: -100px;
    }
    #servicesWindow img{
        height: 425px;
        width: 100%;
    }

    #contact{
        width: 100%;
        height: 200px;
        background color: white;
        position: relative;
        color: white;
        padding: 0;
        margin: 0;
    }


    </style>

    </head>

    <body>
        <div id="container">
            <div id="menubar"> <img src="images/placeholderLogo.jpg"/>
                <ul>
                    <li>PROJECTS</li>
                    <li>SERVICES</li>
                    <li>CONTACT</li>
                    <li>ABOUT</li>
                    <li>PLACEHOLDER</li>
                </ul>
            </div>

            <div id="break"></div>

            <div id="flagImage">
                <img src="images/placeholderImage.jpg"/>
            </div>

            <div id="projectWindow">
                <img src="images/gcon.jpeg"/>
                <div class="changingText">web development / CMS / wordPress</div>
                <div class="bottomBanner">RECENT PROJECTS</div>
            </div>

            <div id="servicesWindow">
                <img src="images/wordpress.jpg"/>
                <div class="changingText">wordPress Blog set-up</div>
                <div class="bottomBanner">OUR SERVICES</div>
            </div>

            <div id="break"></div>

            <div id="contact">
                <form>
                    hello



                </form>
            </div>


        </div>
    </body>
</html>

Upvotes: 2

Views: 69

Answers (1)

technophobia
technophobia

Reputation: 2629

You have a typo in your css:

Background color is background-color not background color.

So with the change:

#contact{
    width: 100%;
    height: 200px;
    background-color: white; /* <-- notice the dash */
    position: relative;
    color: white;
    padding: 0;
    margin: 0;
}

Upvotes: 4

Related Questions