Div background won't show

**zavman101** · 10-13-2010, 01:20 AM

Okay, so I am relatively new to CSS. I've watched many video and text tutorials on nettuts and other websites, and made some very basic sites, and am taking the next step.

So I go into my file, and type in the div and its id and apply the background in the css, but it won't show up for some reason. I am almost positive it's in correctly. I know I have an container id, but I deleted that div and some other html to see if that'd fix it, and it didn't.

Here is the CSS:

Code:

 /*

Designed by: Derrick Zavarella
Date: 10/12/2010
Title: deBuhrs Seed & Feed

Primary Colors:

#cbe86b (light green)
#f2e9e1 (light gray)
#1c140d (light black)
#cbe86b (lime green)

*/
body 
{
	font-size: 90%;
	font-family: helvetica, georgia, sans-serif;
	line-height: 1.6em;
	text-align: center;
	color: #484e35;
}

#container 
{
	width: 960;
	margin: auto;
}
#header
{
    position: relative;
	background: url(images/header.png) no-repeat;
	overflow: hidden;
}

#header h2, p 
{
        display: none;
}

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
        <title>deBuhrs Seed & Feed</title>
    </head>
    <body>
    	<div id="header">
    		
    	</div>
    </body>
</html>

**bill.onthebeach** · 10-14-2010, 08:36 PM

add this to your css in the header division

height: 120px;
width: 800px;

--bill.onthebeach

**zavman101** · 10-20-2010, 04:03 PM

I fixed up some css, it was all going good, but now my paragraph wont show up in my mainContent div, and my sidebar div won't show up at all! Please help me

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="content-type" content=
        "text/html; charset=windows-1250">
        <link rel="stylesheet" href="style.css" type="text/css">

        <title>deBuhrs Seed & Feed</title>
    </head>

    <body>
        <!--container begins here-->

        <div id="container">
            <!--header begins-->

            <div id="header">
                <h3>deBuhrs</h3>

                <p>seed&feed</p>
            </div>
            <!--end header-->
            <!--navigation begins-->

            <div id="nav">
                <ul id="menu">
                    <li><a href="index.html">home</a></li>

                    <li><a href="about.html">about</a></li>

                    <li><a href="products.html">products</a></li>

                    <li><a href="staff.html">staff</a></li>

                    <li><a href="contact.html">contact us</a></li>

                    <li><a href="affiliate.html">affiliate</a></li>
                </ul>
            </div>
            <!--navigation ends--><!--mainContent begins-->

            <div id="mainContent">
                <h2>welcome to our new website!</h2>

                <p>Lorem ipsum dolor sit amet, consectetuer
                adipiscing elit. Aenean commodo ligula eget dolor.
                Aenean massa. Cum sociis natoque penatibus et
                magnis dis parturient montes, nascetur ridiculus
                mus. Donec quam felis, ultricies nec, pellentesque
                eu, pretium quis, sem. Nulla consequat massa quis
                enim. Donec pede justo, fringilla vel, aliquet nec,
                vulputate eget, arcu. In enim justo, rhoncus ut,
                imperdiet a, venenatis vitae, justo. Nullam dictum
                felis eu pede mollis pretium. Integer tincidunt.
                Cras dapibus. Vivamus elementum semper nisi. Aenean
                vulputate eleifend tellus. Aenean leo ligula,
                porttitor eu, consequat vitae, eleifend ac, enim.
                Aliquam lorem ante, dapibus in, viverra quis,
                feugiat a, tellus. Phasellus viverra nulla ut metus
                varius laoreet. Quisque rutrum. Aenean imperdiet.
                Etiam ultricies nisi vel augue. Curabitur
                ullamcorper ultricies nisi. Nam eget dui. Etiam
                rhoncus. Maecenas tempus, tellus eget condimentum
                rhoncus, sem quam semper libero, sit amet
                adipiscing sem neque sed ipsum. Nam quam nunc,
                blandit vel, luctus pulvinar, hendrerit id, lorem.
                Maecenas nec odio et ante tincidunt tempus. Donec
                vitae sapien ut libero venenatis faucibus. Nullam
                quis ante. Etiam sit amet orci eget eros faucibus
                tincidunt. Duis leo. Sed fringilla mauris sit amet
                nibh. Donec sodales sagittis magna. Sed consequat,
                leo eget bibendum sodales, augue velit cursus
                nunc.<br>
                </p>
                
				<hr align="center" width="450" noshade="noshade" color="#e7e6e6">

                <h2>welcome to our new website!</h2>

                <p>Lorem ipsum dolor sit amet, consectetuer
                adipiscing elit. Aenean commodo ligula eget dolor.
                Aenean massa. Cum sociis natoque penatibus et
                magnis dis parturient montes, nascetur ridiculus
                mus. Donec quam felis, ultricies nec, pellentesque
                eu, pretium quis, sem. Nulla consequat massa quis
                enim. Donec pede justo, fringilla vel, aliquet nec,
                vulputate eget, arcu. In enim justo, rhoncus ut,
                imperdiet a, venenatis vitae, justo. Nullam dictum
                felis eu pede mollis pretium. Integer tincidunt.
                Cras dapibus. Vivamus elementum semper nisi. Aenean
                vulputate eleifend tellus. Aenean leo ligula,
                porttitor eu, consequat vitae, eleifend ac, enim.
                Aliquam lorem ante, dapibus in, viverra quis,
                feugiat a, tellus. Phasellus viverra nulla ut metus
                varius laoreet. Quisque rutrum. Aenean imperdiet.
                Etiam ultricies nisi vel augue. Curabitur
                ullamcorper ultricies nisi. Nam eget dui. Etiam
                rhoncus. Maecenas tempus, tellus eget condimentum
                rhoncus, sem quam semper libero, sit amet
                adipiscing sem neque sed ipsum. Nam quam nunc,
                blandit vel, luctus pulvinar, hendrerit id, lorem.
                Maecenas nec odio et ante tincidunt tempus. Donec
                vitae sapien ut libero venenatis faucibus. Nullam
                quis ante. Etiam sit amet orci eget eros faucibus
                tincidunt. Duis leo. Sed fringilla mauris sit amet
                nibh. Donec sodales sagittis magna. Sed consequat,
                leo eget bibendum sodales, augue velit cursus
                nunc.</p>
            </div>
            <!--end mainContent-->
            <!--sidebar begins-->

            <div id="sidebar">
            	
            </div>
            <!--sidebar ends-->
            <!--footer begins-->

            <div id="footer">
            </div>
            <!--footer ends-->
        </div>
        <!--end container-->
    </body>
