none
Navigation DIV is ignoring CSS RRS feed

  • Question

  • I have created a #Navigation DIV and entered the hyperlinks to the site pages.  In the CSS I have added the font type, size, style, color and set text docoration to none.  However, the DIV is ignoring the color and text docoration.  Also, I don't see a hover option in the CSS pane.  How do I get the DIV to honor the CSS and also include a hover?

    Friday, October 23, 2009 3:28 PM

All replies

  • Good question. Why don't you post a link to the page and maybe someone can help you.

    Jim
    Friday, October 23, 2009 3:35 PM
  • a:hover is what you are looking for and the only place to get to it in EW is using the New Styles dialog box dropdown or in code view when you start typing with Intellisense.
    MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes
    Friday, October 23, 2009 4:55 PM
  • Manny,

    The CSS Properties pane is a great way to find out why CSS isn't applied as you want.

    Jim Cheshire
    Jimco Software and Books
    http://www.jimcosoftware.com
    http://www.jimcobooks.com

    Author of:
    Microsoft Expression Web 3 In Depth
    Special Edition Using Microsoft Expression Web 2
    The Microsoft Expression Web Developer's Guide to ASP.NET 3.5
    Special Edition Using Microsoft Expression Web

    My Expression Web 3 blog on Network World:
    http://www.networkworld.com/community/blog/10560

    Friday, October 23, 2009 4:59 PM
  • Hmm, let's see, I think this is how it goes. You ask a question about appearance but don't post a link as requested in the BEFORE POSTING thread. Some of us spend from half a day to a week making guesses and general suggestions because we have no clue what your markup or CSS looks like. At this point you either just go away and don't return (about 10% of posters) or you post a link to the page and have an accurate, germane, often detailed answer within 15 minutes.

    Why not shortcut the process and just post the link?


    Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's).
    Friday, October 23, 2009 5:28 PM
  • It wouild not be <div #Navigation

    It would be <div ID="Navigation"

    If in fact #Navigation is in the style sheet.

    # represents an ID in the style shet but you use ID=""  in the div itself.




    Expression Web MVP
    Friday, October 23, 2009 5:47 PM
  • Alrighty then....

    • Edited by MannyL Friday, October 30, 2009 12:32 AM
    Friday, October 23, 2009 7:54 PM
  • Well, very quickly, you've closed your body element after about four lines, like so:


    <body style="background-color: #000000">

    <div id="Layout" style="position: relative; width: 700px; height: 745px; z-index: 1; background-color: #000000; margin-right: auto; margin-left: auto; left: 0px; top: 0px;">
    <div id="Logo" style="position: absolute; width: 234px; height: 71px; z-index: 1; left: 196px; top: 236px;">
    <img alt="" height="64" src="images/Sweet_226.png" width="226" /></div>
      </body>

    Now, me, if I'm a CSS page, I'd be getting confused starting about there. But wait! There's more. (always wanted to say that)

    Seriously, let me look some more...

    cheers,
    scott

    Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's).
    Friday, October 23, 2009 8:13 PM
  • OK, got it. At the bottom (or anywhere, really) of your embedded styles, add the following selector and you're in business: 

     div#Navigation a:link { 
     color: #CA3092; 

    [EDIT: BTW, don't know for sure, but I believe that your issue had to do with specificity. Unlike other elements, anchors have pseudo-classes predefined, each with a color attribute. Unless I'm mistaken, those pseudo-classes affect specificity just as do regular classes. So, an anchor element with pseudo-class :link has specificity of 11, trumping the inherited style1 class at 10. Like I said, not positive that's the issue here, but I believe so, and I know for a fact that providing a selector with specificity 112 trumped everything and got the job done. ;-)]

    cheers, 
    scott
    Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's).
    • Edited by paladyn Friday, October 23, 2009 8:54 PM
    • Proposed as answer by Cheryl D Wise Friday, October 23, 2009 8:54 PM
    Friday, October 23, 2009 8:17 PM
  • Ok, fixed that.  thanks
    Friday, October 23, 2009 8:46 PM
  • Ok, got the color but not the hover
    • Proposed as answer by Cheryl D Wise Friday, October 23, 2009 8:54 PM
    Friday, October 23, 2009 8:46 PM
  •  As I said earlier you have to use the pseudo class of :hover to get any change on hover. Given your mark-up that would be:

    div#Navigation a:hover{ 
     /* insert what you want to happen on hover here */

    MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes
    • Proposed as answer by Cheryl D Wise Friday, October 23, 2009 11:45 PM
    Friday, October 23, 2009 8:53 PM
  • hmmmmmmmmmm.... well something is whacked now.

    I just tried linking he NAV to the other pages and now get a combination of different things happening with the NAV hyperlinks and the CSS.

    I also tried to add the same CSS for the Footer Div and it works on some pages but not the index.htm page

    • Edited by MannyL Friday, October 30, 2009 12:31 AM
    Friday, October 23, 2009 10:19 PM
  • Do you have styles in the top of the new pages that are countermanding the CSS file? How about inline styling doing the same?
    Saturday, October 24, 2009 2:20 AM
  • Haven't a clue what that means.
    Saturday, October 24, 2009 5:32 AM
  • Saturday, October 24, 2009 2:41 PM
  • Haven't a clue what that means.

    Manny,

    You will continue to have all sorts of problems (in this case it is most likely due to inheritance) if you don't learn something about how CSS works. That is one of the biggest reasons there is a "BEFORE POSTING" sticky at the top of this forum. Web design IS NOT SOMETHING YOU CAN DO IF YOU DON'T LEARN THE BASICS.

    Yes, I shouted that and I did so because it is extremely important. You are dealing with a complex techonology - the web and browser interpetation of what you write. Sure people can spoon feed you one question at a time but as you discovered it is very easy to break something when you haven't a clue what you are doing. My best guess is that you are clicking on the format toolbar and that gives you problems as you move from one page to another an over write the consistent styles that should be applied using one stylesheet. Go to the BEFORE POSTING thread and spend some time 2-6 hours should do it going through the resources and learning instead of clicking randomly in an attempt to get what you want the page to look like.
    MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes
    Saturday, October 24, 2009 3:42 PM
  • Alrighty then.... Cheers!
    Saturday, October 24, 2009 3:50 PM