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.
Een ID heeft dan toch geen voordelen tegenover een class?quote:Op donderdag 13 oktober 2011 16:32 schreef YazooW het volgende:
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.
Gek he, als je float:left doet dat dingen dan links uitlijnen.
Geef de container text-align:center, en de <li>'s (want divjes voor een lijstje met links zijn natuurlijk niet zo netjes
) een display:inline. Klaar.
Geef de container text-align:center, en de <li>'s (want divjes voor een lijstje met links zijn natuurlijk niet zo netjes
) een display:inline. Klaar.
Nee.
En de vierkante vakjes om je LI heen kun je mooi met CSS doen.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Om een of andere reden krijg ik het nog niet voor elkaar, met <li> enzo.
Die <div> staat nu om wat links heen, maar in de pagina waar het voor bedoeld is, staan hier ook andere zaken in (bv een plaatjes, met een image op de background, waarvoor bij hover de verticale positie verandert, zodat er dan een ander plaatje te zien is (en er maar 1 png nodig is)).
Hier wil ik dus verder niks aan veranderen.
Maar wat ik al aangaf, als ik navigationcontainer een vaste breedte geef, gaat het wel goed.
Geef ik geen breedte op, krijgt hij de volledige breedte van zijn parent (pagenavigation).
En wat ik wil, is dat hij de breedte overneemt van de 3 divs binnenin. De reden waarom ik hier divs gebruik is niet relevant.
Dus aub niet aan het centreren denken, maar aan het automatisch aanpassen van de breedte van navigationcontainer .
Die <div> staat nu om wat links heen, maar in de pagina waar het voor bedoeld is, staan hier ook andere zaken in (bv een plaatjes, met een image op de background, waarvoor bij hover de verticale positie verandert, zodat er dan een ander plaatje te zien is (en er maar 1 png nodig is)).
Hier wil ik dus verder niks aan veranderen.
Maar wat ik al aangaf, als ik navigationcontainer een vaste breedte geef, gaat het wel goed.
Geef ik geen breedte op, krijgt hij de volledige breedte van zijn parent (pagenavigation).
En wat ik wil, is dat hij de breedte overneemt van de 3 divs binnenin. De reden waarom ik hier divs gebruik is niet relevant.
Dus aub niet aan het centreren denken, maar aan het automatisch aanpassen van de breedte van navigationcontainer .
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.
quote:
Op Held!quote:
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.
Of je leest de volgende keer. Op de vorige pagina werd door PimD precies hetzelfde gezegd.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Ten eerste had die het over li, wat niet van toepassing was. En de steutel was display:inline-block. Dat heb ik niemand eerder zien zeggen. Enkel het text-align: center had ik zelf al geprobeerd.quote:
Of je leest de volgende keer. Op de vorige pagina werd door PimD precies hetzelfde gezegd.
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.
display:inline en display:inline-block zullen anders hetzelfde gedrag vertonen hoor (qua uitlijning, niet qua padding/margin uiteraard).
Nee.
Dan is het net de juiste combinatie van parameters van al die velden voor al die divs. Had ze bijna allemaal al geprobeerd.. behalve de juistequote:
display:inline en display:inline-block zullen anders hetzelfde gedrag vertonen hoor (qua uitlijning, niet qua padding/margin uiteraard).
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.
Ik heb misschien een rare vraag - en ik ben bang dat het antwoord nee is 
Is er html code waarmee je kunt aangeven dat iets níet onderstreept of dikgedrukt moet staan?
Ik ben bezig met een stuk code (in een webcontent bewerkingssysteem, niet van mezelf dus) en daarin wordt tekst automatisch onderstreept en dikgedrukt neergezet. Dit staat zeker weten niet in de code (heb alles nageplozen) maar wordt volgens mij door het systeem gedaan. Kan ik dit dus ondervangen door een code erbij te zetten?
Is er html code waarmee je kunt aangeven dat iets níet onderstreept of dikgedrukt moet staan? Ik ben bezig met een stuk code (in een webcontent bewerkingssysteem, niet van mezelf dus) en daarin wordt tekst automatisch onderstreept en dikgedrukt neergezet. Dit staat zeker weten niet in de code (heb alles nageplozen) maar wordt volgens mij door het systeem gedaan. Kan ik dit dus ondervangen door een code erbij te zetten?
It's not just sex, it's love
It's two people connecting
With four other people
And aliens
It's two people connecting
With four other people
And aliens
