[SOLVED] Underline upon hover
I would like to know how to style the Atahualpa page menu bar so that it functions exactly like the one on this Atahualpa site:
http://www.martinewicki.ch/ How do I do implement that bold + underline? Can this be done with a simple CSS insert? Thank you. |
This can be done with a CSS Insert, no PHP etc. needed
|
Does anyone know how such a CSS insert would be coded? Thank you.
|
Put this in CSS inserts:
Code:
.div#menu1 ul.rMenu li a:link, div#menu1 ul.rMenu li a:hover, div#menu1 ul.rMenu li a:active { |
What this does is
border-bottom:4px solid #307722; <- set the bottom border 4px thick, solid and orange border-left:1px solid #BFBBB9; <- set left border 1px, solid and same as backgrounnd color border-right:1px solid #BFBBB9; <- set right border 1px, solid and same as backgrounnd color In effect, it makes the left and right borders invisable since they are the same as the background and the bottom orange so it shows up. |
I somehow removed the bit that would show the underline before any action. I didn't want it to show a: visited. I'm not sure what the x-system font is, but I do know I need to study CSS more. I guess there are continually new kinds of CSS coming down the pike.
|
I would think that since you specific "border-bottom" the "border-left" and "border-right" markers would be unnecessary, wouldn't they?
If i wanted the menu option to be marked with an underline when it is selected, what would I need to change in the insert? Thank you for figuring this out. |
When you are adding a CSS insert, remember the way CSS works. The last rule applies. In this case, since all three borders were assigned in a previous selector, if you only specify border-bottom, then the other two will still have their previous values. And since we are assigning two different colors, you can't use shorthand to override them all.
|
Thanks for everyone's input in this thread.
I have the menu working here: http://tiny.cc/safeatahualpa Yet when you hover over the menu, the entire page moves down as the underline appears. How can I change the CSS insert so the page does not move? I am guessing that you need to have the 4px bottom-border already defined, yet I have tried a variety of changes to the CSS insert and nothing seems to work. |
try this
HTML Code:
#rmenu2 { height:30px;} |
Thanks juggledad!
|
All times are GMT -6. The time now is 09:26 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.