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.
Results 1 to 6 of 6
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    css organization question

    Hey,

    if i have the following setup:
    Code:
    #intro {
    margin-left: 205px;
    margin-top: -25px
    }
    #mainLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 315px;
    width: 417px;
    padding: 20px;
    }
    ...
    <div id="intro">
    	<div id="mainLogo"><img src="images/happy.gif"></div>
    </div>
    is there any way to code the css according to the heirarchy in the html?

    say like
    Code:
    #intro {
    margin-left: 205px;
    margin-top: -25px
    }
    #intro #mainLogo {
    display: block;
    ...
    so that when someone is reading the CSS they know that #mainlogo is a child of #intro?... and would i even want to bother?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I wouldn't bother since you can only have one id per page. Now if this element was to change in styles constantly then you might put a class in a certain parent element or something but if its not going to change I say let it be since you can only have one id. It would be different if it was a class.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    good point ... but if it were a class, how would i do it?

    I inquired because, upon reflection, it seems that various coding errors i make are the result of changing a parent attribute that in turn affects the child but I end up forgetting about the hierarchy and losing hours trying to figure it out

    i figured if I took the extra 5 seconds to give myself a visual breakdown of what can affect what, i may save myself more time in the end(?)

    so yea, although i may not do it, how would it be done?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Just look at it this way. The more specific you get, the more of a chance you have of the new specific style to override the less specific style. So for example, you want all divs with class="square" to be red with a 1px border but you want one of the square divs that is the only one in your intro div to be blue instead of red.
    Code:
    <div id="container">
    <div class="square">blah</div>
    <div class="square">blah</div>
    <div class="square">blah</div>
    <div id="intro"><div class="square">blah</div></div>
    </div>
    Code:
    #container .square {
    background:red;
    border:1px solid #000;
    width:300px;
    height:300px;
    }
    #container #intro .square {
    background:blue;
    }
    The more specific one overrides the less specific one.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    this may sound stupid... but what exactly do you mean by specific

    perhaps its because its 1am, but that word is confusing me in the context of "more specific overriding less specific"
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Just look at the example. The more cascading you get the more overriding you have.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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