I have a div that I would like to fill with an image. It won't show up though.
Here is html:
<div id=services>
<p1>Services</p1>
<div id="test"></div>
</div>
Here is CSS:
#test {
background-image: url(pics/chart.png);
background-repeat: no-repeat;
background-size:100%;
height:200px;
width:200px;
margin:auto;
position:absolute;
}
This is the full code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<title>Website</title>
<meta name="author" content="WebDev">
<link href="example.css" rel="stylesheet" type="text/css" />
<style>
html {
font-family: "Open Sans";
font-size: 24px;
font-style: light;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
body {
background: linear-gradient(#fff 30%, #CCFFFF );
margin-top:10px ;
margin-right:75px;
margin-left:75px;
}
#container {
width:1300px;
margin:0 auto;
background:#iff;
}
#header {
width:100%;
height:170px;
background:#Fff;
}
#logo {
float:left;
width:400px;
height:40px;
margin:30px;
background:#Fff;
color: #000;
font-size: 40px;
line-height:38px;
}
span1 { font-size: 30px;
line-height: 18px;
}
#navbar {
height:40px;
clear:both;
background: #Fff;
}
#navbar ul {
margin:10px;
padding:1px;
list-style-type:none;
line-height: 40px;
}
#navbar ul li {
padding:px;
float:right ;
margin-top:20px;
}
#navbar ul li a {
font-size:24px;
float:right ;
float:right ;
padding:0 0 0 20px;
display:block;
text-decoration:none;
font-weight:100;
color:#000;
}
#services {
height:450px;
background:#f9fbfb;
text-align:center;
font-weight:100;
font-size:35px;
padding:50px;
}
p {
font-size:25px;
font-weight: 200;
margin-right:75px;
margin-left:90px;
line-height:40px;
margin-top:50px;
}
#test {
background-image: url(pics/chart.png);
background-repeat: no-repeat;
background-size:100%;
height:200px;
width:200px;
margin:auto;
position:absolute;
}
h4 {
text-align:center;
margin: 60px;
font-weight:;
float:center;
}
#end {
height:200px;
}
</style>
</head>
<body>
<!-- container -->
<div id="container">
<!-- header -->
<div id="header">
<div id="logo">
James Brewer, M.D. <span1> santa barbara pediatrician </span1>
</div>
<div id="navbar">
<ul>
<li>contact </li>
<li>gallery |</li>
<li>fees & insurance |</li>
<li>hours & location |</li>
<li>services |</li>
<li>about |</li>
</ul>
</div>
</div>
<!-- content area -->
<div id="content_area">
<div id=services> <p1>Services</p1>
<div id="test"></div>
</div>
</div>
<div id=end>
<h4>
<p>2421 Bath Street, Suite A
</p><p>
Call for an appointment today
1-805-563-0167
</p>
</h4>
</div>
</div><!-- end container -->
</body>
</html>
There are a couple of ways to solve this issue.
You can specify both horizontal and vertical values for background size: property in your css. Try playing around with those values.
You can also try property values like auto and length.
Here's some code. Here I have set the width to auto and height to 100% so that the aspect ratio is maintained and the background scales automatically with the size of the div. Check it out.
#test {
background-image: url(https://s19.postimg.org/an381cz4j/470766057_3f1e9a3933_b.jpg);
background-repeat: no-repeat;
background-size: auto 100%;
height:200px;
width:200px;
background-color: red;
}
<div id=services> <p1>Services</p1>
<div id="test"></div>
</div>
In your css file the url image must be enclosed in double quotes. Like this:
#test {
background-image: url("pics/chart.png"); /* <-- */
background-repeat: no-repeat;
background-size:100%;
height:200px;
width:200px;
margin:auto;
position:absolute;
}
Related
I have the following problem: When I use absolute positioning for the #mobile-nav-content container for my mobile menu, the elements of the ul in it are appearing top of each other.
I want them to be stacked under each other with background-color:grey; (They do not need to be hidden, I will work on that part later).
I want the elements of the ul to be over each other and the background color to be BLACK.
This is my code, what do I need to change to get this to work?
/*===FARBEN===
BLAU:#1F4E8C
GRAU:#3D3F45
HELLGRAU: #E5E5E5
ROT: #A62C21
*/
/* GLOBAL */
body {
margin: 0;
font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
font-size:16px;
}
* {
box-sizing: border-box;
}
/* GENERELLES */
.clearfix::after{
content: "";
display: block;
clear: both;
}
/*===NAVIGATIONSLEISTE===*/
.header-nav{
width:100%;
height:50px;
background-color:#3d3f45;
position:relative;
font-size:25px;
font-weight:bold;
}
.header-nav a>img{
position:absolute;
height:30px;
width:auto;
top:10px;
left:10px;
}
.header-nav ul>li{
display:inline-block;
height:100%;
}
.header-nav ul{
margin:0;
padding:0;
position:absolute;
height:100%;
right:10px;
}
.header-nav ul>li>a{
display:inline-block;
margin-top:10px;
}
.header-nav ul>li>a:link{color:black;text-decoration:none;}
.header-nav ul>li>a:hover{color:black;text-decoration:none;}
.header-nav ul>li>a:active{color:black;text-decoration:none;}
.header-nav ul>li>a:visited{color:black;text-decoration:none;}
#active{
background-color:#A62C21;
}
/* MOBILES NAVIGATIONSMENÜ */
#mobile-nav-dropdown{
position:relative;
}
#mobile-nav-content{
position:absolute;
right:0;
top:50px;
}
#mobile-nav-button{
color:white;
float:right;
font-size:30px;
border: 2px solid white;
padding-left:9px;
padding-right:9px;
margin-top:5px;
margin-right:5px;
}
#mobile-nav-content>ul>li{
display:block;
background-color:#3D3F45;
padding-left:20px;
padding-right:20px;
}
#mobile-nav-content>ul{
margin-right:40px;
}
/* HEADER-BANNER */
#header-banner{
background: url("../img/hintergrund.jpg") no-repeat;
width:100%
height:0;
padding-top:20.83%;
background-size:contain;
}
#header-banner-klein{
background: url("../img/hintergrund-klein.jpg") no-repeat;
width:100%
height:0;
padding-top:15.625%;
background-size:contain;
}
/* GRID SYSTEM */
.container{
width:95%;
margin-left:auto;
margin-right:auto;
}
.row::after{
content:"";
clear:both;
display:block;
border: 0 !important;
}
[class*="col-"]{
float:left;
padding:10px;
}
.col-1{width:16.6666%;}
.col-2{width:33.3333%;}
.col-3{width:50%; }
.col-6{width:100%; }
/* GRID SYSTEM SICHTBARKEIT
.container,.container *{
border:1px solid #91c4ff;
}
[class*="col-"]{
background-color:#bfddff;
}
p {background-color:#91c4ff;
padding:0;
margin:0;
color:#fff;
text-align:center;
} */
/* Responsive Design */
#media(max-width:768px){
.col-1{width:33.3333%;}
.col-2{width:50%;}
.col-3{width:100%;}
}
#media(max-width:480px){
.col-1{width:50%;}
.col-2{width:100%;}
.col-3{width:100%;}
}
/* GRID SYSTEM FIX */
.header-nav *{
padding:0;
border:0;
}
.header-nav .container{
width:100%;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Startseite</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
<!-- NAVIGATIONSLEISTE -->
<nav class="header-nav">
<!-- <div class="container">
<div class="row">
<div class="col-6">
<a href="index.html">
<img src="src/img/webdesign-logo.png">
</a>
<ul>
<li id="active">Startseite</li>
<li>Leistungen</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
</div> -->
<div class="container">
<div class="row">
<div class="col-6 clearfix">
<a href="index.html">
<img src="src/img/webdesign-logo.png">
</a>
<div id="mobile-nav-dropdown" class="clearfix">
<div id="mobile-nav-button">≡</div>
<div id="mobile-nav-content" class="clearfix">
<ul>
<li id="active">Startseite</li>
<li>Leistungen</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- HEADER-BANNER -->
<header id="header-banner"></header>
</body>
</html>
You are very close with the code you have, you just need to make one change. The problem is being caused by height:100% in your .header-nav ul CSS. What this does is take 100% of the container height (i.e. #mobile-nav-dropdown ), but for this to work the container must have been given a specific height.
In this case, we don't want to give the nav dropdown and ul a specific height, but instead to be auto so it will be the height it needs to accommodate its contents. So you just need to change the height in .header-nav ul to auto:
.header-nav ul{
margin:0;
padding:0;
position:absolute;
right:10px;
/* Change height from 100% to auto (or remove it altogether as auto is the default value ) */
height:auto;
}
When you start working on the code to show/hide the menu, this should work with it!
Working Example:
/*===FARBEN===
BLAU:#1F4E8C
GRAU:#3D3F45
HELLGRAU: #E5E5E5
ROT: #A62C21
*/
/* GLOBAL */
body {
margin: 0;
font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
font-size:16px;
}
* {
box-sizing: border-box;
}
/* GENERELLES */
.clearfix::after{
content: "";
display: block;
clear: both;
}
/*===NAVIGATIONSLEISTE===*/
.header-nav{
width:100%;
height:50px;
background-color:#3d3f45;
position:relative;
font-size:25px;
font-weight:bold;
}
.header-nav a>img{
position:absolute;
height:30px;
width:auto;
top:10px;
left:10px;
}
.header-nav ul>li{
display:inline-block;
height:100%;
}
.header-nav ul{
margin:0;
padding:0;
position:absolute;
height:auto;
right:10px;
}
.header-nav ul>li>a{
display:inline-block;
margin-top:10px;
}
.header-nav ul>li>a:link{color:black;text-decoration:none;}
.header-nav ul>li>a:hover{color:black;text-decoration:none;}
.header-nav ul>li>a:active{color:black;text-decoration:none;}
.header-nav ul>li>a:visited{color:black;text-decoration:none;}
#active{
background-color:#A62C21;
}
/* MOBILES NAVIGATIONSMENÜ */
#mobile-nav-dropdown{
position:relative;
}
#mobile-nav-content{
position:absolute;
right:0;
top:50px;
}
#mobile-nav-button{
color:white;
float:right;
font-size:30px;
border: 2px solid white;
padding-left:9px;
padding-right:9px;
margin-top:5px;
margin-right:5px;
}
#mobile-nav-content>ul>li{
display:block;
background-color:#3D3F45;
padding-left:20px;
padding-right:20px;
}
#mobile-nav-content>ul{
margin-right:40px;
}
/* HEADER-BANNER */
#header-banner{
background: url("../img/hintergrund.jpg") no-repeat;
width:100%
height:0;
padding-top:20.83%;
background-size:contain;
}
#header-banner-klein{
background: url("../img/hintergrund-klein.jpg") no-repeat;
width:100%
height:0;
padding-top:15.625%;
background-size:contain;
}
/* GRID SYSTEM */
.container{
width:95%;
margin-left:auto;
margin-right:auto;
}
.row::after{
content:"";
clear:both;
display:block;
border: 0 !important;
}
[class*="col-"]{
float:left;
padding:10px;
}
.col-1{width:16.6666%;}
.col-2{width:33.3333%;}
.col-3{width:50%; }
.col-6{width:100%; }
/* GRID SYSTEM SICHTBARKEIT
.container,.container *{
border:1px solid #91c4ff;
}
[class*="col-"]{
background-color:#bfddff;
}
p {background-color:#91c4ff;
padding:0;
margin:0;
color:#fff;
text-align:center;
} */
/* Responsive Design */
#media(max-width:768px){
.col-1{width:33.3333%;}
.col-2{width:50%;}
.col-3{width:100%;}
}
#media(max-width:480px){
.col-1{width:50%;}
.col-2{width:100%;}
.col-3{width:100%;}
}
/* GRID SYSTEM FIX */
.header-nav *{
padding:0;
border:0;
}
.header-nav .container{
width:100%;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Startseite</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body>
<!-- NAVIGATIONSLEISTE -->
<nav class="header-nav">
<div class="container">
<div class="row">
<div class="col-6 clearfix">
<a href="index.html">
<img src="src/img/webdesign-logo.png">
</a>
<div id="mobile-nav-dropdown" class="clearfix">
<div id="mobile-nav-button">≡</div>
<div id="mobile-nav-content" class="clearfix">
<ul>
<li id="active">Startseite</li>
<li>Leistungen</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- HEADER-BANNER -->
<header id="header-banner"></header>
</body>
</html>
I have a header that is centering over one half of my div rather than the entire div. Please help!
Here is the HTML:
<div id="services"> <span2>Fees and Insurance</span2>
Here is the CSS:
#services {
height:500px;
background:#f9fbfb;
text-align:center;
font-weight:100;
font-size:35px;
padding:50px;
}
span2 {
font-size:40px;
margin-left:px;
text-align:center;
}
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<title>Website</title>
<meta name="author" content="WebDev">
<link href="example.css" rel="stylesheet" type="text/css" />
<style>
html {
font-family: "Open Sans";
font-size: 24px;
font-style: light;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
body {
background: linear-gradient(#fff 30%, #CCFFFF );
margin-top:10px ;
margin-right:75px;
margin-left:75px;
}
#container {
width:1300px;
margin:0 auto;
background:#iff;
}
#header {
width:100%;
height:170px;
background:#Fff;
}
#logo {
float:left;
width:400px;
height:85px;
margin:30px;
background:#fff;
color: #000;
font-size: 40px;
line-height:35px;
position:absolute;
}
span1 { font-size: 30px;
line-height: 18px;
}
#navbar {
height:20px;
clear:both;
background: #Fff;
}
#navbar ul {
margin:10px;
padding:1px;
list-style-type:none;
line-height: 40px;
}
#navbar ul li {
padding:px;
float:right ;
margin-top:120px;
}#navbar ul li a {
font-size:24px;
float:right ;
float:right ;
padding:0 0 0 20px;
display:block;
text-decoration:none;
font-weight:100;
color:#000;
}
#services {
height:500px;
background:#f9fbfb;
text-align:center;
font-weight:100;
font-size:35px;
padding:50px;
}
span2 {
font-size:40px;
margin-left:px;
text-align:center;
}
#foot {
font-size:25px;
font-weight: 200;
margin-right:75px;
margin-left:90px;
line-height:40px;
margin-top:50px;
}
#test {
height: 300px;
width: 480px;
background-image: url(http://www.berkeleywellness.com/sites/default/files/field/image/ThinkstockPhotos-471791462_1_field_img_hero_988_380.jpg);
background-repeat: no-repeat;
margin-top:85px;
margin-right:;
margin-left:90px;
border-radius:25px;
float:left;
overflow:hidden;
background-position:90%;
background-size:172%
clear:both;
}
ul2 {
text-align:left;
font-size:20px;
float:right;
position:relative;
width:550px;
margin-top:57px;
line-height:35px;
list-style:none;
margin-right:60px;
clear:both;
}
p2 {
text-align:left;
font-size:20px;
}
h4 {
text-align:center;
margin: 60px;
font-weight:;
float:center;
}
#end {
height:180px;
}
</style>
</head>
<body>
<!-- container -->
<div id="container">
<!-- header -->
<div id="header">
<div id="logo">
James Brewer, M.D. <span1> santa barbara pediatrician </span1>
</div>
<div id="navbar">
<ul>
<li>contact </li>
<li>gallery |</li>
<li>fees & insurance |</li>
<li>hours & location |</li>
<li>services |</li>
<li>about |</li>
</ul>
</div>
</div>
<!-- content area -->
<div id="content_area">
<div id="services"> <span2>Fees and Insurance</span2>
<div id="test"></div>
<div id="text">
<ul2>
<li>The office accepts all PPO insurance.</li>
<li> </li>
<li>We accept Cencal and Medi-cal.</li>
<li> </li>
<li>New patient consultations are provided at no cost.</li>
<li> </li>
<li>We regret that we do not take HMO insurance.</li>
</ul2>
</div>
</div>
</div>
<div id=end>
<h4>
<p id="foot">2421 Bath Street, Suite A
</p><p id="foot">
Call for an appointment today
1-805-563-0167
</p>
</h4>
</div>
</div><!-- end container -->
</body>
</html>
I am creating a site similar to jsbin in that site i have created menubar which is in black color and below menubar there is code container which is in grey color where user will type a code my problem is the codecontainer is overlaping the menu bar little not 100% i donot want to over lap it so how do i solve this problem
here is my code
HTML
<html>
<head>
<title>CodePlayer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="StyleSheets/CodePlayerStyleSheet.css">
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<!--------------------MENUBAR---------------------------------->
<div id="menubar">
<div id="logo">CodePlayer</div>
<div id="btnrun"><button id="runbtn">Run</button></div>
<div id="menubar">
<ul id="menulist">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li style="border:none;width:15%">Output</li>
</ul>
</div>
</div>
<!-------------------------------------------------------->
<div class="emptydiv"></div>
<!------------------CODECONTAINER---------------------------------------->
<div class="codecontainer" id="htmlcontainer">
<textarea>Example</textarea>
</div>
</div>
<!--------------------------------------------------------------->
<script>
</script>
</body>
</html>
CSS
body{
margin:0;
padding:0;
}
#menubar{
background-color: #000000;
width:100%;
height:50px;
}
#logo{
font-family: 'Lobster', cursive;
color:white;
font-size:30px;
padding:5px 0 0 15px;
float:left;
}
#runbtn{
float:right;
font-size:15px;
background-color:rgba(0,0,0,1.00);
border:1px solid #FFFFFF;
width:60px;
height:20px;
border-radius:10px;
color:white;
cursor:pointer;
position:relative;
top:8px;
}
#btnrun{
padding: 12px 20px 0 0;
}
#menulist{
list-style:none;
margin:0 auto;
border:1px solid #FFFFFF;
width:296px;
height:30px;
padding:0;
position:relative;
top:2px;
}
#menulist li{
float:left;
color:white;
border-right:1px solid white;
padding:5px 12px 7px 15px;
cursor:pointer;
}
li:hover{
background-color:#FFFFFF;
color:rgba(0,36,255,1.00) !important;
}
.emptydiv{
clear:both;
}
.codecontainer{
background-color:rgba(177,177,177,1.00);
color:black;
float:left;
height:100%;
width:25%;
}
Make the following change
#menubar {
background-color: #000000;
width:100%;
height:auto;
padding: 10px; /* you can change this, but it's to add some spacing on your menubar */
}
For some unknown reason z-index doesn't seem to work. I try to make the submenu. i.e. the 2nd bar. To go over the #content which it fails to do....
http://jsfiddle.net/PaD2v/
HTML
<html>
<head>
<title>Мэрия Skrillax-RP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="master.css" />
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Poiret+One&subset=cyrillic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="master.js"></script>
</head>
<body>
<div id="wrapper">
<div id="banner"><img src="http://i.imgur.com/f2EWgQP.png?1"><p id="banner text"></div>
<ul id="navigation">
<li>Главная Страница</li>
<li>Задачи
<ul class="submenu">
<li>Охрана</li>
<li>Министерство Обороны</li>
<li>Министерство Юстиций</li>
<li>Министерство Культуры</li>
<li>Министрество</li>
</ul>
</li>
<li>Список Сотрудников
<ul class="submenu">
<li>Hello</li>
<li>Hello2</li>
</ul>
</li>
<li>Вакансии</li>
<li>Авторизация</li>
</ul>
<div id="content">
<p>Hello! Welcome to the www.mayor.freeiz.com!<br><br> Currently I am working on adding different types of information</p>
</div>
</div>
<div id="footer">Hello</div>
</body>
</html>
CSS
html {
height:;
}
body {
background-image: url("http://www.gtagaming.com/images/potd/200604/10501.jpg");
background-attachment: fixed;
background-size: 100% 100%;
height:100%;
}
#wrapper {
width:1024px;
min-height: 100%;
margin:0 auto;
}
#banner {
height:216px;
}
#navigation {
position:relative;
list-style-type:none;
font-size: 18px;
background-color: orange;
font-family: 'EB Garamond', serif;
opacity:0.8;
z-index: 15000001;
}
#navigation>li {
float:left;
}
#navigation a {
display:block;
padding:10px 10px;
color:white;
font-weight: bold;
width:183.81px;
height:40px;
text-align: center;
background-color: blue;
border-left:1px solid black;
text-decoration:none;
}
#navigation a:hover {
background-color:white;
color:blue;
border-top:3px solid red;
opacity:0.9999;
margin-bottom: -3px;
}
#banner h1 {
font-size: 20px;
text-align: center;
position: relative;
top: 1024px;
}
#content {
position:relative;
height:500px;
background-color:white;
opacity:0.9;
clear: both;
z-index:1;
}
#content p{
position:relative;
top:6px;
font-size: 30px;
z-index:1;
}
#footer {
vertical-align: bottom;
background-color: orange;
width:1024px;
height:50px;
margin:0 auto;
}
.submenu {
display:none;
position:relative;
}
.submenu li {
border-top: 2px solid black;
}
#navigation li:hover .submenu {
display:block;
z-index:99999999999999999999999999999999999999;
}
instead of relative position in your .submenu use absolute position
css
.submenu {
display:none;
position:absolute;
}
working demo
Relative positioning doesn't take the element out of the normal document flow. Consequently, when it appears it takes up space like a normal div and pushes everything beneath it down.
To remove it from the normal document flow so that it just sits on top of everything, use position: absolute. In this case, the thing we want to sit on top of everything is the submenu, so apply it to .submenu.
I wonder if someone can help me. This is my first site, and although I have tried to solve as many problems for myself as I can, I have reached a point where I am staring at the screen dribbling at the mouth hitting the refresh key hoping by magic it will resolve itself.
The problem is that although the site seems to work fine in FF, Chrome and IE9+, in versions of IE8 and below, the horizontal navigation bar is invisible. There is a gap where it should be, and the links do work, but the sprite images are not visible.
This site is not yet online so unfortunately I cant give you a link to it, only code.
I do apologise if there is a glaringly obvious and simple answer that Ive been too stupid to spot.
Thankyou for your time.
Jon
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>Alan J. Warde Chartered Surveyor</title>
</head>
<body id="home">
<div id="wrap"><!--wrap starts-->
<img src="images/header.jpg" alt="header" />
<ul id="nav"><!--nav starts-->
<li class="home">Home</li>
<li class="about">About</li>
<li class="services">Services</li>
<li class="contact">Contact</li>
</ul><!--nav ends-->
<div id="main_content"><!--start of main_content-->
<div id="sidebar"><!--start of sidebar-->
<div class="listbox"><!--start of listbox-->
<div class="inner_sidebar">
<ul>
<li>Building Surveys</li>
<li>Valuations</li>
<li>Structural Engineering</li>
<li>Quantity Surveying</li>
<li>Loss Adjusting</li>
</ul>
</div><!--end of inner_sidebar-->
</div><!--end of listbox-->
</div><!--end of sidebar-->
<div id="homecontent"><!--start of Homecontent-->
<div id="inner_content"><!--start of inner_content-->
<h1>A J Warde Chartered Surveyor</h1>
<p>CONTENT</p>
<div id="contact"><!--start of contact-->
<p><img src="images/phone1.png" alt="phone" style="float:left;" />CONTENT</p>
</div><!--end of contact-->
</div><!--end of inner_content-->
</div><!--end of Homecontent-->
</div><!--end of main_content-->
<div id="footer">
<div id="footer_inside">
Registered Company 055012
<ul id="footer_nav"><!--nav starts-->
<li class="home">Home</li>
<li class="about">About</li>
<li class="services">Services</li>
<li class="contact">Contact</li>
</ul><!--nav ends-->
</div><!--end of Footer-inside-->
</div><!--end of footer-->
</div><!--wrap ends-->
</body>
</html>
#charset "utf-8";
/* CSS Document */
/*RESETS AND BASIC SETUP*/
* {margin:0; padding:0;}
html {overflow-y:scroll; overflow: -moz-scrollbars-vertical; }
body {
font: 62.5% "Times New Roman", Times, serif;
background-color: #322e2e;
}
/*TYPOGRAPHY*/
h1 {
padding:10px 0 20px 0;
text-align:center;
font-size:2.4em;
color:#003399;
text-shadow:1px 1px #69F;
}
h2 {
padding:5px 0 5px 0;
text-align:center;
font-size:1.1em;
color:#003399;
text-shadow:1px 1px #69F;
}
/*BASIC ELEMENT STYLING*/
ul {list-style:none inside;}
p {font-size:1.8em; line-height:1.2em; margin-bottom:1.2em; font-weight:bold; color:#333;}
a {outline:none;}
a {text-decoration:none;}
a img {border:none;}
/*END RESET*/
/*STRUCTURE AND THINGS*/
#wrap {
width:995px; /*for IE*/
margin:auto;
background:url(images/content.jpg)repeat-y;
}
html>body #wrap { /*IE hack*/
width:975px;
}
#main_content {
padding:0;
}
#homecontent {
background:url(images/contentimg.jpg) no-repeat;
height:478px;
width:633px;
float:right;
margin-right:12px; /*pushes div closer to left*/
margin-top:2px;
position:relative;
}
#servicescontent {
background:url(images/servicesnewbg.jpg) no-repeat;
height:478px;
width:633px;
float:right;
margin-right:12px; /*pushes div closer to left*/
margin-top:2px;
position:relative;
}
#inner_content {
padding:20px;
position:relative;
}
#contact { /*this is just to centre-align the contact details on home page*/
position:absolute;
left:150px;
width: 330px;
text-align:center;
}
#contact p {
color:#0000FF;
}
#left_col {
border:1px solid red;
float:left;
height:478px;
width:313px;
margin-left:15px; /*pushes div closer to right*/
margin-top:20px;
position:relative;
}
#contactdetails {
position:absolute;
left:50px;
}
#sidebar {
float:left;
background:url(images/sidebar.jpg) no-repeat;
height:478px;
width:313px;
margin-left:15px; /*pushes div closer to right*/
}
.inner_sidebar {
padding:20px 0 80px 0px;
font-size:1.4em;
}
.listbox {
width:230px;
margin-left:10px;
}
.inner_sidebar ul li {
font-size:1.4em;
padding:5px;
margin:5px 0 45px 5px;
font-weight:bold;
color:#FFF;
border:1px solid #FFF;
border-radius:3px;
background-color:rgba(0, 0, 25, 0.5);
}
/*TOP OF PAGE NAVIGATION*/
ul#nav {
}
ul#nav li {
display:inline;
}
ul#nav li a {
display:block;
height:54px;
text-indent:-9999px;
float:left;
}
ul#nav li.home a {
width:404px;
background:url(images/homenav.jpg)top center no-repeat;
}
ul#nav li.about a {
width:160px;
background:url(images/aboutnav.jpg)top center no-repeat;
}
ul#nav li.services a {
width:160px;
background:url(images/servicesnav.jpg)top center no-repeat;
}
ul#nav li.contact a {
width:251px;
background:url(images/contactnav.jpg)top center no-repeat;
}
ul#nav li a:hover {
background-position: center center;
}
body#home li.home a, body#about li.about a, body#services li.services a, body#contact li.contact a {
background-position: bottom center;
}
/*FOOTER*/
#footer {
height:96px;
background:url(images/footer.jpg) no-repeat;
clear:both;
}
#footer_inside {
text-align:center;
width:500px;
margin:auto;
padding:10px 0 0 0;
color:#CCCCCC;
font-size:1.4em;
}
ul#footer_nav li {
display:inline;
padding:0px;
margin:0px;
}
ul#footer_nav li a {
color:white;
text-decoration:none;
padding:0 10px;
border-right:1px solid white;
line-height:25px;
}
ul#footer_nav li:last-child a { /*last child selector to remove last border seperator*/
border:none;
}
Looks like you need to put spaces between the url() and top on each background property.
Lower version IEs have 'hasLayout' attribute that is only in IE.
You could find out about it.
ul#nav {
/* set width and height */
}
I think this might works.