</html>

CSS:

Code:

/*

Designed by: Derrick Zavarella
Date: 10/19/2010 

Primary Colors:
#ffffff
#cbe86b (light green)
#f2e9e1 (light gray)
#1c140d (light black)
#cbe86b (lime green)



*/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
body{
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}
#container{
	width: 960px;
	margin: auto;
}
#header{
	width: 960px;
	height: 135px;
	background-image: url(images/header.png);
	background-repeat: no-repeat;
	margin-top: 20px;
	
}
#header h3, p{
	display: none;
}
#nav{
	width: 960px;
	height: 20px;
	background-color: #1c140d;
}
#nav ul{
	float: left;
	list-style: none;
	margin-top: 3px;
}
#nav ul li{
	display: inline;
	margin-left: 5px;
	
}
#nav ul li a{
	color: #f2e9e1;
	text-decoration: none;
	font-style: italic;
	font-size: 10px;
}
#nav ul li a:hover{
	color: #cbe86b;
}
#mainContent{
	float: right;
	width: 760px;
	margin: 0px;
	padding: 20px 0px 0px 0px;
	
}
#mainContent h2{
	font-weight: normal;
	font-style: italic;
	font-size: 16px;
	margin-top: 15px;
}
#mainContent p{
	color: #f2e9e1;
}
#sidebar{
	float: left;
	width: 200px;
	background-color: #e7e6e6;
}

Thread: Div background won't show

Thread Tools

Search Thread

Div background won't show

Bookmarks

Bookmarks

Posting Permissions