I am new in css/html . I am working on cctccart project.while running this code
in bottom_menu,during click any menu like Products ,white background color is merging with blue.I want to fix this problem
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cctvcart store</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="header_wrap">
<div class="header_top_wrap">
<div class="header_top">
</div>
</div>
<!--end of header top wrap -->
<div class="header_bottom_wrap">
<div class="header_bottom">
<ul class="bottom_menu">
<li>Company
</li>
<li>Products
<u1 class="submenu">
<li>DVR & Kits
</li>
<li>spy camraes
</li>
<li>alarms
</li>
</u1>
</li>
<li>Services
</li>
<li>Support
</li>
<li>Multimedia
</li>
</ul>
</div>
</div>
<!--end of bottom wrap -->
</div>
<!--end of header wrap -->
<div class="main_wrap">
<div class="main">
</div>
<!--end of main -->
</div>
<!--end of main wrap -->
<div class="footer_wrap">
<footer></footer>
</div>
<!--end of footer wrap -->
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
.header_wrap {
width: 100%;
height: 160px;
background: red;
position: relative;
}
.main_wrap {
width: 100%;
height: 1475px;
background: green;
}
.footer_wrap {
width: 100%;
height: 325px;
background: aqua;
}
.main {
width: 1000px;
height: 100%;
background: blue;
margin: auto;
}
footer {
width: 1000px;
height: 100%;
background: aqua;
margin: auto;
}
.header_top_wrap {
width: 100%;
height: 23px;
background: #ccc;
}
.header_bottom_wrap {
width: 100%;
height: 40px;
background: #06F;
position: absolute;
bottom: 0px;
left: 0px;
}
.header_top {
width: 1000px;
height: 100%;
background: purple;
margin: auto;
}
.header_bottom {
width: 1000px;
height: 100%;
background: black;
margin: auto;
}
.bottom_menu > li {
display: inline-block;
}
.bottom_menu a
{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: #fff;
}
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 45px;
line-height: 35px;
text-align: center;
}
.bottom_menu > li:hover >a
{
background:#fff;
color:#151716;
}
.submenu a:active, .submenu a:visited{
display: block;
color: #fff;
text-decoration: none;
z-index: 21;
}
.submenu {
position: absolute;
display: none;
width:160px;
height:250px;
background:white;
list-style:none;
}
.dropdown:hover > .submenu{
display: block;
}
.submenu>li>a
{
display:block;
width:100%;
height:42px;
background:black;
text-decoration:none;
line-height:58px;
padding-left:50px;
border:1px dashed white;
}
Edit your CSS to this:
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 40px; /* this is the thing you have to fix */
line-height: 35px;
text-align: center;
}
I hope it can help you.
Link
HTML
<form id="form1" runat="server">
<div>
<br />
<br />
<div style="text-align: center;">
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span><span class="text">Add Details</span></label>
<label class="button">
<input type="radio" name="button" /> <span class="outer"><span class="inner"></span></span><span class="text">Choice 2</span></label>
<br />
<br />
<br />
<br />
</div>
<br />
</div>
</form>
CSS
.button {
background: #cfe7fa;
background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfe7fa), color-stop(100%, #6393c1));
background: -webkit-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -o-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -ms-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
border: 1px solid #6393c1;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
cursor: pointer;
display: inline-block;
font: 10px Arial, Verdana, Geneva, sans-serif;
line-height: 3px;
padding-right: 5px;
}
.button:hover .inner {
opacity:.5;
}
.button input {
display:none;
}
.button input:checked + .outer .inner {
opacity:1;
}
.button .outer {
background:#2989d8;
background:-moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2989d8), color-stop(99%, #101354));
background:-webkit-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-o-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-ms-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
border:1px solid black;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
height:10px;
margin:5px;
width:10px;
}
.button .inner {
background:#e4f5fc;
background:-moz-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #e4f5fc), color-stop(50%, #bfe8f9), color-stop(51%, #9fd8ef), color-stop(100%, #2ab0ed));
background:-webkit-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-o-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-ms-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
display:block;
height:10px;
margin:.5px;
opacity:0;
-moz-transition:opacity .5s;
-webkit-transition:opacity .5s;
-o-transition:opacity .5s;
transition:opacity .5s;
width:10px;
}
span.text,
span.outer
{
display: inline-block;
vertical-align: middle;
}
Related
How to change header list items color onClick?By default home item background color is green.When I click contact item or any other it should get background color green and home item shouldn't have green background anymore!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="art-main">
<header class="art-header">
<nav class="art-nav">
<ul class="art-hmenu">
<li>Home</li>
<li>Contact Us</li>
<li>About</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
.art-header
{
margin:0 auto;
height: 100px;
background-position: 19px 6px, 0 0;
position: relative;
width: 900px;
z-index: auto !important;
}
.art-nav
{
padding:5px 2px;
position: absolute;
margin: 0;
top: 20px;
width: 100%;
z-index: 100;
text-align: right;
}
ul.art-hmenu li
{
position: relative;
z-index: 5;
display: block;
float: left;
background: none;
margin: 0;
padding: 0;
border: 0;
}
ul.art-hmenu
{
display: inline-block;
vertical-align: middle;
}
ul.art-hmenu>li {
margin-left: 2px;
}
ul.art-hmenu>li:first-child {
margin-left: 1px;
}
ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child {
margin-right: 1px;
}
ul.art-hmenu>li>a
{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid transparent;
padding:0 22px;
margin:0 auto;
position: relative;
display: block;
height: 51px;
cursor: pointer;
text-decoration: none;
color: #808080;
line-height: 51px;
text-align: center;
}
.art-hmenu>li>a,
.art-hmenu>li>a:link,
.art-hmenu>li>a:visited,
.art-hmenu>li>a.active,
.art-hmenu>li>a:hover
{
font-size: 14px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
ul.art-hmenu>li>a.active
{
background: #73B078;
background: -webkit-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: -moz-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: -o-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: -ms-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
-svg-background: linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: linear-gradient(to bottom, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #57995C;
padding:0 22px;
margin:0 auto;
color: #FFFFFF;
text-decoration: none;
}
ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
background: #ADAF88;
background: -webkit-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: -moz-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: -o-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: -ms-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
-svg-background: linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: linear-gradient(to bottom, #C2C3A7 0, #969867 100%) no-repeat;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #ADAF88;
padding:0 22px;
margin:0 auto;
}
ul.art-hmenu>li>a:hover,
.desktop ul.art-hmenu>li:hover>a {
color: #FFFFFF;
text-decoration: none;
}
With jquery
$('ul li a').click(function(){
if ($('ul li a').hasClass("active")){
$('ul li a').removeClass("active");
}
$(this).addClass("active");
});
.art-header
{
margin:0 auto;
height: 100px;
background-position: 19px 6px, 0 0;
position: relative;
width: 100%;
z-index: auto !important;
}
.art-nav
{
padding:5px 2px;
position: absolute;
margin: 0;
top: 20px;
width: 100%;
z-index: 100;
text-align: right;
}
ul.art-hmenu li
{
position: relative;
z-index: 5;
display: block;
float: left;
background: none;
margin: 0;
padding: 0;
border: 0;
}
ul.art-hmenu
{
display: inline-block;
vertical-align: middle;
}
ul.art-hmenu>li {
margin-left: 2px;
}
ul.art-hmenu>li:first-child {
margin-left: 1px;
}
ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child {
margin-right: 1px;
}
ul.art-hmenu>li>a
{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid transparent;
padding:0 22px;
margin:0 auto;
position: relative;
display: block;
height: 51px;
cursor: pointer;
text-decoration: none;
color: #808080;
line-height: 51px;
text-align: center;
}
.art-hmenu>li>a,
.art-hmenu>li>a:link,
.art-hmenu>li>a:visited,
.art-hmenu>li>a.active,
.art-hmenu>li>a:hover
{
font-size: 14px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: bold;
font-style: normal;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
ul.art-hmenu>li>a.active
{
background: #73B078;
background: -webkit-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: -moz-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: -o-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: -ms-linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
-svg-background: linear-gradient(top, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
background: linear-gradient(to bottom, #93C297 0, #5CA362 85%, #56995C 100%) no-repeat;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #57995C;
padding:0 22px;
margin:0 auto;
color: #FFFFFF;
text-decoration: none;
}
ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
background: #ADAF88;
background: -webkit-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: -moz-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: -o-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: -ms-linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
-svg-background: linear-gradient(top, #C2C3A7 0, #969867 100%) no-repeat;
background: linear-gradient(to bottom, #C2C3A7 0, #969867 100%) no-repeat;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #ADAF88;
padding:0 22px;
margin:0 auto;
}
ul.art-hmenu>li>a:hover,
.desktop ul.art-hmenu>li:hover>a {
color: #FFFFFF;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="art-main">
<header class="art-header">
<nav class="art-nav">
<ul class="art-hmenu">
<li><a class="active">Home</a></li>
<li><a>Contact Us</a></li>
<li><a>About</a></li>
</ul>
</nav>
</header>
</div>
I am attempting to center a drop down list, extending the grey rectangle across the screen while keeping the text in the direct center of the screen. There should only be three items at this time. These items are Home, Assignments and Projects.
Here's the html
<HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="http://jamcgraw.iweb.bsu.edu/assignments/stylesheet.css" />
<title>McGraw</title>
</head>
<div align="center">
<body>
<li>Home
</li>
<li>Assignments
<ul>
<li>
</li>
</ul>
</li>
<li>Projects
<ul>
<li><a href="http://jamcgraw.iweb.bsu.edu/projects/project1/project1.zip" target="_blank">
Project 1</a>
</li>
</ul>
</li>
</ul>
<br />
<br />
<h2>Some of my favorite websites include:<ul>
Facebook </br>
Reddit </br>
Twitch.tv </br>
Youtube </br>
Noxxic
</ul>
</h2>
</body>
</html>
and the .css for the DDM
/*Begin Theme Style Code*/
/*Begin Regular Code*/
* {
margin: 0px;
}
/*End Regular Code*/
/*Begin Menu code*/
#menu-container ul,
#menu-container li,
#menu-container span,
#menu-container a {
margin: 0;
padding: 0;
position: relative;
}
#menu-container {
/* EDITED : ADD THE FOLLOWING LINE */
text-align:center;
height: 49px;
border-radius: 0px 0px 0 0;
-moz-border-radius: 0px 0px 0 0;
-webkit-border-radius: 0px 0px 0 0;
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
border-bottom: 2px solid #0fa1e0;
}
#menu-container:after,
#menu-container ul:after {
content: '';
display: block;
clear: both;
}
#menu-container a {
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
color: #ffffff;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#menu-container ul {
list-style: none;
}
#menu-container > ul {
}
#menu-container > ul > li {
/*EDITED : CHANGE THE FOLLOWING LINE*/
float: left;
}
#menu-container > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#menu-container > ul > li:first-child > a {
border-radius: 0px 0 0 0;
-moz-border-radius: 0px 0 0 0;
-webkit-border-radius: 0px 0 0 0;
}
#menu-container > ul > li:last-child > a {
border-radius: 0 0px 0 0;
-moz-border-radius: 0 0px 0 0;
-webkit-border-radius: 0 0px 0 0;
}
#menu-container > ul > li.active > a {
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#menu-container > ul > li:hover > a {
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
}
#menu-container .has-sub {
z-index: 1;
}
#menu-container .has-sub:hover > ul {
display: block;
}
#menu-container .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#menu-container .has-sub ul li {
*margin-bottom: -1px;
}
#menu-container .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #6fc7ec;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#menu-container .has-sub ul li:hover a {
background: #0c7fb0;
}
#menu-container .has-sub .has-sub:hover > ul {
display: block;
}
#menu-container .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#menu-container .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #6db2d0;
}
#menu-container .has-sub .has-sub ul li a:hover {
background: #095c80;
}
#menu-container {
-moz-box-shadow: 0 0 10px #888;
-webkit-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
}
/*End Menu Code*/
/*Begin Button Code*/
button.button {
border: 0 none;
font-size: 16px;
font-weight: 600;
height: 34px;
line-height: 22px;
margin-bottom: 5px;
margin-left: 0;
margin-right: 1px;
padding: 4px 11px 10px;
color: #FFFFFF;
background-color: #00CCFF;
font-family: Segoe UI, Tahoma, Helvetica, sans-serif;
}
button.button:hover {
background-color:#24459A
}
/*End Button Code*/
/*Begin Table Logo Code*/
table.header {
width: 100%;
border-collapse: collapse;
border: none;
}
table.header td {
vertical-align: top;
border: 1px solid #BFBFBF;
padding: -1px;
}
table.header td.center {
width: 800px;
height: 600px;
}
img.logo {
display: block;
margin-left: auto;
margin-right: auto;
}
/*End Table Logo Code*/
/*End Theme Style Code*/
JSFiddle
I mostly fixed your code as it was a mess.
The solution I used to center the list was:
display: table;
That should fix your problems.
My Navigation bar seems to extend out further than where the rest of my page stops. See my code within a JSfiddle with what's happening here. I can't seem to figure out why this is happening.
HTML:
<div id="header-wrapper">
<center>
<img src="images/logo.png" alt=""/>
</center>
<div class="container">
<div class="row">
<div class="12u">
<header id="header">
<nav id="nav">
<i class="fa fa-home"></i>  Home
<i class="fa fa-flag-o"></i>  RFP Recap '14-'15
<i class="fa fa-database"></i>  Archived Updates
<i class="fa fa-phone"></i>  Contact Us
<i class="fa fa-folder-open-o"></i>  Member Contacts
<i class="fa fa-sign-in"></i>  Log In
</nav>
</header>
</div>
</div>
</div>
</div>
CSS:
/* Header */
#header-wrapper {
background-color: #007294;
background-image: -moz-linear-gradient(top, #008dab, #007294);
background-image: -webkit-linear-gradient(top, #008dab, #007294);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab), to(#007294));
background-image: -ms-linear-gradient(top, #008dab, #007294);
background-image: -o-linear-gradient(top, #008dab, #007294);
background-image: linear-gradient(top, #008dab, #007294);
}
#header {
position: relative;
border-radius: 10px;
border: solid 1px #006e8b;
box-shadow: inset 0px 0px 0px 1px #12a0bf, 0px 1px 4px 0px rgba(0,0,0,0.10);
background-color: #007b9d;
background-image: -moz-linear-gradient(top, #008ead, #007b9d);
background-image: -webkit-linear-gradient(top, #008ead, #007b9d);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008ead), to(#007b9d));
background-image: -ms-linear-gradient(top, #008ead, #007b9d);
background-image: -o-linear-gradient(top, #008ead, #007b9d);
background-image: linear-gradient(top, #008ead, #007b9d);
height: 86px;
width: 1200px;
margin-top: 0%;
margin-right: 0;
margin-bottom: 2.5%;
margin-left: 0;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
}
#header h1 {
position: absolute;
left: 0px;
top: 10px;
color: #fff;
font-size: 2.4em;
letter-spacing: -2px;
line-height: 86px;
}
#header h1 a {
color: #fff;
text-decoration: none;
}
#header nav {
position: absolute;
right: 40px;
top: 1px;
line-height: 84px;
text-transform: ;
font-size: 1.3em;
letter-spacing: -1px;
width: 1066px;
height: 92px;
}
#header nav a {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 0 25px 0 25px;
outline: 0;
}
#header nav a.current-page-item {
background-color: #007897;
background-image: -moz-linear-gradient(top, #007b99, #007897);
background-image: -webkit-linear-gradient(top, #007b99, #007897);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007b99), to(#007897));
background-image: -ms-linear-gradient(top, #007b99, #007897);
background-image: -o-linear-gradient(top, #007b99, #007897);
background-image: linear-gradient(top, #007b99, #007897);
box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.1), 0px 0px 5px 1px rgba(255,255,255,0.1);
}
#header nav a:hover {
background-color: #0882a1;
background-image: -moz-linear-gradient(top, #0782a0, #077d9b);
background-image: -webkit-linear-gradient(top, #0782a0, #077d9b);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0782a0), to(#077d9b));
background-image: -ms-linear-gradient(top, #0782a0, #077d9b);
background-image: -o-linear-gradient(top, #0782a0, #077d9b);
background-image: linear-gradient(top, #0782a0, #077d9b);
box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.05), 0px 0px 5px 1px rgba(255,255,255,0.05);
}
You are missing value for css in line 80:
text-transform: ;
Plus html entities like $nbsp have ; at the end $nbsp;
Set body tag to:
body{
position:relative;
margin:0 auto;
width:1200px;
}
Next give #header-wrapper & #header WIDTH of 100%
#header-wrapper,#header{
width:100%;
}
This should keep your #header inside of your Wrapper, and Wrapper should remain inside of your Body.
/== TAB TEXT ==/
Try replacing your #header nav a with this
#header nav a {
float:left; <!-- Changed from display:inline-block; -->
text-decoration: none;
color: #fff;
padding: 0px 0px 0px 10px; <!-- changed from 0px 25px 0px 25px-->
outline: 0;
}
I am trying to get a div to have it's own background image, but every time I add the image it makes the div transparent so the main back ground shows through. I've scoured this site and others but to no avail.
<!DOCTYPE HTML>
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Mobile video game parties offering the ultimate gaming experience. All inside a top of the line mobile gaming trailer." />
<meta name="fb_admins_meta_tag" content="USER_ID"/>
<meta property="og:title" content="WeGotGamez| Mobile Video Game Party"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.wegotgamez.com/"/>
<meta property="og:site_name" content="WeGotGamez| Mobile Video Game Party"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description" content="Mobile video game parties offering the ultimate gaming experience. All inside a top of the line mobile gaming trailer."/>
<META NAME="robot" CONTENT="index,follow">
<META NAME="refresh" CONTENT="120">
<head>
<title> Mobile Video Game Party| WeGotGamez| Mobile Gaming, Sacramento </title>
<head>
<link rel="stylesheet" type="text/css" href="homepage3.css">
<style>
body
{
background-image:url('drkdp.jpg');
}
</style>
</head>
<body>
<div id="container" style="width:1060px;">
<div style="clear: both;"></div>
<img src="c:\users\wgg1\desktop\websitemaint\gallery\hdrimg.png" style="float: right; width: 500px; height: 150px; margin-right: -100px; margin-left: 15px;"/><img src="C:\Users\WGG1\Desktop\WebsiteMaint\logo.png" style="float: left;margin-top: 0px; margin-left: 0px; width: 400px; height: 135px;"/><h3 style="float:right;">3201 Evergreen Ave Ste 360</br>West Sacramento, CA, 95691</br>(916)945-0837</br><a href=https://www.facebook.com/WEGOTGAMEZ><img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\Icons\fb16x16.png"/></a><a href=https://twitter.com/wegotgamez><img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\Icons\twt16x16.png"/></a><a href=http://instagram.com/wegotgamez><img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\Icons\igrm16x16.png"/></a>
</div>
</br>
</div>
<div id='cssmenu' style="margin-left: 0px; margin-top: 150px; margin-bottom: 25px;">
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='C:\Users\WGG1\Desktop\WebsiteMaint\equipment.html'><span>Equipment</span></a>
<ul>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\mobilegamingtrailer.html'><span>Mobile Gaming Trailer</span></a></li>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\mobilegamingcube.html'><span>Portable Gaming Stations</span></a></li>
<li class='last'><a href='C:\Users\WGG1\Desktop\WebsiteMaint\retroarcade.html'><span>Retro Arcade's</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Party Packages</span></a>
<ul>
<li class='last'><a href='#'><span>Schedule An Event</span></a></li>
</ul>
</li>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\tournaments.html'><span>Tournaments</span></a></li>
<li><a href='#'><span>About US</span></a></li>
<li><a href='#'><span>Game Library</span></a></li>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\gallery.html'><span>Gallery</span></a></li>
<li><a href='#'><span>FAQ</span></a></li>
<li class='last'><a href='#'><span>Contact Us</span></a></li>
</ul>
</div>
<div class="photobanner">
<img class="first" src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\052.jpg" alt="">
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\008.jpg" alt="">
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\019.jpg" alt="">
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\026.jpg" alt="">
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\033.jpg" alt="">
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\041.jpg" alt="">
</div>
<div id="col1"><h4 style="text-align:left; margin-left:5px">Let<b> We Got Gamez</b> and our friendly game coaches bring the ultimate in gaming experiences to your next event.<br><br><font face="wingdings"> « </font><font face="wingdings"> « </font><font face="wingdings"> « </font><br><br> Whether it be a birthday party, block party, wedding, or even an office team building event, we've got you covered.<br><br><font face="wingdings"> « </font><font face="wingdings"> « </font><font face="wingdings"> « </font><br><br> With our unique trailer set up and our extensive game libraries, your event will be the one everyone will be talking about for weeks to come!</h4>
<h4 style="text-align:left; margin-left:5px"><font face="wingdings"> « </font><font face="wingdings"> « </font><font face="wingdings"> « </font>
</h4>
<h4 style="text-align:left; margin-left:5px">Check out the competition and you will see that we offer the most advanced and savvy mobile gaming platforms anywhere.<br><br><font face="wingdings"> « </font><font face="wingdings"> « </font><font face="wingdings"> « </font><br><br> Our gaming trailer comes equipped with 8 individual gaming stations each boasting an XBOX 360, PS3, gaming chair, stereo headset, and 24" t.v screens.<br><br><font face="wingdings"> « </font><font face="wingdings"> « </font><font face="wingdings"> « </font><br><br> We conform to the most popular gaming tournament standards and regulations, giving you a professional feel for house tournaments.</h4>
</div>
<div id="col2"><h4 style="text-align:center;margin-right:15px;margin-left:15px;margin-top:15px">Our Mobile Gaming Trailer brings the party right to your house !</h4>
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\042.jpg" style="align:center;width:450px;height:250px;margin-top:5px;">
</hr>
<h4 style="text-align:center;margin-left:15px;margin-right:15px;">No crowding around a single bench to play. Get a truly immersive experience with our unique gaming stations.</h4>
<br>
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\052.jpg" style="align:center;width:450px;height:250px;margin-bottom:15px">
<h4 style="text-align:center;margin-left:15px;margin-right:15px;">Our portable game cubes fit anywhere , inside or outside your business or home !</h4>
</div>
<div id="col3"><h4 style="text-align:center;">Affiliations:</h4>
<br>
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\sponsorimg\astro.png" style="align:center;width:150px;height:100px;margin-bottom:15px">
<br>
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\sponsorimg\avngr.png" style="align:center;width:150px;height:100px;margin-bottom:15px">
<br>
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\sponsorimg\skulc.png" style="align:center;width:150px;height:100px;margin-bottom:15px">
<br>
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\sponsorimg\sqdgrp.png" style="align:center;width:150px;height:100px;margin-bottom:15px">
<br>
</div>
<br>
<br>
<div id='cssmenu1' style="margin-left: -25px; margin-right: 35px; margin-top: 15px; margin-bottom: -25px; display:inline-block; position:relative">
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='C:\Users\WGG1\Desktop\WebsiteMaint\equipment.html'><span>Equipment</span></a>
<ul>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\mobilegamingtrailer.html'><span>Mobile Gaming Trailer</span></a></li>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\mobilegamingcube.html'><span>Portable Gaming Stations</span></a></li>
<li class='last'><a href='C:\Users\WGG1\Desktop\WebsiteMaint\retroarcade.html'><span>Retro Arcade's</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Party Packages</span></a>
<ul>
<li class='last'><a href='#'><span>Schedule An Event</span></a></li>
</ul>
</li>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\tournaments.html'><span>Tournaments</span></a></li>
<li><a href='#'><span>About US</span></a></li>
<li><a href='#' target='_blank'><span>Game Library</span></a></li>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\gallery.html'><span>Gallery</span></a></li>
<li><a href='#'><span>FAQ</span></a></li>
<li class='last'><a href='#'><span>Contact Us</span></a></li>
</ul>
<p style="color:blue; margin-top:-5px">© 2013 by We Got Gamez, Custom Upfits, and Electrical Service Specialties</p>
</div>
</body>
</html>
html {
text-align: center;
}
body{
margin-right: 40px ;
margin-left: 70px;
width: 1200px;
margin-bottom: 10px;
margin-top: 5px;
overflow-x: hidden;
overflow-y: hidden;
height: 100%;
}
#wrapper {
width: 1000px;
margin-right: 40px;
margin-left: 70 px;
height: 100%;
}
h1 {
color:#FBF2EF;
font-family: 'times new roman';
}
h2{
color:#fbf2ef;
}
h3
{
color:#fbf2ef;
font-family: 'times new roman'
}
hr {
color: #f00;
background-color: #f00;
height: 1px;
}
p {
font-color:'white';
}
button {
height: 100px;
width: 200px;
padding:5px;
background-color: #dcdcdc;
border: 1px solid #666;
color:#000;
text-decoration:none;
}
strong{
font-weight:bold;
}
#col1
{
float: left;
width: 20%;
margin-bottom: 10px;
background-image:url('C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\dpimg3.jpg');
background-repeat: no-repeat;
border:double 7px #000000;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#col2
{
float: left;
width: 48%;
margin-left: 3%;
background-color: grey;
margin-bottom: 10px;
border:double 7px #000000;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#col3
{
float: left;
width: 20%;
margin-left: 3%;
background-color: grey;
margin-bottom: 10px;
border:double 7px #000000;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#col4{
position:center;
width: 48%;
margin-left: 3%;
background-color: grey;
margin-bottom: 10px;
border:double 7px #000000;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
div .body{
border:double 7px #000000;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#footer {
margin-top: 150px; /* negative value of footer height */
height: 5px;
margin-bottom: 5px;
min-width: 1200px;
}
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
color: #ffffff;
display: inline-block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #333333;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li.active a {
background: #646464 url(grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
filter: none;
}
#cssmenu > ul > li.active a:hover {
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
filter: none;
}
#cssmenu > ul > li a {
box-shadow: inset 0 0 0 1px #8a8a8a;
-moz-box-shadow: inset 0 0 0 1px #8a8a8a;
-webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
background: #4a4a4a url(grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
border-bottom: 1px solid #5d5d5d;
border-top: 1px solid #5d5d5d;
border-right: 1px solid #5d5d5d;
line-height: 34px;
padding: 0 35px;
filter: none;
}
#cssmenu > ul > li a:hover {
background: #8a8a8a url(grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
filter: none;
}
#cssmenu > ul > li:first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #5d5d5d;
}
#cssmenu > ul > li:last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
#cssmenu .has-sub:hover ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
top: 36px;
left: -1px;
min-width: 100%;
text-align: center;
/* IE7 */
*width: 100%;
}
#cssmenu .has-sub ul li {
text-align: center;
}
#cssmenu .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #5d5d5d;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}
.photobanner {
height: 65px;
width: 960px;
margin-bottom: 80px;
margin-right:100px;
margin-top: 5px;
margin-left: 105px;
}
.photobanner img {
height: 85px;
width: 150px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(2.0);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
div.container {
border: 1px solid #000000;
overflow: auto;
width: 100%
}
#cssmenu1{
height: 50px;
margin-bottom: -100px;
}
#cssmenu1 ul,
#cssmenu1 li,
#cssmenu1 span,
#cssmenu1 a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu1:after,
#cssmenu1 ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu1 a {
color: #ffffff;
display: inline-block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #333333;
}
#cssmenu1 ul {
list-style: none;
}
#cssmenu1 > ul > li {
float: left;
}
#cssmenu1 > ul > li.active a {
background: #646464 url(grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
filter: none;
}
#cssmenu1 > ul > li.active a:hover {
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
filter: none;
}
#cssmenu1 > ul > li a {
box-shadow: inset 0 0 0 1px #8a8a8a;
-moz-box-shadow: inset 0 0 0 1px #8a8a8a;
-webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
background: #4a4a4a url(grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
border-bottom: 1px solid #5d5d5d;
border-top: 1px solid #5d5d5d;
border-right: 1px solid #5d5d5d;
line-height: 34px;
padding: 0 35px;
filter: none;
}
#cssmenu1 > ul > li a:hover {
background: #8a8a8a url(grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
filter: none;
}
#cssmenu1 > ul > li:first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #5d5d5d;
}
#cssmenu1 > ul > li:last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
#cssmenu1 .has-sub:hover ul {
display: block;
}
#cssmenu1 .has-sub ul {
display: none;
position: absolute;
left: -1px;
min-width: 100%;
text-align: center;
bottom: 100%;
/* IE7 */
*width: 100%;
}
#cssmenu1.has-sub ul li {
text-align: center;
}
#cssmenu1 .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #5d5d5d;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}
If you use image with transparency it could happen.
Maybe some CSS like:
div.your_div_class{
background: url('some_image.png') #fff;
}
would help.
Use color like #fff(white) in background to not make it transparent.
You could use background-color: #fff; separately too.
To expand on Michael's answer...
Assuming that you have a transparent image that is allowing the previous background to leak through, you'll need to define a background color on the new div.
But keep in mind that if you use the compound attribute that it will override all the background attributes defined before it.
So in this case, all you'll see is white:
div.your_div_class {
background-image: url('your_image.png');
background: #FFF;
}
But if you use the specific image and the color background attributes they're additive. So in this case you'll get the image with a white background:
div.your_div_class {
background-image: url('your_image.png');
background-color: #FFF;
}
It's one of those days and I can not figure out why I'm getting a space to the left of each of the LI tags in the following code. If you hover over, the menu items you'll see what I mean.
http://jsfiddle.net/midnitesonnet/C2Dub/
<div id="wrapper">
<div id="menu">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
I can not figure out why I'm getting a space to the left of each of the LI tags
Because you format them with display:inline-block - and have whitespace between the tags. That's basic "HTML behavior", that any whitespace between two inline(-block) elements is condensed to one space character when displayed.
Either float the LI instead, or write them without whitespace between the tags, meaning ...</li><li>...
try this
http://jsfiddle.net/C2Dub/4/
/* CSS Document */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
margin-top: 0px;
background-color: #f5f5f5;
}
#wrapper {
background-color: #ffffff;
width: 1000px;
margin: auto;
-webkit-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.64);
-moz-box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.64);
box-shadow: 0px 0px 6px rgba(50, 50, 50, 0.64);
/*-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;*/
}
#menu {
background: #505050;
background: -moz-linear-gradient(top, #505050 0%, #343434 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(50%,#343434));
background: -webkit-linear-gradient(top, #505050 0%,#343434 50%);
background: -o-linear-gradient(top, #505050 0%,#343434 50%);
background: -ms-linear-gradient(top, #505050 0%,#343434 50%);
background: linear-gradient(to bottom, #505050 0%,#343434 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#343434',GradientType=0 );
min-height: 26px;
color: #CCC;
}
#menu ul {
display: block;
height: 39px;
list-style: none outside none;
margin: 0;
padding: 0;
}
#menu li {
margin: 0;
display: inline-block;
height: 39px;
border-right: 1px solid rgb(0, 0, 0);
padding: 0px 20px !important;
line-height: 39px;
list-style: none;
float:left;
}
#menu li a {
display: inline-block;
width: 99%;
color: #CCC;
text-decoration: none;
}
#menu li:hover {
background: #6b6b6b;
background: -moz-linear-gradient(top, #6b6b6b 0%, #4c4c4c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b6b6b), color-stop(100%,#4c4c4c));
background: -webkit-linear-gradient(top, #6b6b6b 0%,#4c4c4c 100%);
background: -o-linear-gradient(top, #6b6b6b 0%,#4c4c4c 100%);
background: -ms-linear-gradient(top, #6b6b6b 0%,#4c4c4c 100%);
background: linear-gradient(to bottom, #6b6b6b 0%,#4c4c4c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b6b6b', endColorstr='#4c4c4c',GradientType=0 );
}
#content {
min-height: 600px;
padding: 5px;
}
#footer {
min-height: 50px;
background: #f4f7f5;
background: -moz-linear-gradient(top, #f4f7f5 0%, #edf5f7 37%, #d3e8e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f7f5), color-stop(37%,#edf5f7), color-stop(100%,#d3e8e6));
background: -webkit-linear-gradient(top, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
background: -o-linear-gradient(top, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
background: -ms-linear-gradient(top, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
background: linear-gradient(to bottom, #f4f7f5 0%,#edf5f7 37%,#d3e8e6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f7f5', endColorstr='#d3e8e6',GradientType=0 );
border-top: 1px #D2D2D2 solid;
}
This seems to work, I floated your li's, removed some padding and changed the height of the menu: http://jsfiddle.net/C2Dub/5/
#menu {
background: #505050;
background: -moz-linear-gradient(top, #505050 0%, #343434 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(50%,#343434));
background: -webkit-linear-gradient(top, #505050 0%,#343434 50%);
background: -o-linear-gradient(top, #505050 0%,#343434 50%);
background: -ms-linear-gradient(top, #505050 0%,#343434 50%);
background: linear-gradient(to bottom, #505050 0%,#343434 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#343434',GradientType=0 );
min-height: 39px;
color: #CCC;
}
#menu ul {
display: block;
padding: 0;
margin: 0;
list-style: none;
}
#menu li {
margin: 0;
float: left;
height: 19px;
border-right: 1px solid rgb(0, 0, 0);
padding: 10px 20px !important;
list-style: none;
}
U have some whitespace characters between your HTML code try to put the li tags on eachtoher:
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
This solved the problem in the Fiddle.