|
Unable to make out the content area background
Hello everyone, I am playing with some HTML & CSS code in order to learn practically. I am not getting why the background for the content class i defined in the .Css file isnt visible.
*{
margin:0;
padding:0;
}
html {
}
body {
min-height: 900px;
font:14px/1.3 Arial,sans-serif;
background: #000000 url(images/main_bg.jpg) repeat-x;
}
header {
box-shadow: 0 -1px 2px #111111;
color:#fff;
display:block;
height:70px;
position:relative;
width:100%;
z-index:100;
}
header h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
header a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
header .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
height: auto;
margin: 0px auto;
width: 957px;
}
.content{
height: 900px;
margin: auto auto;
width: 957px;
background: url(images/content_bg.jpg) top center no-repeat;
color:#fcfcfc;
}
footer{
background-color: #111111;
bottom: 0;
box-shadow: 0 -1px 2px #111111;
height: 45px;
left: 0;
position: fixed;
width: 100%;
z-index: 100000;
display: block;
}
footer h2{
color: #EEEEEE;
font-size: 14px;
font-weight: normal;
left: 50%;
margin-left: -400px;
padding: 13px 0 0;
position: absolute;
width: 540px;
}
footer h2 i{
font-style:normal;
color:#888;
}
footer a.tzine,a.tzine:visited{
color: #999999;
font-size: 12px;
left: 60%;
margin: 16px 0 0 110px;
position: absolute;
text-decoration: none;
top: 0;
}
footer a i{
color:#ccc;
font-style: normal;
}
footer a i b{
color:#c92020;
font-weight: normal;
}
////////////////////////////////////HTML CODE///////////////////
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Welcome</title>
<link href="styles/layout.css" rel="stylesheet" type="text/css" />
<link href="styles/menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h2>XpertCareers</h2>
</header>
<div class="container">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a class="hsubs" href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="Login.html">Login</a></li>
<div id="lunar"></div>
</ul>
</br>
</div>
<div class="content">
hello world hello worldhello worldhello worldhello </br>
hello world hello worldhello worldhello worldhello </br>
hello world hello worldhello worldhello worldhello </br>
hello world hello worldhello worldhello worldhello </br>
</div>
<footer>
<h2>© 2012 <i>TechGeeks<i> |</h2> <a class="tzine">Design by TechGeeks Team
</footer>
</body>
</html>
Last edited by prateek88; 10-08-2012 at 09:59 PM..
|
Before you post, read our: 
) but heres the image which might give you the view of what i want to achieve. 
