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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trying to have css styles indepedent from its parent

    for example:


    <div id="one">


    <div id="two">
    </div>



    </div>

    I want it so that the container one's position will not affect container two...

  • #2
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Maybe something like this might work out:

    Code:
    <div id="one" style="position: inherit; top:0px; left:0px;">
    Div 1
    
    <div id="two" style="position: absolute; top:20px; left: 0px;">
    Div  2
    </div>
    
    </div>
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    If you're trying to override a style that's been inherited you can use something like this:

    #two{font-size: 18px !important;}

  • #4
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why not succumb to change and position your inner-div according to the outer-div?

    I mean, you can only want it relative, or absolute really. So why not apply a margin or position accordingly?

    HTML:
    Code:
    <div id="one">
      <div id="two">Two</div>
    </div>
    CSS:
    Code:
    #one { position:absolute; }
    #two { position:relative; margin-left:-30px; }
    OR... CSS:
    Code:
    #one { position:relative; }
    #two { position:absolute; right:40px; }
    If you'd explain what you're trying to accomplish, we might better serve you.

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok.

    Basically I have my school's cms with templates I have no control over. It's a basic webpage with a centered main section.

    I'm trying to do a javascript overlay by showing and hiding css, however it doesn't properly center in the template. In ie7 i believe my overlay box is even contained only within the main content area of the template. So really buggy.

    It's obvious that the template is affecting my css, but I don't know what is affecting it or what is conflicting.

    In this situation what would you do if you had to get around the main template's css? I tried !important on my css but it doesn't do anything.


  •  

    Posting Permissions

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