Re: [css-d] CSS Horisontal Navigation Stopped Working
I've now changed it over to div's and while part of the css is working
OK, the navigation drop downs and hovers quit working.
Hi - I'm slowly working my way though this css navigation and with Marc's
help, the drop downs are now showing up fine, but I still can't seem to get
the hover color change to work, even though it was working fine in the old
table-based page.
The menu I'm using was found here:
http://www.cssnewbie.com/easy-css-dropdown-menus/
I think it's line #165 that controls the hover color:
#navbar li li a:hover { background-color: #f0e281; }
Maybe it's not the best choice? I'm really not sure, but it seemed very
straight forward.
Is the hover color being suppressed or overwritten by another part of the
style sheet? Or do I need to add an addtional line for more information so
that it will work?
My html code all validates and the css validates except for the @font-face
that the client wanted. Could this be the problem?
The files are:
http://www.issw.com/hallmark/index_new.htm
http://www.issw.com/hallmark/designer_bio.htm
http://www.issw.com/hallmark/css/style.css
Any help is greatly appreciated,
Stephanie
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Horisontal Navigation Stopped Working
On 3/04/2011 8:00 AM, Stephanie Robinson wrote:
I've now changed it over to div's and while part of the css is working
OK, the navigation drop downs and hovers quit working.
Hi - I'm slowly working my way though this css navigation and with Marc's
help, the drop downs are now showing up fine, but I still can't seem to get
the hover color change to work, even though it was working fine in the old
table-based page.
The menu I'm using was found here:
http://www.cssnewbie.com/easy-css-dropdown-menus/
I think it's line #165 that controls the hover color:
#navbar li li a:hover { background-color: #f0e281; }
Maybe it's not the best choice? I'm really not sure, but it seemed very
straight forward.
Is the hover color being suppressed or overwritten by another part of the
style sheet? Or do I need to add an addtional line for more information so
that it will work?
My html code all validates and the css validates except for the @font-face
that the client wanted. Could this be the problem?
The files are:
http://www.issw.com/hallmark/index_new.htm
http://www.issw.com/hallmark/designer_bio.htm
http://www.issw.com/hallmark/css/style.css
Any help is greatly appreciated,
Stephanie
Hello,
Delete this CSS.
#top_navigation {
width: 985px;
height: 30px;
background-color: #cadbe5;
padding-top: 10px;
}
Delete all instances of '#top_navigation' in the below CSS so the
specificity is correct.
/* These styles create the dropdown menus. */
#top_navigation #navbar {
width: 985px; /* WAS = 950 */
margin: 0;
padding: 0;
height: 1em;
}
#top_navigation #navbar li {
list-style: none;
float: left;
font-size: 11pt; /* main nav */
letter-spacing: 2px;}
#top_navigation #navbar li a {
display: block;
padding: 3px 8px;
background-color: #cadbe5;
color: #333;
text-decoration: none; }
/* subnavigation */
#top_navigation #navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #cadbe5;
z-index: ;}
/* hover styling */
#top_navigation #navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#top_navigation #navbar li:hover li, #navbar li.hover li { float: none; }
#top_navigation #navbar li:hover li a, #navbar li.hover li a {
background-color: #cadbe5; /* subnav */
border-bottom: 1px solid #fff;
text-align: left;
font-size: 9pt; /* subnav */
color: #333; }
#navbar li li a:hover { background-color: #f0e281; }
#navbar li li {
width: 225px;
letter-spacing: 0px;}
/* end dropdown menus. */
Now make these changes for '#navbar'.
#navbar {
width: 985px; /* WAS = 950 */
margin: 0;
padding: 0;
padding:10px 0; /* ADD, create space above and below floated 'li' */
overflow:hidden; /* ADD, contains floated 'li' */
height:1%; /* ADD, contains floated 'li' in IE6- */
background-color: #cadbe5; /* ADD, give bgColor to 'ul' */
/* height: 1em; DELETE */
}
This now leave you with this element that is not needed.
div id=top_navigation/div !-- ===END #TOP_NAVIGATION === --
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Horisontal Navigation Stopped Working
Thank you HallMarc! That definitely did the trick. Now it's time to learn more about z-index... I really appreciate the help, Stephanie PS - Sorry for the slow reply. I had a hard time figuring out how to reply since I get the digest. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Horisontal Navigation Stopped Working
On 24/03/11 20:28, Stephanie Robinson wrote: I've now changed it over to div's and while part of the css is working OK, the navigation drop downs and hovers quit working. My brain is mush looking at so few lines of code and not seeing what's wrong. http://www.issw.com/hallmark/index_new.htm Hi Stephanie, Using Firefox on Linux, your navigation drop-downs work fine - but only with javascript disabled for your site. If I enable javascript, the drop-downs vanish. I don't know if this helps at all, and I don't have time to look into it further just now. Hopefully someone else will be able to assist you. Best wishes, Lesley __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Horisontal Navigation Stopped Working
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Lesley Lutomski
Sent: Friday, March 25, 2011 8:31 AM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] CSS Horisontal Navigation Stopped Working
On 24/03/11 20:28, Stephanie Robinson wrote:
I've now changed it over to div's and while part of the css is working
OK, the navigation drop downs and hovers quit working. My brain is
mush looking at so few lines of code and not seeing what's wrong.
http://www.issw.com/hallmark/index_new.htm
Hi Stephanie,
Using Firefox on Linux, your navigation drop-downs work fine - but only with
javascript disabled for your site. If I enable javascript, the drop-downs
vanish.
I don't know if this helps at all, and I don't have time to look into it
further just now. Hopefully someone else will be able to assist you.
Best wishes,
Lesley
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
It seems your slideshow is layered above your drop downs so you can't see
them.
if you add z-index to this declaration
starts at line 105 in your stylesheet
#top_navigation #navbar li ul {
display: none;
width: 10em;
background-color: #CADBE5;
z-index: ; ADD THIS
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
