SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Can't override div styling

    Me again . . .

    On a site I'm developing there's a sidebar of links on the right. The first section is like this:
    HTML Code:
    <div id="rightColumn">
    <div class="inside">
    <div class="vnav">
    	<h3>About Us</h3>
    	<ul><li><a 
    		href="history.asp">History and Purpose</a></li><li><a 
    		href="members.asp">Members of the Group</a></li><li><a 
    		href="http://www.cbcofsmyrna.com/">Calvary Baptist Church</a></li></ul>
    </div>
    <div class="vnav">
    ...
    I'm using ASP to determine which section of the site someone is on and highlight the appropriate sidebar link. For example, if they're at history.asp, I want the first <li> to be a different color.

    Problem is, no matter how I apply the CSS, I can't seem to get it to override the CSS that's inherited:
    HTML Code:
    #rightColumn .vnav ul li a:hover, .vnav ul li a:hover
    {
    	background-color: #248;
    	color: #fff;
    }
    #rightColumn .vnav ul li a
    {
    	background-color: #bcd;
    	color: #336;
    }
    I've changed the id and class for the <li>, then written all sorts of CSS for that particular id or class, and every time I still get the colors listed above.

    What am I missing?

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How exactly is ASP determining what page you're on? I know it's possible to do this, but at the moment, I would be more inclined to think its a server-side problem rather than a client-side problem. I'm just not sure exactly how you're accomplishing this.

    Post some relevent ASP code. Its a strong might, but I might be able to decipher it. ASP.NET I could.
    Ryan Butler

    Midwest Web Design

  3. #3
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not the ASP code. All I did was stick in an if-then that would add the appropriate attribute to the <li>. I checked the source of the resulting page on a client and it was correct HTML.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It all depends how you've styled the existing list elements and which carries the most weight. If you've been more specific in targetting your lists then that will carry more weight.

    There isn't enough code there for me to work out whats going on. It doesn't look like you have anthing hooked in so you can style it differently anyway. Why don't you write a specific id into the link you want highlighted and target that instead.

    Paul

  5. #5
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, one of the ways I had it was like this:
    HTML Code:
    <li><a id="selected" href="history.asp">History and Purpose</a></li>
    I was doing the <li> and not the anchor because changing the anchor would leave whitespace around it that the <li> covers.

    Some of the CSS defintions I tried were:
    HTML Code:
    #selected ul li a { background-color: #000; }
    #selected { background-color: #000; }
    At one point I also tried using class="selected" instead and doing things like
    HTML Code:
    .selected ul li a { background-color: #000; }
    .selected { background-color: #000; }
    #rightColumn .selected { background-color: #000; }
    And so on. I think I tried a few other variations as well, but this should give the picture. I thought using an id and corresponding CSS definition would override the default <li> styling, but apparently not. (Also I tried placing the CSS definitions in various orders, like putting the above code before and after the default <li> styles.)

    fyi I'm using Firefox 1.0PR at the moment.

  6. #6
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by theharmonyguy
    It's not the ASP code.
    Sorry about that. The way I initially read that I thought ASP could be messing you up.
    Ryan Butler

    Midwest Web Design

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You are still confusing me lol

    You said this:
    OK, one of the ways I had it was like this:

    HTML Code:
    <li><a id="selected" href="history.asp">History and Purpose</a></li>

    and you were using this:
    Code:
    #selected ul li a { background-color: #000; }
    How can that possibly target the list? The anchor has an id of selected so it would have to be li a#selected.

    If you could supply the correct code I could probably solve it for you in a few seconds (if it can be solved).

    I need to see how you targetted it originally to see how to override it. If you've been specific originally then you have to be just as specific (or more specific) to override the existing style.

    Paul

  8. #8
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about that. The way I initially read that I thought ASP could be messing you up.
    np!
    You are still confusing me lol
    OOPS, that was my bad! I should have posted
    HTML Code:
    <li id="selected"><a href="history.asp">History and Purpose</a></li>
    My mistake - so sorry.

    btw, I also tried li#selected {} and adding !important to various iterations. So far no combination of an <li> attribute change and CSS has yielded a working solution.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm afraid I'm not going to be much help until I see all the code (you can pm me if you don't want it shown).

    It seems you are wanting to change the anchor by targetting the list element itself. That won't work to change any part of the anchor definition as that will be controlled by its original css.

    Barring mistakes (and typos) you just need to make sure that your overriding style is more specific than the original style for that element. ID's carry more weight than classes and full paths add weight to the style definition.

    It does look as though you've tried the usual options but without seeing the original tragets its hard to ay

    Paul

  10. #10
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can the site in action at http://www.cbcofsmyrna.com/newlifesingers/ - the menu on the right is the <ul> in question. Right now each item has a rollover effect. If you click one of the items, you get linked to another page. I want that resulting page to change the color of the item you clicked, in essence. The ASP would change the id for that one particular <li>.

    The XHTML for the pages is pretty straightforward, but if you use Jigsaw to look at the CSS it will probably be confusing. I started with the Ruthsarian layout, so everything is broken up into files like colors.css, fonts.css, etc. still. I put the main page and all the CSS and images into a zip, though, if that would help: http://www.cbcofsmyrna.com/newlifesingers/cssdemo.zip

    Thanks for your assistance on this! I looked around for a while to find an answer but just got stumped.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think I must be a little confused as the solution seems to be exactly as I said and appears to work straight away!

    Code:
    #leftColumn, #rightColumn, #contentColumn
    {
    color: #000;
    }
    #rightColumn .vnav ul li#selected a
    {
    color: #FFFF00;
    background-color: #000;
    } 
    #rightColumn .vnav ul li#selected a:hover
    {
    background-color: #000; 
    color: #fff;
    }
    .vnav h3
    {
    color: #fff;
    }
    #rightColumn .vnav ul li a:hover, .vnav ul li a:hover
    {
    background-color: #248;
    color: #fff;
    }
    #rightColumn .vnav ul li a
    {
    background-color: #bcd;
    color: #336;
    }
    I think I must be looking at the wrong thing.

    Paul

  12. #12
    SitePoint Enthusiast theharmonyguy's Avatar
    Join Date
    Aug 2004
    Location
    Georgia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, you got it right. I just needed to see the exact styling to target the li's correctly. Before I didn't have everything in there, like the #rightColumn .vnav ul preceding li#selected. You're right, it works perfect like you have it. I figured it would be easy, but I just didn't know the precise way of doing it.

    I've learned a lot of CSS working on this particular site (first one that's fully XHTML+CSS), but I'm still absorbing all the ins and outs. I've used ASP and HTML for quite a while, but tableless design is a newer field for me. Thanks for all the help!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •