Login

Craveman · March 14, 2010 at 4:49 pm

Hey guys

I've been slowly trying to teach myself how to create a website (don't worry it's not another atheist website I promise Wink

). I've done most of the html and css but I'm a little stuck at the moment with a opacity problem. I know I'm probably trying to reinvent the wheel and making a lot of extra work but it is fun learning.

So for those of you who's keen and up for a challange here it is:

My menu list is going to be a picture which I want to be faded (say opacity at 40%) and with hover I would like to opacity to be 100%. "Active" and "visited" is going to be the same picture (both with opacity at 100%) but just with different colour background once activated.

The big thing at the moment is also that the text on the picture is also faded with the picture. How can I have it so that the picture is faded but the text is bold at all times?

Hope some of you can help out. Thanks Smile

**Tiberius** · March 14, 2010 at 5:22 pm

It might help if the HTML was valid. Currently you don't have a body tag, nor do you close the html tag, and I have no idea what these are for:

<!menu/>
<!main/>
<!background/>

I'll see what I can do though.

Update

Well one way of doing it would be to use divs instead of lists to display the menu, and then setting the div and div:hover css to the opacity settings, whilst having the a:link and a:hover settings maintain an opacity of 1. Just quick thought, but it should work. The problem with using lists is that the link seems to cover the entire list entry, meaning you can have it either transparent or opaque, but not both for different elements.

Craveman · March 15, 2010 at 5:49 pm

(March 14, 2010 at 5:22 pm)Tiberius Wrote: It might help if the HTML was valid. Currently you don't have a body tag, nor do you close the html tag, and I have no idea what these are for:

<!menu/>
<!main/>
<!background/>

I'll see what I can do though.

Update

Well one way of doing it would be to use divs instead of lists to display the menu, and then setting the div and div:hover css to the opacity settings, whilst having the a:link and a:hover settings maintain an opacity of 1. Just quick thought, but it should work. The problem with using lists is that the link seems to cover the entire list entry, meaning you can have it either transparent or opaque, but not both for different elements.

Hey Adrian

Thanks for coming back to me. Have you opened the text with IE or Firefox? The <!menu/>,
<!main/> and <background/> are just hidden bits of info to indicate my closing div's (It should really be without the forward slash at the back, for html).

I've never thought of having div's as a list but would it work though? It's easy enough creating them and spacing them inside another div with absolute positioning but how would one program a seperate div to inherit the hover and visited function? Doesn't those functions only relate to a list or can one program any div with css to take on the hover and visited functions? Think

All this crazy talk is making my head hurts 0.o

**Tiberius** · March 15, 2010 at 5:59 pm

But they aren't hidden...

Comment tags...which they vaguely resemble are these:



I'm not sure what you mean about hover and visited. Visited is a special function only for links. Hover can be applied to anything.

Craveman · March 16, 2010 at 6:01 pm

(March 15, 2010 at 5:59 pm)Tiberius Wrote: But they aren't hidden...

Comment tags...which they vaguely resemble are these:



I'm not sure what you mean about hover and visited. Visited is a special function only for links. Hover can be applied to anything.

Mmm, I havn't added the hyphens in  but rather used it like <!comment> and it still worked on my page. It's not the right way though so thanks for pointing it out.

The effect that I would like to create is to have my menu faded (opacity say 40%) and then when you hover the mouse over the picture it becomes clear (opacity 100%). Each "block"/link contains a picture background with the text (i.e. "about", "home", etc.) on top of the picture. I would like the text to be bold at all times even though the picture changes in opacity when the mouse hovers over it. The text changes colour once you've visited the link or once it is active. I think you've nailed it with your suggestion to rather have the menu as seperate divs and then to program it with css.

The problem now comes in that the text inherits the opacity and also becomes faded so I think it might be an idea to create 2 sets of divs sitting on top of each other and using x-positioning. That way the text will be bold at all times and only change colour once you've "visited" the link or once you've clicked on it and it is "active". That is what I meant with link, visited, hover and active and not sure if all 4 will work with divs and css (link, hover, visited, active)
a:link {color:green} /* unvisited link */
a:visited {color:blue} /* visited link */
a:hover {color:yellow} /* mouse over link */
a:active {color:red} /* selected link */

I'll have a play around with the divs and see what I can come up with. Thanks dude

Login
Username:
Password:	Lost Password?
	Remember me