DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Ik ben echt heel slecht in javascript 
heb een voorbeeld gegoogled, maar kan niks vinden. Zou je me kunnen helpen? HTML5 mag...de rest van het systeem is ook allemaal HTML5
heb een voorbeeld gegoogled, maar kan niks vinden. Zou je me kunnen helpen? HTML5 mag...de rest van het systeem is ook allemaal HTML5
Iemand die mij zou kunnen vertellen wat nu precies het verschil is tussen een class en een id. Je kunt ze beide gebruiken in een div, het lijkt alsof ze beide hetzelfde doen maar ik snap gewoonweg niet wat nu het verschil en het voordeel/nadeel is.
[ Bericht 1% gewijzigd door #ANONIEM op 13-10-2011 16:09:06 ]
[ Bericht 1% gewijzigd door #ANONIEM op 13-10-2011 16:09:06 ]
Een ID kan je maar 1x gebruiken.quote:Op donderdag 13 oktober 2011 16:08 schreef Dimens het volgende:
Iemand die mij zou kunnen vertellen wat nu precies het verschil is tussen een class en een id. Je kunt ze beide gebruiken in een div, het lijkt alsof ze beide hetzelfde doen maar ik snap gewoonweg niet wat nu het verschil en het voordeel/nadeel is.
Een ID is uniek, een ID kan je dus slechts gebruiken voor 1 element.
Een class is niet uniek, kan je dus gebruiken in meerdere elementen, en je kan ook meerdere classen gebruiken voor 1 element.
Een class is niet uniek, kan je dus gebruiken in meerdere elementen, en je kan ook meerdere classen gebruiken voor 1 element.
Een ID heeft dan toch geen voordelen tegenover een class?quote:
Een ID is uniek, een ID kan je dus slechts gebruiken voor 1 element.
Een class is niet uniek, kan je dus gebruiken in meerdere elementen, en je kan ook meerdere classen gebruiken voor 1 element.
je kan doen
<div id="header" class="vet"></div>
<div id="footer" class="vet"></div>
met #header in je css kan je alleen dingen regelen die in je header moeten (en hetzelfde voor footer)
en met .vet kan je voor beide elementen bijvoorbeeld het lettertype regelen.
<div id="header" class="vet"></div>
<div id="footer" class="vet"></div>
met #header in je css kan je alleen dingen regelen die in je header moeten (en hetzelfde voor footer)
en met .vet kan je voor beide elementen bijvoorbeeld het lettertype regelen.
Het handigst is dus om elke div een id te geven voor plaats, grote etc.. en voor de background, text style etc.. een class te gebruiken als je van plan bent om in al die divs dezelfde font en achtergrond kleur te gebruiken?quote:
je kan doen
<div id="header" class="vet"></div>
<div id="footer" class="vet"></div>
met #header in je css kan je alleen dingen regelen die in je header moeten (en hetzelfde voor footer)
en met .vet kan je voor beide elementen bijvoorbeeld het lettertype regelen.
Zie het zo.quote:
[..]
Het handigst is dus om elke div een id te geven voor plaats, grote etc.. en voor de background, text style etc.. een class te gebruiken als je van plan bent om in al die divs dezelfde font en achtergrond kleur te gebruiken?
Een ID gebruik je als je denkt het element eenmalig te gebruiken (in combinatie met unieke styling bv) en een class gebruik je als je de element opmaak vaker gaat gebruiken. Bijvoorbeeld drie dezelfde divjes onder elkaar.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Nee, gewoon html en css, eventueel uiteindelijk met php en javascript.quote:
Tenzij je natuurlijk met .NET werkt waar je niet normaal een ID kunt gebruiken
Geen idee of je styling kapot gaat als je een ID meerdere malen gebruikt, ik weet wel dat jQuery dat niet zo leuk vind.
Het is invalid, omdat Javascript er vanuit gaat dat een ID uniek is.quote:Op donderdag 13 oktober 2011 19:14 schreef Treces het volgende:
Geen idee of je styling kapot gaat als je een ID meerdere malen gebruikt, ik weet wel dat jQuery dat niet zo leuk vind.
CSS hobbelt er vaak wel overheen, maar het blijft invalid. Bovendien is er geen enkele reden om een ID te gebruiken voor elementen die niet uniek zijn.
Bij twijfel dus altijd een classname gebruiken. Mocht je het element ooit met JS willen selecteren kun je altijd nog een ID toevoegen. Andersom is veel lastiger aangezien je dan al je CSS selectoren moet veranderen.
[ Bericht 13% gewijzigd door KomtTijd... op 13-10-2011 19:24:16 ]
Als je meerdere elementen dezelfde font of background wilt geven, gebruik je normaliter gewoon een algemenere selector.quote:
[..]
Het handigst is dus om elke div een id te geven voor plaats, grote etc.. en voor de background, text style etc.. een class te gebruiken als je van plan bent om in al die divs dezelfde font en achtergrond kleur te gebruiken?
quote:
Lees dit even door: http://css-tricks.com/818-the-difference-between-id-and-class/
Dit is de eerste keer dat ik het voordeel van ID's ontdekquote:ID's have special browser functionality
Classes have no special abilities in the browser, but ID's do have one very important trick up their sleeve. This is the "hash value" in the URL. If you have a URL like http://yourdomain.com#comments, the browser will attempt to locate the element with an ID of "comments" and will automatically scroll the page to show that element. It is important to note here that the browser will scroll whatever element it needs to in order to show that element, so if you did something special like a scrollable DIV area within your regular body, that div will be scrolled too.
This is an important reason right here why having ID's be absolutely unique is important. So your browser knows where to scroll!
Ja, maar wacht maar tot je een div met een ID in een container hebt staan met overflow:hidden, en dan die pagina aanspreken met een hash in de URL. Wat een ellende.
Nee.
Ook als er in die div niet teveel content voor het formaat zit?quote:
Ja, maar wacht maar tot je een div met een ID in een container hebt staan met overflow:hidden, en dan die pagina aanspreken met een hash in de URL. Wat een ellende.
Het is daarbij wel handig om class names te gebruiken die beschrijven wat iets is, niet hoe het eruit moet zien. Anders krijg je vroeg of laat css als:quote:
je kan doen
<div id="header" class="vet"></div>
<div id="footer" class="vet"></div>
met #header in je css kan je alleen dingen regelen die in je header moeten (en hetzelfde voor footer)
en met .vet kan je voor beide elementen bijvoorbeeld het lettertype regelen.
| 1 2 3 | .red { color: blue; } |
En daar wordt het niet duidelijker van...
ID's zijn ook heel handig in andere situaties. Als je met Javascript (bijv. AJAX) de inhoud van een deel van de pagina wilt aanpassen, is het wel zo handig als je precies dat stukje van de pagina kunt aanspreken. Dan heb je een ID nodig.quote:Op donderdag 13 oktober 2011 19:31 schreef lkb9000 het volgende:
[..]
[..]
Dit is de eerste keer dat ik het voordeel van ID's ontdek
Ik blijf ruzie houden met ellendige DIV's.
Ik ben er bijna, maar nog niet helemaal.
De pagina waar het probleem in optreedt heb ik even gestript, en enkel de relevante info laten staan / aangepast.
Css heb ik voor het gemak in de pagina zelf gezet.
Wat ik zou willen, is 2 dingen:
De cyaan-gekleurde div (navigationcontainer) moet de grootte krijgen van de 2 groene + rode divs. width:auto; werkt niet.
Als de breedte aangepast kan worden, wordt navigationcontainer gecentreerd. Dat is mijn doel.
Een vaste breedte opgeven gaat niet, want de div pagelinks is niet altijd even groot.
Iemand tips?
(kleurtjes zitten er enkel in om de divs nu goed te kunnen herkennen)
Ik ben er bijna, maar nog niet helemaal.
De pagina waar het probleem in optreedt heb ik even gestript, en enkel de relevante info laten staan / aangepast.
Css heb ik voor het gemak in de pagina zelf gezet.
Wat ik zou willen, is 2 dingen:
De cyaan-gekleurde div (navigationcontainer) moet de grootte krijgen van de 2 groene + rode divs. width:auto; werkt niet.
Als de breedte aangepast kan worden, wordt navigationcontainer gecentreerd. Dat is mijn doel.
Een vaste breedte opgeven gaat niet, want de div pagelinks is niet altijd even groot.
Iemand tips?
(kleurtjes zitten er enkel in om de divs nu goed te kunnen herkennen)
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <html> <head> <style> <!-- .kolom { width:400px; background:#D0D0FF; } .gallery .pagenavigation { margin:auto; } .gallery .prevpage a, .gallery .prevpage em { display: block; width: 70px; height: 19px; float: left; margin: 0 6px 0 6px; background: lime; } .gallery .nextpage a, .gallery .nextpage em { display: block; width: 70px; height: 19px; float: left; margin: 0 6px 0 6px; background: lime; } .gallery .pagelinks a{ float: left; text-decoration:none; background: red; } .navigationcontainer { margin: auto; background: cyan; min-height:2px; } .clear { clear: both; } --> </style> </head> <body> <div class="kolom"> <div class="gallery"> <div class="pagenavigation"> <div class="navigationcontainer"> <div class="prevpage"><em>Vorige</em></div> <div class="pagelinks"><a href="#">1-2-3-4-5</a></div> <div class="nextpage"><em>Volgende</em></div> <div class="clear"></div> </div> </div> </div> </div> </body> </html> |
Op dinsdag 16 maart 2010 18:45 schreef henrydg het volgende:
Wat is er mis met de Prius?
[ afbeelding ]
Ik vind 't een hele mooie auto.
Wat is er mis met de Prius?
[ afbeelding ]
Ik vind 't een hele mooie auto.
Voor de duidelijkheid met een plaatje:
Eerdergenoemd script geeft nu bovenste resultaat. Moet worden het onderste.
Zonder dat ik de cyaangekleurde div een vaste grootte geef.
Eerdergenoemd script geeft nu bovenste resultaat. Moet worden het onderste.
Zonder dat ik de cyaangekleurde div een vaste grootte geef.
Op dinsdag 16 maart 2010 18:45 schreef henrydg het volgende:
Wat is er mis met de Prius?
[ afbeelding ]
Ik vind 't een hele mooie auto.
Wat is er mis met de Prius?
[ afbeelding ]
Ik vind 't een hele mooie auto.
Helaas..quote:
Op De 3 divs die daarbinnen liggen nemen dit wel over, tekst wordt gecentreerd IN die groene en rode vakjes, maar het hele blauwe blok zelf moet gecentreerd worden. Dit is dus een DIV, geen tekst, dus denk dat die daarom niet gecentreerd wordt.
Het centreren doe ik door margin:auto.
Maar het cyaan-blok heeft nu de breedte van 100% van zijn parent. Dit moet kleiner worden, maar wel aangepast aan de divs die daarbinnen liggen.
Heb je dit zelf wel werkend gekregen? In welke browser?
Anders even de code van mij kopiëren en even testen.
Op dinsdag 16 maart 2010 18:45 schreef henrydg het volgende:
Wat is er mis met de Prius?
[ afbeelding ]
Ik vind 't een hele mooie auto.
Wat is er mis met de Prius?
[ afbeelding ]
Ik vind 't een hele mooie auto.
) een display:inline. Klaar.
