PNG Transparency Issue

HTML & CSS
1

So i have a DIV with a alpha transparent PNG file as a background, then inside the DIV i have another div with a unordered list in it, it reduces the transparency… any way to fix this?

http://viga-design.com/index2.php

You can see how the menu is whiter than the rest of the menu bar. Why does this happen?

2

The reason it’s lighter is because the menu is acting as a base color for the menu items so when the images hit one another the top most image will take the light from below it causing it to become brighter. What you will need to do is create another image with a lower transparency level that way when the light below hits it the color will stay the same.

3

I’m just wondering: Is there a reason why you use a PNG, rather than simply using CSS’ opacity?

4

PNG is simple, does not make my text transparent. So i need a transparent PNG for the unsorted list background with lower op?

5

Yep that’s right, an easy way to get it done first try would be to open your image editor and sit the 2 layers one on top of the other until they are perfect, once you have them right save out the menu item background and it will look fine.

6

It is not letting me set a background or a background image for the .menu ul

/*NAVIGATION*/
.menu, a:visited, a:hover, a:link, a:active {
	height: 40px;
	width:auto;
    background: url('/images/menu_bg.png'); 
	font-family: Century Gothic, sans-serif;
	font-variant:small-caps;
}

.menu_center {
	margin: 0 auto;
}

.menu ul{
    margin: 0; padding: 0;

	
	}
 
.menu ul li{
    display: inline;
	line-height:40px;
	}
 
.menu ul li a{
    float: left; text-decoration: none;
    color: #fff;
    padding: 0px 50px;
	}
 
.menu ul li a:visited{
    color: #fff;
	}
 
.menu ul li a:hover, .menu ul li .current{
    color: #fff;
	background-color:#ff0000;
	}
/*################################*/
7

Simply do this, then. It will give you the desired effect in all modern browsers, and older browsers will default to white-on-black:

.menu {
 color: #fff;
}

.menu ul {
 background-color: rgba(255, 255, 255, 0.5);
}

.menu ul li a {
 color: rgba(255, 255, 255, 1);
}
8

didn’t do it for me either ;/

9

Hi,

The menu logic defeats me a little as you have “events” wrapping to a new line and looking almost as though its a sub menu of “Home”.

If that is how you want it to look then don’t apply any background to the a elements at all except for that very last one.

e.g.


.menu {
	height: 40px;
	width:auto;
	/* background: url('http://viga-design.com/images/menu_bg.png'); */
	background-color: rgba(255, 255, 255, 0.5);
	font-family: Century Gothic, sans-serif;
	font-variant:small-caps;
	color: #fff;
}
.menu .events a{	background-color: rgba(255, 255, 255, 0.5);}




	<ul>
								<li><a href="/">home</a></li>
								<li><a href="about_us">dealers</a></li>
								<li><a href="our_products">products</a></li>
								<li><a href="contact_us">contact us</a></li>
								<li><a href="advertise">media</a></li>
								<li[B] class="events"[/B]><a href="sitemap">events</a></li>
						</ul>

Also note that when you use a comma separated list you mus use the full path for each item as they are simply a list of comma separated rules.


.menu, a:visited, a:hover, a:link, a:active {

I’m assuming it should have been:


.menu,.menu a:visited,.menu a:hover,.menu a:link,.menu a:active {