Thread: nested divs
-
19-02-2010, 11:22 #1Approved 9-lifer
- 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.
als ik nu mijn productblocks in mijn css wil plooien.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>
.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
-
-
19-02-2010, 11:44 #2
(mind the spaces!)
als ge zegt :
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 )Code:#slider.scroll .scrollcontainer{ props: props }
Wilt ge in de diepte gaan ( dus het nesten van elementen ) moet ge het gewoon scheiden door spaties
Hierbij zal ".scrollcontainer" enkel werken in een element class "scroll" dat in een element met id "slider" zit.Code:#slider .scroll .scrollcontainer{ props: props }
voor uw voorbeeld zie ik dit wel werken :
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 ikCode:#slider .scroll .scrollcontainer #starter .productblocks .productsblocks{ props: props }
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
-
19-02-2010, 12:12 #3Member
- 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
-
19-02-2010, 12:22 #4Approved 9-lifer
- 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
-
19-02-2010, 12:47 #5
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
-
19-02-2010, 15:43 #6no votes

