The website I'm currently working on has been all good was working all fine the content box and side bar were working fine, Then I added the menu in and now something not working out to well for me.... Can any one help?
http://screensnapr.com/v/mKUI87.png
Code:
@charset "utf-8";
/* CSS Document */
html, body{
background: url('../images/bg.png')no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;
font-size: 14px;
}
#wrapper{
width: 980px;
margin:0 auto
}
img {
border: 0px;
}
a {
}
h1, h2, h3, h4, h5 {
color:#1982D1;
}
#logo {
background-image: url('../images/logo.png');
width: 270px;
height: 92px;
margin-top: 20px;
float: left;
}
#content {
background-image: url('../images/content.png');
height: auto;
width: 600px;
float: left;
margin-left: 10px;
margin-top: 50px;
margin-bottom: 10px;
}
#content-text {
padding: 20px;
}
#sidebar {
background-image: url('../images/sidebar.png');
width: 324px;
height: auto;
margin-left: 5px;
margin-right: 10px;
float: right;
margin-top: 50px;
}
#sidebar-text {
padding: 15px;
}
#menu > ul > li{
display:inline;
list-style-type:none;
margin-top: 50px;
margin-left: 40px;
float: left;
}
#menu a {
color: #f2f2f2;
font-size: 20px;
text-shadow: 0px 1px 1px #000000;
text-decoration: none;
float: left;
}
.button1 {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background-color:#79bbff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #528ecc;
}
.button1:hover {
background-color:#378de5;
}
.button1:active {
position:relative;
top:1px;
}
.button2 {
-moz-box-shadow:inset 0px 1px 0px 0px #e184f3;
-webkit-box-shadow:inset 0px 1px 0px 0px #e184f3;
box-shadow:inset 0px 1px 0px 0px #e184f3;
background-color:#c123de;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #a511c0;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #9b14b3;
}.button2:hover {
background-color:#a20dbd;
}.button2:active {
position:relative;
top:1px;
}
form {
padding: 0;
margin: 0;
}
input, textarea, select {
border: 1px #e0e0e0 solid;
border-bottom-width: 2px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 5px;
font-size: 12px;
font-weight: bold;
}
input:focus {
border-color: #ccc;
background-color: #fafafa;
}
input[type=submit], input.button {
color: #888;
border-color: #ddd;
background: #f0f0f0;
cursor: pointer;
padding: 3px;
}
input[type=submit]:hover, input.button:hover {
background-color: #e6e6e6;
border-color: #d6d6d6;
}
input[type=submit].green, input.button.green {
background-color: #d9ffcf;
border-color: #ade5a3;
color: #1b801b;
}
input[type=submit].red, input.button.red {
background-color: #ffcfcf;
border-color: #e5a3a3;
color: #801b1b;
}
#footer {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;
font-size: 14px;
text-shadow: 0px 1px 1px #000000;
margin-left: 35px;
color: #f2f2f2;
clear: both;
bottom: 0px;
float: left;
}
.clear{
clear:both;
}