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;
}
Related
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.
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;
}
I have a menu that is working fine, but I want put a new sublevel on it, and if I put directly, when new options show they hide the othes option of menu.
here a pic http://www.potrusmaximus.uphero.com/dudas/menu.jpg
I want that new options show it next to the selected not down.
thx
Here my css and Html.
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}
#menu-bar {
width: 1010px;
margin: 3px 0px 0px 0px;
padding: 0px 5px 5px 5px !important;
max-height: 42px;
line-height: 100%;
border-radius: 43px;
-webkit-border-radius: 43px;
-moz-border-radius: 43px;
box-shadow: 2px 2px 14px #949494;
-webkit-box-shadow: 2px 2px 14px #949494;
-moz-box-shadow: 2px 2px 14px #949494;
background: #f7f7f7;
background: -moz-linear-gradient(top, #f7f7f7 0%, #c4c4c4 16%, #666666 39%, #666666 56%, #545454 68%, #292929 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #f7f7f7), color-stop(16%, #c4c4c4), color-stop(39%, #666666), color-stop(56%, #666666), color-stop(68%, #545454), color-stop(100%, #292929));
background: -webkit-linear-gradient(top, #f7f7f7 0%, #c4c4c4 16%, #666666 39%, #666666 56%, #545454 68%, #292929 100%);
background: -o-linear-gradient(top, #f7f7f7 0%, #c4c4c4 16%, #666666 39%, #666666 56%, #545454 68%, #292929 100%);
background: -ms-linear-gradient(top, #f7f7f7 0%, #c4c4c4 16%, #666666 39%, #666666 56%, #545454 68%, #292929 100%);
background: linear-gradient(to bottom, #f7f7f7 0%, #c4c4c4 16%, #666666 39%, #666666 56%, #545454 68%, #292929 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f7f7", endColorstr="#292929", GradientType=0 );
border: solid 2px #B8B8B8;
position:relative;
z-index:999;
}
#menu-bar li { /* define los li*/
margin: 0px 8px 6px 8px;
padding: 0px 18px 0px 17px !important;
float: left;
position: relative;
list-style: none;
}
#menu-bar a { /*define los enlace*/
font-weight: bolder;
font-family: georgia;
font-style: normal;
font-size: 15px;
color: #EDEBEB;
text-decoration: none;
display: block;
padding: 15px 10px 10px 10px !important;
margin-bottom: 6px;
border-radius: 29px;
-webkit-border-radius: 29px;
-moz-border-radius: 29px;
text-shadow: 2px 2px 3px #000000;
}
#menu-bar li ul li a {
margin: 0;
}
/*#menu-bar .active a, */#menu-bar li:hover > a {
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 18%, #ebe8eb 32%, #d2d0d2 51%, #9a989a 74%, #434243 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ffffff), color-stop(18%, #ffffff), color-stop(32%, #ebe8eb), color-stop(51%, #d2d0d2), color-stop(74%, #9a989a), color-stop(100%, #434243));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 18%, #ebe8eb 32%, #d2d0d2 51%, #9a989a 74%, #434243 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 18%, #ebe8eb 32%, #d2d0d2 51%, #9a989a 74%, #434243 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 18%, #ebe8eb 32%, #d2d0d2 51%, #9a989a 74%, #434243 100%);
background: radial-gradient(ellipse at center, #ffffff 0%, #ffffff 18%, #ebe8eb 32%, #d2d0d2 51%, #9a989a 74%, #434243 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#434243", GradientType=1 );
color: #141414;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 2px 2px 3px #363636;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a { /* coplores iluminacion*/
background: none;
border: none;
color: #ebebeb;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover { /*elementos submenu seleccionados*/
background: #0399D4 !important;
background: linear-gradient(top, #87ECEC, #0186BA) !important;
background: -ms-linear-gradient(top, #87ECEC, #0186BA) !important;
background: -webkit-gradient(linear, left top, left bottom, from(#87ECEC), to(#0186BA)) !important;
background: -moz-linear-gradient(top, #87ECEC, #0186BA) !important;
color: #141414 !important;
border-radius: 29px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul { /*define la caja del submenu*/
background: #262626;
background: -moz-linear-gradient(top, #262626 0%, #5e5e5e 31%, #525252 45%, #050505 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #262626), color-stop(31%, #5e5e5e), color-stop(45%, #525252), color-stop(100%, #050505));
background: -webkit-linear-gradient(top, #262626 0%, #5e5e5e 31%, #525252 45%, #050505 100%);
background: -o-linear-gradient(top, #262626 0%, #5e5e5e 31%, #525252 45%, #050505 100%);
background: -ms-linear-gradient(top, #262626 0%, #5e5e5e 31%, #525252 45%, #050505 100%);
background: linear-gradient(to bottom, #262626 0%, #5e5e5e 31%, #525252 45%, #050505 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#262626", endColorstr="#050505", GradientType=0 );
display: none;
margin: 0;
padding: 0 !important;
width: 201px;
position: absolute;
top: 42px;
left: 0;
border: solid 2px #B8B8B8;
border-radius: 29px;
-webkit-border-radius: 29px;
-moz-border-radius: 29px;
-webkit-box-shadow: 2px 2px 3px #949494;
-moz-box-shadow: 2px 2px 3px #949494;
box-shadow: 2px 2px 3px #949494;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0 !important;
}
#menu-bar ul a { /* enlaces submenus*/
padding:10px 1px 10px 15px !important;
color:#242424;
font-size:12px;
font-style:normal;
font-family:georgia;
font-weight: bolder;
text-shadow: 2px 2px 3px #b8b2b8;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 29px;
-webkit-border-top-left-radius: 29px;
-moz-border-radius-topleft: 29px;
border-top-right-radius: 29px;
-webkit-border-top-right-radius: 29px;
-moz-border-radius-topright: 29px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 29px;
-webkit-border-bottom-left-radius: 29px;
-moz-border-radius-bottomleft: 29px;
border-bottom-right-radius: 29px;
-webkit-border-bottom-right-radius: 29px;
-moz-border-radius-bottomright: 29px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
<ul id="menu-bar">
<li class="active">POTRUS MAXIMUS</li>
<li>CODEX & DATASLATES</li>
<li>LISTAS
<ul>
<li>1850 Puntos</li>
<li>1500 Puntos</li>
<li>Por raza</li>
</ul>
</li>
<li>BIBLIOTECA
<ul>
<li>Horus Heresy</li>
<li>Warhammer 40K</li>
<li>Warhammer Fantasy</li>
<li>Fantasia Épica</li>
<li>Ciencia Ficción</li>
<li>Otros</li>
</ul>
</li>
<li>REVISTAS
<ul>
<li>White Dwarf Weekly
<ul>
<li>ISSUES 1-42
<li>ISSUES 43-84
</li></li></ul>
</li>
<li>Otras</li>
</ul>
</li>
<li>TUTORIALES</li>
</ul>
i can fix the sub menu design if you want to, but in the general idea, this it what you'r looking for?
#menu-bar ul ul
{
top: 0;
left: 100%;
}
#menu-bar li:hover > ul
{
display: block;
}
live example: http://jsfiddle.net/r9Lxodvb/2/
So if you want to see my menu go here.
Since I know you'll want my source, here's the HTML:
<div id='menu-container'>
<ul id='menu' class="menu">
<li class='active'><a href='/'><span>Home</span></a></li>
<li class='has-sub'><a href='/games/'><span>Games</span></a>
<ul>
<li><a href='/games/dota-2/'><span>Dota 2</span></a></li>
<li><a href='/games/cs-go/'><span>CS: GO</span></a></li>
<li><a href='/games/css/'><span>CS: Source</span></a></li>
<li><a href='/games/terraria/'><span>Terraria</span></a></li>
<li class='last'><a href='/games/minecraft/'><span>Minecraft</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='/about.html'><span>About Us</span></a>
<ul>
<li><a href='http://www.youtube.com/user/'><span>Our YouTube Channel</span></a></li>
<li><a href='/faq-list.html'><span>Our FAQs/Q&A List</span></a></li>
<li><a href='/feed-news.rss'><span>Our RSS Feed</span></a></li>
<li><a href='/wiki/'><span>Our Wiki</span></a></li>
<li><a href='/wiki/'><span>Our Blog</span></a></li>
<li class='last'><a href='/privacy.html'><span>Privacy Policy</span></a></li>
</ul>
</li>
<li class='has-sub last'><a href='/contact.html'><span>Contact Us</span></a>
<ul>
<li class='last'><a href='/forums/'><span>Forums</span></a></li>
</ul>
</li>
</ul>
And here's my CSS:
* {
margin: 0px;
}
#menu-container ul,
#menu-container li,
#menu-container span,
#menu-container a {
margin: 0;
padding: 0;
position: relative;
}
#menu-container {
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 {
float: left;
}
#menu-container > ul > li {
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;
}
It's much, but if I don't give it you'll report me so how to align the menu to the center of my page (since I didn't code this, it was my friend)? And I also want the menu only, without the empty grey space. Is it possible?
Here is a fiddle that shows you how to align your menu to the center of the screen. You can search for my changes in the css by searching for "EDITED". I marked all 3 changes that way.
Here is what I did.
1.Remove the rule that makes the whole menu float left :
#menu-container > ul {
float: left;
}
2.Specify on his parent element that you want it in the center of the page :
#menu-container {text-align:center;}
3.Then for each menu element, change the following rule :
#menu-container > ul > li {
float: left;
}
to
#menu-container > ul > li {
display: inline-block;
}
As for your last question (I also want the menu only, without the empty grey space), I don't understand what you mean. You want to remove the grey color from the menu bar?
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.