Howdy!
I'm trying to duplicate the menu bar from here:
www.hplfilmfestival.com/
(the green bar with the white letters)
I can get a region of green and I can tell the text to change the text color and the text background color using CSS, but the issue I CAN'T quite solve is how to make those color changes extend BIGGER than the text.
So, as you can see in the example, because he programmed these originally with GIFs, the brown hover color goes to the top and bottom of the green DIV. I'm redoing this with text (so we have more flexibility on the menus) and I can make the green DIV as tall or as flat as I like. But when I hover over the white text, the only thing that changes is the background of the text. I'd like the change to cover the whole section of the DIV -- top to bottom.
Would that be a matter of applying the class to the anchor instead of the text IN the anchor?
Advice?
I'm trying to duplicate the menu bar from here:
www.hplfilmfestival.com/
(the green bar with the white letters)
I can get a region of green and I can tell the text to change the text color and the text background color using CSS, but the issue I CAN'T quite solve is how to make those color changes extend BIGGER than the text.
So, as you can see in the example, because he programmed these originally with GIFs, the brown hover color goes to the top and bottom of the green DIV. I'm redoing this with text (so we have more flexibility on the menus) and I can make the green DIV as tall or as flat as I like. But when I hover over the white text, the only thing that changes is the background of the text. I'd like the change to cover the whole section of the DIV -- top to bottom.
Would that be a matter of applying the class to the anchor instead of the text IN the anchor?
Advice?
posted by:
|
-
Re: changing color in a region
Fri, August 10, 2007 - 4:17 AMyes you need to apply it to thae anchor. additionally youlll want to dd some padding to the anchor so that the bgcolor istn just to the edge of the text, but also takes a up a few pixels around the text.
-
Re: changing color in a region
Fri, August 10, 2007 - 8:45 AMAs an alternate to Pixel's advice, you will notice that that site has each of the links in a LI container. If you apply the background and color style to the LI, the space around the element may be more naturally handled.
Just a thought.
--Russ -
-
Re: changing color in a region
Fri, August 10, 2007 - 1:23 PMYou guys kick ass. When I have it recoded, I'll post the link. Thank you!
(I THOUGHT it was gonna be an anchor issue, but I hadn't considered the LI aspect.) -
-
Re: changing color in a region
Fri, August 10, 2007 - 2:25 PMif you use the li and you want them side by side youll need to use float: left; on the li elements as well. -
-
Re: changing color in a region
Sun, August 12, 2007 - 10:28 PMMy current version does NOT use the LI structure. This allows me to put the red dot between the links.
-
-
Re: changing color in a region
Mon, August 13, 2007 - 11:13 AMCool!
This is what I ended up using:
/* MAIN MENU STYLES */
div.MainMenu
{
background: #36421b;
color:#de0000;
font-family: helvetica, sans-serif;
font-size:10px;
padding: 6px;
width: 80%;
margin-right: auto;
margin-left: auto;
}
.MainMenu a:link {
color: #FFFFFF;
border-color: #003399;
border: 0px;
border:none;
padding: 6px;
background: #36421b;
text-decoration: none;
}
.MainMenu a:visited {color:#FFFFFF; background: #36421b; text-decoration: none; border: 0; padding: 6px;}
.MainMenu a:hover {color:#FFFFFF; background: #4f220b; text-decoration: none; border: 0; padding: px;}
.MainMenu a:active {color:#FFFFFF; background: #0d071b; text-decoration: none; border: 0;padding: 6px;}
/* end MAIN MENU STYLES */
Works great!
Thanks for the tips!
-
-
-
-
