Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder logictrap's Avatar
    Join Date
    Apr 2008
    Posts
    155
    Thanks
    11
    Thanked 3 Times in 3 Posts

    Seeking CSS Unconfoundedness

    I'm confounded why the css code below does not do what I expect. I have and outer div that specifies link attributes and an inner div with different link attributes. What is confounding me is that the inner div retains the link attributes of the outer div.

    Can someone unconfound this suffering mind?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #outer {
        width: 200px;
        color: #FF6600;
    }
    #outer a {
        color: #000000;
        text-decoration: underline;
    }
    #outer a:hover {
        color: #FF0000;
    }
    .inner {
        color: #0000CC;
    }
    .inner a {
        color: #00CC00;
    }
    .inner a:hover {
        color: #FFFF00;
    }
    -->
    </style>
    </head>
    
    <body>
    
    <div id="outer">
      Outer text: <a href="#">LINK</a>
      <div class="inner">Inner text: <a href="#">LINK</a></div>
    </div>
    </body>
    </html>

    Which came first - the chicken or the egg? The egg... [ticket closed]
    If a tree falls... does it make a sound? Yes.............. [ticket closed]

  • #2
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    If you change the inner to an ID (#), it does what you want. It looks like an "id" is more specific than a class.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #3
    Regular Coder logictrap's Avatar
    Join Date
    Apr 2008
    Posts
    155
    Thanks
    11
    Thanked 3 Times in 3 Posts
    Thanks.

    I need to use the inner div multiple times within the outer div - shouldn't a class be specified when multiple instances are used? and if so what this correct way to code this?

    Which came first - the chicken or the egg? The egg... [ticket closed]
    If a tree falls... does it make a sound? Yes.............. [ticket closed]

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Try this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #outer {
        width: 200px;
        color: #FF6600;
    }
    .outerLink {
        color: #000000;
        text-decoration: underline;
    }
    .outerLink:hover {
        color: #FF0000;
    }
    .inner {
        color: #0000CC;
    }
    .innerLink {
        color: #00CC00;
    }
    .innerLink:hover {
        color: #FFFF00;
    }
    -->
    </style>
    </head>
    
    <body>
    
    <div id="outer">
      Outer text: <a class="outerLink" href="#">LINK</a>
      <div class="inner">Inner text: <a class="innerLink" href="#">LINK</a></div>
    </div>
    </body>
    </html>
    When in doubt, get more specific with the CSS...
    matt | design | blog

  • #5
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Do a search for what CSS actually means.

    Cascading Style Sheet.

    It's a little like one of those champagne glass pyramids where the waiter pours the champagne into the top glass, for it to overflow and fill the ones lower down... And so on.
    Now, if you imagine your code to run along the same rough principle, it might look a little like this (Afraid I'm no good at ascii drawing):

    <div id="outer"> It has attributes
    |
    |--
    <div id="inner"> Which can cascade into elements here </div>--
    |
    </div>

    So what you pour into the top div (in the way of attributes) will pour (or cascade) into the one inside. So a style you set for the outer div, can cascade, down through the system, until it's shut off, by it's closing /tag. Text-alignment is a very good example of this. Follow the blue lines and you'll see what I mean. In other words, think of your code as being like a flowchart. That's why you need to be very specific about your #ID and .CLASS naming strategy, so you can use it to control the flow of the cascade and to "shut things off" at will, whilst directing the flow of instructions to precisely where you want them.

    I believe its proper term is "inheritance". Child elements can inherit certain values, from their outer containers (or parent elements).

    Have no idea if this is helpful or not, but I hope it goes some way towards "unconfounding" you a little. Ah, don't tell me... I've just made it worse, haven't I...?

    Regards,
    Last edited by Doctor_Varney; 11-21-2008 at 10:56 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #6
    Regular Coder logictrap's Avatar
    Join Date
    Apr 2008
    Posts
    155
    Thanks
    11
    Thanked 3 Times in 3 Posts
    That makes sense except shouldn't the closest class attributes (inner) take precedence over the further (outer) attributes? this seems to be true for the text color but not the link.

    Which came first - the chicken or the egg? The egg... [ticket closed]
    If a tree falls... does it make a sound? Yes.............. [ticket closed]

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    id selector has got higher precedence than a class selector. So your
    Code:
    .inner a:hover {
    color:#FFFF00;
    }
    is overridden by
    Code:
    #outer a:hover {
    color:#FF0000;
    }
    To correct it, you have to apply a more specific rule like
    Code:
    #outer .inner a:hover
    See the CSS specificity rules.

    PS: No need comment your CSS by <!-- -->
    Last edited by abduraooft; 11-22-2008 at 08:13 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Doctor_Varney (11-22-2008)

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by logictrap View Post
    That makes sense except shouldn't the closest class attributes (inner) take precedence over the further (outer) attributes? this seems to be true for the text color but not the link.
    Well, I think a point worth mentioning is that I myself have not experimented with changing link colours in DIVs. Like most people, I tend to set links on a consistent, site-wide basis, as this is what the average user expects to see.

    Of course, telling you how to design would be pushing the mark on what you expect from us here, so I won't. It's just my reason, why I haven't played around with link colours, from DIV to DIV.

    I have to admit, that looking more closely at what you've written there, it would seem logical to expect the inner and outer DIVs to take on the seperate instructions.

    For this reason, I'd go with what Jerry says: change those classes for #IDs. I use custom classes for smaller elements and often I'll use them to add secondary instructions to DIVs which already have IDs.
    ( <div id="pendulum" class="swingleft"> ), for instance.

    Now, if you look at what Matt's written for you, you'll see he's styled up your main container #DIV and then made custom classes for the links. This seems right to me, but I've actually tried it and it wasn't working for me. The reason? Well, I tried it at the foot of an existing page, whose link colour attribute was set to white, which supports what I was saying earlier. It would appear that with links, especially, the main rules of the page are taking precedence (cascading down). I removed the global white link rule and Matt's link-color instructions took over. This was not the case with the text, though. I had direct control over that.

    Make of this what you will.

    Regards,


    PS
    You know what? It would really be more helpful to us (and in turn to you) if you could submit an image of your intended design. Dealing with snippets of code is one thing, but getting a broad overview of what you want your page to actually do, will assist people in helping you achieve it. For all we know, DIVs inside DIVs might not even be necessary, to get you exactly what you want.
    Last edited by Doctor_Varney; 11-22-2008 at 08:44 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #9
    Regular Coder logictrap's Avatar
    Join Date
    Apr 2008
    Posts
    155
    Thanks
    11
    Thanked 3 Times in 3 Posts
    See the attached file for a layout. Let me know how you would code this type of layout - specifically how to handle the sections in the right column which may repeat but not always be identical.

    For coding I would use:

    id's for each of the no-repeating areas: header, menu, left, center, right, footer

    Classes for the repeating sections in the right col.

    Is there a more semantic way to code this?
    Attached Thumbnails Attached Thumbnails Seeking CSS Unconfoundedness-website-template.jpg  
    Last edited by logictrap; 11-22-2008 at 05:16 PM. Reason: add more info

    Which came first - the chicken or the egg? The egg... [ticket closed]
    If a tree falls... does it make a sound? Yes.............. [ticket closed]

  • #10
    Regular Coder logictrap's Avatar
    Join Date
    Apr 2008
    Posts
    155
    Thanks
    11
    Thanked 3 Times in 3 Posts
    Perfect - that's what I was looking for. I kept searching for css order of precedence and couldn't find this.

    Thanks

    Quote Originally Posted by abduraooft View Post
    id selector has got higher precedence than a class selector. So your
    Code:
    .inner a:hover {
    color:#FFFF00;
    }
    is overridden by
    Code:
    #outer a:hover {
    color:#FF0000;
    }
    To correct it, you have to apply a more specific rule like
    Code:
    #outer .inner a:hover
    See the CSS specificity rules.

    PS: No need comment your CSS by <!-- -->

    Which came first - the chicken or the egg? The egg... [ticket closed]
    If a tree falls... does it make a sound? Yes.............. [ticket closed]

  • #11
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Abdura as always, hits the nail straight on the head.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #12
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by logictrap View Post
    See the attached file for a layout. Let me know how you would code this type of layout - specifically how to handle the sections in the right column which may repeat but not always be identical.

    For coding I would use:

    id's for each of the no-repeating areas: header, menu, left, center, right, footer

    Classes for the repeating sections in the right col.

    Is there a more semantic way to code this?
    A more semantic way? Don't think so. Sounds alright to me... Though what I tend to do, is:
    #IDs for all structural stuff (layout) and .classes for more minor changes to elements which occur inside the #IDed areas. That's what I do, simply because I find it's a safe rule.

    So, personally, I'd code up all my boxes as #IDs and use .classes in the manner Abduraooft suggests.

    Last edited by Doctor_Varney; 11-23-2008 at 10:18 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #13
    Regular Coder logictrap's Avatar
    Join Date
    Apr 2008
    Posts
    155
    Thanks
    11
    Thanked 3 Times in 3 Posts
    Thanks - I have been coding id's the way adura described but did not understand why it worked.

    It's still confusing why the class attributes seem to work for everything except the link attributes unless the class definition is combined with the outer id.

    Which came first - the chicken or the egg? The egg... [ticket closed]
    If a tree falls... does it make a sound? Yes.............. [ticket closed]

  • #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    There is clear mathematical rule behind this. have you read that link in my previous post?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #15
    Regular Coder logictrap's Avatar
    Join Date
    Apr 2008
    Posts
    155
    Thanks
    11
    Thanked 3 Times in 3 Posts
    Thanks, yes - I understand the math.

    I was referring to the concept that it seems more logical that the inner attributes would take precedence over outer attributes.

    Btw: I also tries using !important for the inner links and it appears to work in FF3, IE6, IE7. Not having used this much I don't know what problems it might create down the road. How does this affect the math?

    Which came first - the chicken or the egg? The egg... [ticket closed]
    If a tree falls... does it make a sound? Yes.............. [ticket closed]


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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