2 replies [Last post]
charlesmudy
charlesmudy's picture
Offline
newbie
Prague, Czech Republic
Last seen: 8 years 50 weeks ago
Prague, Czech Republic
Timezone: GMT+2
Joined: 2011-08-28
Posts: 1
Points: 2

Hi,

I need help with my menu page, sorry still making the design on my localhost so I dont have a link.

The problem I have is the page I selected doesn't show the background as current page.

/*HTML code*/

/*CSS code*/
#menu {
margin-top: -80px;
float: left;
right: 310px;
position: absolute;
background: rgba(18, 10, 22, 0.3);
background: transparent 20;
list-style: none;
width:353;
}

#menu ul{ margin: 0; padding: 0; float: left; }

#menu ul li{display: inline;}

#menu ul li a{
float: left;
text-decoration: none;
color: #F0F0F0;
padding: 10px 21px;
}

#menu ul li a:hover, .menu ul li .current{
color: #fff;
background: rgba(25, 10, 22, 0.5);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.10s ease;
}

Can someone please tell me what the problem is.

AttachmentSize
Screen shot 2011-08-28 at 1.53.47 PM.png611.11 KB
Loxagon
Loxagon's picture
Offline
Regular
Last seen: 8 years 49 weeks ago
Timezone: GMT+2
Joined: 2011-08-26
Posts: 12
Points: 17

i am not sure:background:

i am not sure:

background: rgba(18, 10, 22, 0.3);
background: transparent 20;

this one does not work when i test it.. seems to be the culprit...

does this work?

background: rgba(18, 10, 22, 0.3);
opacity: 0.2;

have a look here:
google "background: transparent"
-> http://www.w3schools.com/css/css_image_transparency.asp

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 4 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

charlesmudy wrote:Hi,I need

charlesmudy wrote:

Hi,

I need help with my menu page, sorry still making the design on my localhost so I dont have a link.

The problem I have is the page I selected doesn't show the background as current page.

/*HTML code*/

<!--menu-->
<div id="menu">
<ul>
<li class="current"><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="lifestyle.html">Lifestyle</a></li>
<li><a href="contact.html">Contact</a></li>
</li>
</ul>
</div><!--menu close-->
 
 
/*CSS code*/
#menu {
margin-top: -80px;
float: left;
right: 310px;
position: absolute;
background: rgba(18, 10, 22, 0.3);
background: transparent	20;
list-style: none;
width:353;
}
 
#menu ul{ margin: 0; padding: 0; float: left; }
 
#menu ul li{display: inline;}
 
#menu ul li a{
    float: left; 
    text-decoration: none;
    color: #F0F0F0;
    padding: 10px 21px;
    }
 
#menu ul li a:hover, .menu ul li .current{
    color: #fff;
    background: rgba(25, 10, 22, 0.5);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.10s ease;
    }

Can someone please tell me what the problem is.

Your list item has a class of current, not its child.

#menu ul li a:hover, .menu ul li.current a {
    color: #fff;
    background: rgba(25, 10, 22, 0.5);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.10s ease;
    }

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph