Thread: nested divs

  1. #1
    woony's Avatar
    Registered
    03/12/03
    Location
    Oostende
    Posts
    2,599
    iTrader
    78 (100%)
    Mentioned
    0 Post(s)
    Reputation
    7/10

    nested divs

    ok,
    het geven van stijlen aan nested divs zorgt voor mij altijd voor problemen.
    Vaak kom ik tot redelik wat geneste divs, kan soms niet anders, door jquery stuff etc.
    dit terzijde.
    ik versta niet goed wanneer het wel en wanneer het niet werkt.
    bv

    ik heb nu dit: uiteraard afgesloten enzo. dit is maar om eens te tonen.

    HTML Code:
    <div id="slider" class="contentpanel">
         <div class="scroll">
    	<div class="scrollContainer">
    	      <div id="starter" class="panel">
                        <div class="productblocks"></div>
    <div class="productblocks"></div>
    <div class="productblocks"></div>
    <div class="productblocks"></div>
    als ik nu mijn productblocks in mijn css wil plooien.
    .productblocks{float:left; width:250px; etc...}
    komt dat er maar niet.. ook firebug geeft niets van deze classes.
    moet ik iets doen als #slider.scroll.scrollContainer.panel.productblocks {} ? lijkt mij ook zo spastisch. Iemand hier wat meer info over?
    no votes  

  2. #2
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    (mind the spaces!)

    als ge zegt :

    Code:
    #slider.scroll.scrollcontainer{
     props: props
    }
    dan gaat ge die scroll class enkel kunnen gebruiken op een element met id "slider". die scrollcontainer gaat ge enkel kunnen gebruiken op het betreffende emelent met id "#slider" als het element met id "slider" een class "scroll" heeft.

    Code:
    #slider.scroll .scrollcontainer{
     props: props
    }
    Scrollcontainer kunt ge hier dan weer maar enkel gebruiken op een element in de container van #slider.scroll ( dus een element met id "slider" dat ook de class "scroll" heeft )

    Wilt ge in de diepte gaan ( dus het nesten van elementen ) moet ge het gewoon scheiden door spaties

    Code:
    #slider .scroll .scrollcontainer{
     props: props
    }
    Hierbij zal ".scrollcontainer" enkel werken in een element class "scroll" dat in een element met id "slider" zit.

    voor uw voorbeeld zie ik dit wel werken :

    Code:
    #slider .scroll .scrollcontainer #starter .productblocks .productsblocks{
      props: props
    }
    Al is dat nesten allemaal niet nodig.. Da moet ge enkel doen als er bovenstaande elementen andere properties zouden hebben en ge die moet overschrijven. Unieke id's hebben ook voorrang op classes dacht ik

    Ik lees hier graag reacties en verbetering op, want heb er int verleden ook al veel last mee gehad.
    Ik probeer nu meestal gewoon zo specifiek mogelijk te zijn:

    bvb:
    Code:
    #container #mid ul{
        // apart stylen
    }
    &

    Code:
    #container #left ul{
        // apart stylen
    }
    Last edited by adrianhates; 19-02-2010 at 15:42.
    no votes  

  3. #3
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    Niet echt 100% relevant, maar vergeet niet dat ge door middel van JQuery nieuwe elementen kunt toevoegen aan de DOM. Dus als ge voor uw non-javascript gedeelte maar 2 divs nodig hebt dan kunt ge de andere 15 gerust met JQuery er rond zetten.
    no votes  

  4. #4
    woony's Avatar
    Registered
    03/12/03
    Location
    Oostende
    Posts
    2,599
    iTrader
    78 (100%)
    Mentioned
    0 Post(s)
    Reputation
    7/10
    merci adrian voor uw uitgebreide uitleg, ik zal het eens met die spaties proberen :-) +rep
    no votes  

  5. #5
    Eleven's Avatar
    Registered
    11/01/09
    Location
    neverland
    Posts
    101
    iTrader
    0
    Mentioned
    0 Post(s)
    Quote Originally Posted by adrianhates View Post
    This quote is hidden because you are ignoring this member. Show
    (mind the spaces!)

    als ge zegt :

    Code:
    #slider.scroll.scrollcontainer{
     props: props
    }
    dan gaat ge die scroll class enkel kunnen gebruiken op een element met id "slider". die scrollcontainer gaat ge enkel kunnen gebruiken op het betreffende emelent met id "#slider" als het element met id "slider" een class "scroll" heeft.
    Of simpeler gezegd, als ge alles achter elkaar zet zonder spaties, dan selecteer je in dit geval het element met het id slider dat ook de class scroll en scrollcontainer heeft.
    Zo iets dus:
    Code:
    <div id="slider" class="scroll scrollcontainer">content</div>
    no votes  

  6. #6
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    Quote Originally Posted by Eleven View Post
    This quote is hidden because you are ignoring this member. Show
    Of simpeler gezegd, als ge alles achter elkaar zet zonder spaties, dan selecteer je in dit geval het element met het id slider dat ook de class scroll en scrollcontainer heeft.
    Zo iets dus:
    Code:
    <div id="slider" class="scroll scrollcontainer">content</div>
    inderdaad! Ja ik had het er zelf soms moeilijk mee
    no votes  

Posting Permissions

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

Log in

Log in