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.
Als het goed is zou die selector elk element met id fbrp__29 etc moeten matchen.
Je 2e vraag snap ik niet.
Je 2e vraag snap ik niet.
@ 2e vraag,quote:Op vrijdag 8 juli 2011 13:05 schreef Scorpie het volgende:
Als het goed is zou die selector elk element met id fbrp__29 etc moeten matchen.
Je 2e vraag snap ik niet.
Dit staat er in de html:
| 1 2 3 4 5 6 7 8 9 | <div class="required"> <label for="fbrp__31">Details van de kinderen*</label> <textarea name="cntnt01fbrp__31" cols="80" rows="15" class="cms_textarea" id="fbrp__31"></textarea> <a href="javascript:fbht('fbrp_ht_31')"><img src="modules/FormBuilder/images/info-small.gif" alt="Help" /></a> <span id="fbrp_ht_31" style="display:none" class="fbr_helptext">Vul het als volgt in: Naam kind 1 - Geslacht kind 1 - Leeftijd kind 1 Naam kind 2 - Geslacht kind 2 - Leeftijd kind 2 etc...</span></div> |
Het gaat met dus om het <label for="fbrp__31">. Hoe roep ik die aan in de css? Die moet ik namelijk een bepaalde breedte geven. Hij neem niet de #fbrp__31-code over.
Is het mogelijk die labels een id te geven en dat als selector in je css te gebruiken?quote:
Thanks, dat werkt! Nu moet ik nog die label for="blabla" editten, maar hoe kan dat? Ik heb daar nog nooit van gehoord
Breasts! helping men to avoid eye contact since 1865.
Nee, want ik kan die code niet editten, het is een form gegenereerd door een module in mijn cms.quote:Op vrijdag 8 juli 2011 13:09 schreef Garisson72 het volgende:
[..]
Is het mogelijk die labels een id te geven en dat als selector in je css te gebruiken?
als het de enige label binnen die div is, kun je hem selecteren door
div.required label {
...
}
als je meerdere labels binnen die div hebt, worden die daar echter allemaal door geraakt.
Is het genereren van die forms in dat CMS niet configureerbaar? Dat je daar op één of andere manier een id aan meegeeft?
div.required label {
...
}
als je meerdere labels binnen die div hebt, worden die daar echter allemaal door geraakt.
Is het genereren van die forms in dat CMS niet configureerbaar? Dat je daar op één of andere manier een id aan meegeeft?
Breasts! helping men to avoid eye contact since 1865.
Nee, maar wel meerdere divs die zo heten en ook een label hebben. Ik ga even spelen of ik iets kan maken wat er goed uit zietquote:Op vrijdag 8 juli 2011 13:11 schreef Garisson72 het volgende:
als het de enige label binnen die div is, kun je hem selecteren door
div.required label {
...
}
als je meerdere labels binnen die div hebt, worden die daar echter allemaal door geraakt.
het kan met label[for="fbpr__31"] maar er zijn betere oplossingen, volgens mij kun je die module instellen dat'ie classes meegeeft. En anders kun je het template aanpassen, en wat container-divs gebruiken. Die fbpr_31 is namelijk een variable.
Ik wil graag radio buttons maken die ook reageren als je er bijna op klikt. Ik dacht dat te kunnen bereiken met gewoon een beetje padding toevoegen aan het input-radio element, maar dat werkt niet 
Weet iemand hier misschien een slimme truc voor waarvoor ik niet m'n hele markup hoef om te gooien?
Weet iemand hier misschien een slimme truc voor waarvoor ik niet m'n hele markup hoef om te gooien?
Label?quote:
Ik wil graag radio buttons maken die ook reageren als je er bijna op klikt. Ik dacht dat te kunnen bereiken met gewoon een beetje padding toevoegen aan het input-radio element, maar dat werkt niet
Weet iemand hier misschien een slimme truc voor waarvoor ik niet m'n hele markup hoef om te gooien?
Ik zal even laten zien hoe het er ongeveer uit ziet.quote:
Het is dus een meerkeuzevraag met 5 opties (van volledig oneens tot volledig eens). De 3 middelste opties hebben wel een label, maar die wordt met CSS verborgen om tot bovenstaand resultaat te komen.
Ik zit er nu aan te denken om de buttons door jQueryUI Button te laten vervangen. Dat is misschien de beste oplossing, qua usability en ook qua consistentie tussen browsers.
JQuery UI is sowieso een mooie manier om gestandaardiseerde forms te maken.quote:Op zaterdag 9 juli 2011 12:02 schreef Tijn het volgende:
[..]
Ik zal even laten zien hoe het er ongeveer uit ziet.
[ afbeelding ]
Het is dus een meerkeuzevraag met 5 opties (van volledig oneens tot volledig eens). De 3 middelste opties hebben wel een label, maar die wordt met CSS verborgen om tot bovenstaand resultaat te komen.
Ik zit er nu aan te denken om de buttons door jQueryUI Button te laten vervangen. Dat is misschien de beste oplossing, qua usability en ook qua consistentie tussen browsers.
zou nog kunnen overwegen een absoluut label achter elke input te leggen maar dat geeft wel extra mark-up. Voor js zou ik alleen gaan als het netjes degradeert. radiobuttons en checkboxen zijn wel een bitch met css
“Specialization is for insects”.—Robert Heinlein
Ik snap niet helemaal wat het probleem is. Waarom moet je die labels verbergen? En waarom niet alle 5 een label?quote:
[..]
Ik zal even laten zien hoe het er ongeveer uit ziet.
[ afbeelding ]
Het is dus een meerkeuzevraag met 5 opties (van volledig oneens tot volledig eens). De 3 middelste opties hebben wel een label, maar die wordt met CSS verborgen om tot bovenstaand resultaat te komen.
Ik zit er nu aan te denken om de buttons door jQueryUI Button te laten vervangen. Dat is misschien de beste oplossing, qua usability en ook qua consistentie tussen browsers.
Je kunt je labels toch gewoon middels float:left achter elkaar zetten? Met de radiobuttons erin?
goed om te weten wist niet dat een input binnen een label mochtquote:
[..]
Ik snap niet helemaal wat het probleem is. Waarom moet je die labels verbergen? En waarom niet alle 5 een label?
Je kunt je labels toch gewoon middels float:left achter elkaar zetten? Met de radiobuttons erin?
“Specialization is for insects”.—Robert Heinlein
Nou ja, ik neem aan dat het een enquete o.i.d. is - met 40x dezelfde soort vragen onder elkaar, met 40x dezelfde opties. Beetje overkill om 40 labels met "heel erg oneens", "oneens", "weet niet", "eens", "heel erg eens" te hebben.
Zitten er nog elementen om de radiobuttons heen? Een li ofzo? Dan zou je daar met JS de klik van kunnen afvangen en deze dan de radiobutton laten activeren.
Zitten er nog elementen om de radiobuttons heen? Een li ofzo? Dan zou je daar met JS de klik van kunnen afvangen en deze dan de radiobutton laten activeren.
Nee.
Waarom moeilijk doen met li als er gewoon een element bestaat wat dat natuurlijk al doet?quote:
Nou ja, ik neem aan dat het een enquete o.i.d. is - met 40x dezelfde soort vragen onder elkaar, met 40x dezelfde opties. Beetje overkill om 40 labels met "heel erg oneens", "oneens", "weet niet", "eens", "heel erg eens" te hebben.
Zitten er nog elementen om de radiobuttons heen? Een li ofzo? Dan zou je daar met JS de klik van kunnen afvangen en deze dan de radiobutton laten activeren.
Inderdaad. Ze zitten trouwens ook inderdaad in li's. Geen slecht idee om daar een click-event aan te hangen om de radio-button te zettenquote:
Nou ja, ik neem aan dat het een enquete o.i.d. is - met 40x dezelfde soort vragen onder elkaar, met 40x dezelfde opties. Beetje overkill om 40 labels met "heel erg oneens", "oneens", "weet niet", "eens", "heel erg eens" te hebben.
Zitten er nog elementen om de radiobuttons heen? Een li ofzo? Dan zou je daar met JS de klik van kunnen afvangen en deze dan de radiobutton laten activeren.
Ik vraag alleen maar of er een element om heen zit, ik zeg niet dat het perse de juiste oplossing is. Ik ken monsterlijke oplossingen uit .NET waar lijsten met radiobuttons/checkboxes in tabellen worden gerenderd, dus ik kijk nergens meer van op.
Nee.
Lijkt me een prima oplossing dan. Ook zonder Javascript functioneert het formulier dan naar behoren. Iets minder gebruiksvriendelijk misschien, maar je moet wat als het met pure CSS/HTML niet op te lossen is/lijkt te zijn.quote:
[..]
Inderdaad. Ze zitten trouwens ook inderdaad in li's. Geen slecht idee om daar een click-event aan te hangen om de radio-button te zetten
Nee.
...maar waarom niet gewoon simpelweg een label er omheen?quote:
[..]
Inderdaad. Ze zitten trouwens ook inderdaad in li's. Geen slecht idee om daar een click-event aan te hangen om de radio-button te zetten
Waarom denken jullie allemaal zo moeilijk?
De labels voor de middelste 3 elementen worden verborgen, omdat het een enquête moet worden en er mogelijk 100 van dit soort vragen onder elkaar komen te staan. Daarom wil ik alleen van de buitenste twee elementen het label weergeven en van de binnenste 3 niet, om een overload aan dubbele teksten te voorkomen.quote:
[..]
Ik snap niet helemaal wat het probleem is. Waarom moet je die labels verbergen? En waarom niet alle 5 een label?
Je kunt je labels toch gewoon middels float:left achter elkaar zetten? Met de radiobuttons erin?
Wat ook nog wel een oplossing zou kunnen zijn, is met JS de teksten van de binnenste 3 labels weghalen. Dan gebruik je nog wel het klik-gedrag van het label-element om de radio button te zetten. Nadeel is dan dat een bezoeker zonder Javascript een formulier voor z'n neus krijgt die er heel anders uitziet, terwijl met de eerste oplossing alleen de usability er een klein beetje onder lijdt wanneer een bezoeker geen JS heeft, maar de pagina er visueel hetzelfde uitziet.
Plus dat een gebruiker met Javascript, maar met een screenreader o.i.d. lege labels voorgelezen krijgt. Dat lijkt me dus geen oplossing. Wat KomtTijd zegt, wellicht kun je de labels van de middelste 3 leeg laten lijken d.m.v. de text-indent e.d.?
Nee.
Er zitten al labels omheen. Zonder CSS ziet het er zo uit:quote:
[..]
...maar waarom niet gewoon simpelweg een label er omheen?
Waarom denken jullie allemaal zo moeilijk?
Het punt is dat ik de teksten van de middelste 3 labels niet wil weergeven. Dat doe ik nu door met CSS die elementen te verbergen, maar ja, dan heb je dus ook geen labels meer om op te klikken.
Maar dan hebben de middelste 3 elementen dus helemaal geen label-tekst meer. Dat lijkt me accessibility-wise nou niet echt ideaal, of wel?quote:
Plus dat een gebruiker met Javascript, maar met een screenreader o.i.d. lege labels voorgelezen krijgt. Dat lijkt me dus geen oplossing. Wat KomtTijd zegt, wellicht kun je de labels van de middelste 3 leeg laten lijken d.m.v. de text-indent e.d.?
met een enquete kun je je wel afvragen in hoeverre dat nodig is, voor je doelgroep. Een label met alleen een radio-button erin zou veruit het makkelijkst zijn.quote:
[..]
Maar dan hebben de middelste 3 elementen dus helemaal geen label-tekst meer. Dat lijkt me accessibility-wise nou niet echt ideaal, of wel?
En anders kun je de CSS-truckendoos wel open halen om de tekst te verbergen zonder dat je het label verbergt.
Een vaste hoogte en breedte, en de tekstkleur RGBA(0,0,0,0) ofzo.
labeltekst eronder en bij de middelste 3 alleen zichtbaar bij een :hover. toegankelijk en geen overload aan dezelfde tekst in beeld
transparant is ook een kleur, werkt wss beter (weet niet zeker) in oudere browsers, met vaste hoogte heb je ook nog text-indent: -9001; over 9000
transparant is ook een kleur, werkt wss beter (weet niet zeker) in oudere browsers, met vaste hoogte heb je ook nog text-indent: -9001; over 9000
“Specialization is for insects”.—Robert Heinlein
Dat zou misschien het makkelijkst zijn, maar m'n klant is best wel picky als het op toegankelijkheid aankomt.quote:
[..]
met een enquete kun je je wel afvragen in hoeverre dat nodig is, voor je doelgroep. Een label met alleen een radio-button erin zou veruit het makkelijkst zijn.
Dat is nog niet zo'n gek ideequote:En anders kun je de CSS-truckendoos wel open halen om de tekst te verbergen zonder dat je het label verbergt.
Een vaste hoogte en breedte, en de tekstkleur RGBA(0,0,0,0) ofzo.
Nee, je zegt in een eerdere posting dat je de labels wilt leegmaken met Javascript. Dan hebben ze geen tekst meer voor screenreaders. Als je met text-indent e.d. werkt staat de tekst buiten de viewport, wat voor de meeste screenreaders (voor zover ik weet) gewoon wordt gelezen.quote:
[..]
Maar dan hebben de middelste 3 elementen dus helemaal geen label-tekst meer. Dat lijkt me accessibility-wise nou niet echt ideaal, of wel?
Nee.
de bedoeling is dat screenreaders alle css negeren?
“Specialization is for insects”.—Robert Heinlein
Ja, dat klopt. Labels met JS leegmaken ga ik ook zeker niet doen hoorquote:
[..]
Nee, je zegt in een eerdere posting dat je de labels wilt leegmaken met Javascript. Dan hebben ze geen tekst meer voor screenreaders. Als je met text-indent e.d. werkt staat de tekst buiten de viewport, wat voor de meeste screenreaders (voor zover ik weet) gewoon wordt gelezen.
Die ga ik even proberenquote:Op zaterdag 9 juli 2011 12:52 schreef KomtTijd... het volgende:
<label><span>oneens</span><input type="radio"/></label>
En dan de span verbergen.
Niet alle CSS, maar wel het grootste gedeelte. Dingen als display:none worden in de meeste gevallen niet voorgelezen (en volgens mij ook genegeerd door zoekmachines bij de indexering). Je kunt daarom beter dingen als verborgen tabbladen e.d. absoluut buiten de viewport positioneren (hoewel dit problemen kan opleveren in RTL-scenarios, bij bijvoorbeeld Arabische website). Er is jammer genoeg een groot verschil tussen de diverse screenreaders. Technieken die in programma X werken zorgen voor problemen in programma Y etc.quote:Op zaterdag 9 juli 2011 12:46 schreef n8n het volgende:
de bedoeling is dat screenreaders alle css negeren?
In principe is het heel simpel: is je content zonder CSS aan nog te volgen? Dan zit je al een heel eind op de goede weg voor zoekmachines en toegankelijkheid. In de praktijk is het natuurlijk niet zo zwart/wit, maar goed
Nee.
keertje inlezen dan, is de kers op de taart om ook deze groep tot in de puntjes te (kunnen) voorzienquote:
[..]
Niet alle CSS, maar wel het grootste gedeelte. Dingen als display:none worden in de meeste gevallen niet voorgelezen (en volgens mij ook genegeerd door zoekmachines bij de indexering). Je kunt daarom beter dingen als verborgen tabbladen e.d. absoluut buiten de viewport positioneren (hoewel dit problemen kan opleveren in RTL-scenarios, bij bijvoorbeeld Arabische website). Er is jammer genoeg een groot verschil tussen de diverse screenreaders. Technieken die in programma X werken zorgen voor problemen in programma Y etc.
In principe is het heel simpel: is je content zonder CSS aan nog te volgen? Dan zit je al een heel eind op de goede weg voor zoekmachines en toegankelijkheid. In de praktijk is het natuurlijk niet zo zwart/wit, maar goed
“Specialization is for insects”.—Robert Heinlein
Dit is 'em geworden. Kheb nu label een padding van 5px gegeven, en hij is aardig dronken-proof nuquote:
<label><span>oneens</span><input type="radio"/></label>
En dan de span verbergen.
Zeker, hoewel het soms ook voor een hoop frustratie en extra werk zorgt/kan zorgen - helemaal met interactieve dingen zoals Google Maps. Erg interessante materie om mee bezig te zijn in ieder geval, dingen als WCAG, Drempelvrij en webrichtlijnen.quote:
[..]
keertje inlezen dan, is de kers op de taart om ook deze groep tot in de puntjes te (kunnen) voorzien
Nee.
Ik hou er tegenwoordig van tevoren al rekening mee, screenreaders zouden ook geen moeite moeten hebben maar wat extra bijles is nooit weg. De richtlijnen heb ik allemaal gelezen, wellicht weer een keer bijspijkeren want dat is alweer een tijd geleden. Met name de richtlijnen over kleur -naast rood en groen- willen er nog wel eens tussendoor glippenquote:
[..]
Zeker, hoewel het soms ook voor een hoop frustratie en extra werk zorgt/kan zorgen - helemaal met interactieve dingen zoals Google Maps. Erg interessante materie om mee bezig te zijn in ieder geval, dingen als WCAG, Drempelvrij en webrichtlijnen.
“Specialization is for insects”.—Robert Heinlein
Oh zeker, een 100% score is bijna niet te halen in de praktijk is mijn ervaring. Er zitten altijd betrokkenen bij een project die toch perse lichtgrijze tekst willen op een donkergrijze achtergrond, interactie-designers die dingen perse op de :hover willen en niet op de click (waardoor je touch-devices uitsluit, en er vervolgens geen budget/tijd is om hier fallbacks voor te maken), contentbeheerders die lekker uit Word gaan lopen copy/pasten etc etc.
Nee.
vooral ook touchpad-proof. Dat waardeer ik welquote:
[..]
Dit is 'em geworden. Kheb nu label een padding van 5px gegeven, en hij is aardig dronken-proof nu
daarom zelfstandig. Rekening houden met designelementen ligt voor mij ook wel aan de doelgroep maar anders kan er altijd nog een alternatief kleuren-cssje geklopt wordenquote:
Oh zeker, een 100% score is bijna niet te halen in de praktijk is mijn ervaring. Er zitten altijd betrokkenen bij een project die toch perse lichtgrijze tekst willen op een donkergrijze achtergrond, interactie-designers die dingen perse op de :hover willen en niet op de click (waardoor je touch-devices uitsluit, en er vervolgens geen budget/tijd is om hier fallbacks voor te maken), contentbeheerders die lekker uit Word gaan lopen copy/pasten etc etc.
“Specialization is for insects”.—Robert Heinlein
Zijn er mensen met een touch-telefoon die even feedback kunnen geven op het uitklapmenu op www.zcflevo.nl?quote:
interactie-designers die dingen perse op de :hover willen en niet op de click (waardoor je touch-devices uitsluit, en er vervolgens geen budget/tijd is om hier fallbacks voor te maken),
Er zit een nieuwe layout in de pijplijn maar daar komt waarschijnlijk een soortgelijk menu in... Het menu is eigenlijk het enige waar nog aan gewerkt moet worden. Dus goed dat je het aanstipt, ik wil dit wel in één keer goed doen.
wellicht is het menu dat ik voor mijn site n8n.nl heb gebruikt wel wat (in aanbouw ja ;') ), zie wat er gebeurd als je het venster smaller maakt. Het is nu niet echt bruikbaar. Media querys zijn geniaal voor mobiele pagina'squote:Op zaterdag 9 juli 2011 13:20 schreef KomtTijd... het volgende:
[..]
Zijn er mensen met een touch-telefoon die even feedback kunnen geven op het uitklapmenu op www.zcflevo.nl?
Er zit een nieuwe layout in de pijplijn maar daar komt waarschijnlijk een soortgelijk menu in... Het menu is eigenlijk het enige waar nog aan gewerkt moet worden. Dus goed dat je het aanstipt, ik wil dit wel in één keer goed doen.
“Specialization is for insects”.—Robert Heinlein
Media-queries ja, wat een heldentechniek 
Ook daar weer: jammer dat veel ontwerpers (lees: mensen die ooit drukwerk maakten en overgestapt zijn naar web) nog steeds van die pixelneukers zijn die weken besteden aan het uitwerken van iedere pagina in PSD.
Ook daar weer: jammer dat veel ontwerpers (lees: mensen die ooit drukwerk maakten en overgestapt zijn naar web) nog steeds van die pixelneukers zijn die weken besteden aan het uitwerken van iedere pagina in PSD.
Nee.
gewoon geen pagina's in psd makenquote:
Media-queries ja, wat een heldentechniek
Ook daar weer: jammer dat veel ontwerpers (lees: mensen die ooit drukwerk maakten en overgestapt zijn naar web) nog steeds van die pixelneukers zijn die weken besteden aan het uitwerken van iedere pagina in PSD.
hooguit om met wat blokjes een vlakverdeling te tekenen
“Specialization is for insects”.—Robert Heinlein
Oh als ik zelf ontwerp gebeurt dat ook zeker. Jammer genoeg (en ik kan het me gedeeltelijk ook wel voorstellen) willen klanten vaak toch eerst allerlei schermen uitgewerkt zien voordat er gebouwd gaat/mag worden. Vooruitstrevende klanten die begrijpen dat een website er anders uit kan/zal zien op een 27" iMac en een 13" laptop heb ik jammer genoeg nog niet mogen meemaken. Hopelijk in m'n nieuwe baan waar ik volgende week begin wel
Nee.
ik bouw meestal meteen een statische html met css, kost me even veel tijd en met css3 is er al een hoop mogelijk zonder afbeeldingenquote:
Oh als ik zelf ontwerp gebeurt dat ook zeker. Jammer genoeg (en ik kan het me gedeeltelijk ook wel voorstellen) willen klanten vaak toch eerst allerlei schermen uitgewerkt zien voordat er gebouwd gaat/mag worden. Vooruitstrevende klanten die begrijpen dat een website er anders uit kan/zal zien op een 27" iMac en een 13" laptop heb ik jammer genoeg nog niet mogen meemaken. Hopelijk in m'n nieuwe baan waar ik volgende week begin wel
“Specialization is for insects”.—Robert Heinlein
Bezig met de ontwikkeling van een site.
Ik heb nu een index.php, met daarin wat scriptaculous:
Vervolgens heb ik een top.php, die ik dmv van een php include in de index laadt. De top.php werkt met jQuery.
Probleem wat ik nu heb is dat als ik het run ik de top.php wel zie, en die werkt ook gewoon netjes. De index.php wordt verder ook gewoon weergeven op het belangrijkste na, het hele scriptaculous gebeuren...
Op de één of andere manier schakelt die jQuery dus mijn scriptaculous uit. Na een beetje zoeken op Google lijkt het best normaal te zijn dat je conflicten kan krijgen als je met meerdere libraries naast elkaar werkt, maar wat ik niet kon vinden, en wat ik graag hier wil vragen, hoe kan ik het voor elkaar krijgen dat mijn scriptaculous en jQuery gewoon netjes naast elkaar gaan werken?
Ik heb nu een index.php, met daarin wat scriptaculous:
| 1 2 3 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js"></script> <script type="text/javascript" src="assets/js/scriptaculous.js"></script> <script type="text/javascript" src="assets/js/portal.js"></script> |
Vervolgens heb ik een top.php, die ik dmv van een php include in de index laadt. De top.php werkt met jQuery.
| 1 2 | <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/slide.js" type="text/javascript"></script> |
Probleem wat ik nu heb is dat als ik het run ik de top.php wel zie, en die werkt ook gewoon netjes. De index.php wordt verder ook gewoon weergeven op het belangrijkste na, het hele scriptaculous gebeuren...
Op de één of andere manier schakelt die jQuery dus mijn scriptaculous uit. Na een beetje zoeken op Google lijkt het best normaal te zijn dat je conflicten kan krijgen als je met meerdere libraries naast elkaar werkt, maar wat ik niet kon vinden, en wat ik graag hier wil vragen, hoe kan ik het voor elkaar krijgen dat mijn scriptaculous en jQuery gewoon netjes naast elkaar gaan werken?
Gewoon niet 2 verschillende libraries willen gebruiken.quote:
Op de één of andere manier schakelt die jQuery dus mijn scriptaculous uit. Na een beetje zoeken op Google lijkt het best normaal te zijn dat je conflicten kan krijgen als je met meerdere libraries naast elkaar werkt, maar wat ik niet kon vinden, en wat ik graag hier wil vragen, hoe kan ik het voor elkaar krijgen dat mijn scriptaculous en jQuery gewoon netjes naast elkaar gaan werken?
2 libraries naast elkaar gebruiken, echt waar..? 
Zoek eens op jquery.noConflict als je toch perse twee libraries wil gebruiken...
Zoek eens op jquery.noConflict als je toch perse twee libraries wil gebruiken...
Nee.
Ik ben behoorlijk noob hier in, snap echt niet wat ik moet doen met die jquery.noConflict.
Ik heb dus gewoon 2 scriptjes los van elkaar gedownload, deze helemaal zitten aanpassen naar eigen smaak maar nu gaat het dus mis bij het samenvoegen.
Ik heb dus gewoon 2 scriptjes los van elkaar gedownload, deze helemaal zitten aanpassen naar eigen smaak maar nu gaat het dus mis bij het samenvoegen.
Niets, je moet niet 2 verschillende libraries door elkaar gebruiken.quote:
Ik ben behoorlijk noob hier in, snap echt niet wat ik moet doen met die jquery.noConflict.
Ik heb dus gewoon 2 scriptjes los van elkaar gedownload, deze helemaal zitten aanpassen naar eigen smaak maar nu gaat het dus mis bij het samenvoegen.
Probleem is inmiddels opgelost.
In het bestand slide.js "$" vervangen door "jQuery".
Werkt nu perfect naast elkaar
In het bestand slide.js "$" vervangen door "jQuery".
Werkt nu perfect naast elkaar
Help Ik snap niks van jQuery 
Ik wil de ID's van ALLE geselecteerde LI's in het input veld #hardware krijgen. Dat lukt, behalve dat als ik hem niet meer geselecteerd heb hij blijft staan
http://intranet.vdxml.nl/test.html
Ik snap niks van jQuery Ik wil de ID's van ALLE geselecteerde LI's in het input veld #hardware krijgen. Dat lukt, behalve dat als ik hem niet meer geselecteerd heb hij blijft staan
http://intranet.vdxml.nl/test.html
| 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 | <script> $(function() { $( "#selectable" ).selectable({ stop: function() { var result = $( "#hardware" ).val(''); $( ".ui-selected", this ).each(function() { var index = $( "#selectable li" ).index( this ); result.val( $( "#hardware" ).val() + this.id + ' ' ); }); } }); }); </script> <div class="demo"> <ol id="selectable"> <li class="ui-state-default" id="2255">1</li> <li class="ui-state-default" id="3311">2</li> <li class="ui-state-default" id="3355">3</li> <li class="ui-state-default" id="6633">4</li> <li class="ui-state-default" id="1111">5</li> <li class="ui-state-default" id="2222">6</li> <li class="ui-state-default" id="1337">7</li> <li class="ui-state-default" id="666">8</li> <li class="ui-state-default" id="3399">9</li> </ol> </div> |
Oops...hij was gecachedquote:Op zondag 17 juli 2011 15:14 schreef DaFan het volgende:
Hoe bedoel je ? Als je hem deselecteert dan verdwijnt hij ook gewoon uit het veld (Chrome 12.0)
Wat is een goede manier om statusupdates van een Facebook page op een website te tonen? Vroeger had je de minifeed, maar het lijkt nu niet meer mogelijk te zijn om via RSS updates van Facebook binnen te halen. En bij de API's zie ik ook niet direct iets wat me nuttig lijkt.
Iemand een idee? Het gaat om een openbare Facebook page, dus geen profiel van een persoon ofzo.
Iemand een idee? Het gaat om een openbare Facebook page, dus geen profiel van een persoon ofzo.
http://developers.facebook.com/docs/reference/rest/status.get/quote:
Wat is een goede manier om statusupdates van een Facebook page op een website te tonen? Vroeger had je de minifeed, maar het lijkt nu niet meer mogelijk te zijn om via RSS updates van Facebook binnen te halen. En bij de API's zie ik ook niet direct iets wat me nuttig lijkt.
Iemand een idee? Het gaat om een openbare Facebook page, dus geen profiel van een persoon ofzo.
| 1 2 3 4 5 6 7 8 9 10 | <script> $(document).ready(function(){ $('a').click(function () { var divName = this.name; $("#"+divName).fadeIn(1200).siblings().fadeOut(1200); }); }); </script> |
Script zorgt ervoor dat de oude div weg gaat als een nieuwe div aangeroepen wordt, zodat er altijd maar 1 div zichtbaar is. Effecten zijn fadeOut en fadeIn, hoe kan ik dit script nou zo krijgen dat de fadeIn even wacht totdat de fadeOut klaar is. Nu faden ze door elkaar zeg maar, de ene fadeOut en de andere fadeIn.
Door delay() te gebruiken in de chain, of de fade-out in de call-back van de fadeIn te zetten.
of
Zoiets.
[ Bericht 0% gewijzigd door PimD op 20-07-2011 19:06:28 ]
| 1 | $("#"+divName).fadeIn(1200).siblings().delay(1200).fadeOut(1200); |
of
| 1 2 3 | $("#"+divName).fadeIn(1200,function(){ $(this).siblings().fadeOut(1200); }); |
Zoiets.
[ Bericht 0% gewijzigd door PimD op 20-07-2011 19:06:28 ]
Nee.
Beide opties doen hetzelfde hier: Nieuwe div wordt getoond, terwijl de oude div nog zichtbaar is. Nadat de nieuwe div op het scherm is getoverd komt de .delay, en dan pas fade de oude div uit.
Dan doe je toch iets verkeerd lijkt me, aangezien de callback pas wordt uitgevoerd als de fadeIn voltooid is. Gooi eens een voorbeeld online, zodat we kunnen zien wat je wilt/hebt.
Nee.
Volgens mij is het de bedoeling dat je eerst fadeOut krijgt, en daarna pas fadeIn.quote:
Dan doe je toch iets verkeerd lijkt me, aangezien de callback pas wordt uitgevoerd als de fadeIn voltooid is. Gooi eens een voorbeeld online, zodat we kunnen zien wat je wilt/hebt.
dit dusquote:
[..]
Volgens mij is het de bedoeling dat je eerst fadeOut krijgt, en daarna pas fadeIn.
edit, heb de gehele code ff op pastebin gezet: http://pastebin.com/zBTDvxd0
[ Bericht 12% gewijzigd door YazooW op 20-07-2011 19:25:23 ]
De volgorde aanpassen zou niet zo moeilijk mogen zijn:
Niet getest, dat mag je zelf doen.
| 1 2 3 | $("#"+divName).fadeOut(1200,function(){ $(this).siblings().fadeIn(1200); }); |
Nu werkt die, thanks!quote:
De volgorde aanpassen zou niet zo moeilijk mogen zijn:
[ code verwijderd ]
Niet getest, dat mag je zelf doen.
Ben pas begonnen met jQuery dus kan zijn dat ik er naast zit:quote:
Eerst stond alles in 1 regel achter elkaar, waardoor hij alles dus in 1x ging runnen.
Nu zijn het 2 regels geworden, hij runt nu eerst de fadeOut, als hij daarmee klaar is begint hij met een functie waarin de fadeIn staat.
Kan zijn dat ik er behoorlijk naast zit, stukje code heb ik ergens van internet geplukt en een beetje aangepast.
Verder heb ik nu weer het probleem dat als ik op link van div1 klikt hij div3 opent, klik op div3 opent hij div1, klik ik op div2 doet die helemaal niks.
Mijn code ziet er nu zo uit:
| 1 2 3 4 5 6 7 8 9 10 11 | <script> $(document).ready(function(){ $('a').click(function () { var divName = this.name; $("#"+divName).fadeOut((1000),function(){ $(this).siblings().show(("slide", 1000)); }); }); }); </script> |
Mijn uiteindelijke einddoel is dit:
<---logo---><---------------menu---------------->
<--menu--><--------------content--------------->
<------------><--------------------------------------->
<------------><--------------------------------------->
<------------><--------------------------------------->
<------------><--------------------------------------->
<------------><--------------------------------------->
<------------------------foooter--------------------->
Als je op de pagina komt zie je dus een logo, een menu links, de content, het menu boven de content moet nog leeg zijn op de beginpagina. Als je vervolgens op een menuitem klikt (linkse menu) dat moet er een div geopent worden rechts van het menu met daarin aan de bovenkant een (sub)menu, en daaronder dan de content.
Voorbeeld:
<---logo---><--appels--peren--bananen-->
<--menu--><-------content over appels----->
<----fruit---><--------------------------------------->
<------------><--------------------------------------->
<------------><--------------------------------------->
<------------><--------------------------------------->
<------------><--------------------------------------->
<------------------------foooter--------------------->
Dus je hebt op fruit geklikt in het menu, vervolgens zie je een (sub)menu bovenaan tevoorschijn komen, en in de content info over appels (omdat appels de eerste link is in het (sub)menu), klik je op peren in het (sub)menu dan moet de content van de appels verdwijnen en plaats maken voor de content van de peren.
Klik je op een ander item in het linkse menu dan moet het (sub)menu (appels, peren, etc) en de content plaats maken voor een nieuwe (sub)menu en content.
Zoals je aan mijn beschrijving kan zien ben ik dus nog wel even bezig dit voor elkaar te krijgen aangezien ik nu niet eens normaal divs kan openen en sluiten... Wil eigenlijk het liefst zo snel mogelijk beginnen mijn CMS te bouwen in php maar ik kan dat jQuery gewoon niet zomaar negeren aangezien het er zo slick uit ziet
Hoi Fok-ers!
Zit met een probleempje, hopelijk weten jullie meer dan ik (waarschijnlijk wel!).
De bedoeling is de illusie te geven dat de header doorloopt achter de witte container, wat op dit screenshot dus gelukt is. Het donkergrijze loopt door achter de content. Browser is trouwens FireFox.
http://imageshack.us/f/818/ss1ob.png/ (copy/paste deze link)
Dit heb ik gedaan der middel van 2 divjes aan beide kanten van de witte container, onder de header. Die heb ik vervolgens een vaste waarde (px) meegegeven zodat ze de margin-left en margin-right van de container opvulden.
Echter, en waar ik al rekening mee hield, in een andere browser past het weer net niet. Zie screenshot:
http://imageshack.us/photo/my-images/823/schermafbeelding2011072v.png/ (copy/paste deze link)
Zoals jullie zien kom ik daar een stukje te kort en is de hele illusie weg. Vervolgens heb ik geprobeerd dmv de z-index de container boven de balk te plaatsen. De balk 100% width gegeven en een z-index van -1. Werkte niet. (Omdat de div's in andere files staan?).
Zijn er nog manieren om dit werkend te krijgen?
Bij voorbaat dank!
Peter.
Zit met een probleempje, hopelijk weten jullie meer dan ik (waarschijnlijk wel!).
De bedoeling is de illusie te geven dat de header doorloopt achter de witte container, wat op dit screenshot dus gelukt is. Het donkergrijze loopt door achter de content. Browser is trouwens FireFox.
http://imageshack.us/f/818/ss1ob.png/ (copy/paste deze link)
Dit heb ik gedaan der middel van 2 divjes aan beide kanten van de witte container, onder de header. Die heb ik vervolgens een vaste waarde (px) meegegeven zodat ze de margin-left en margin-right van de container opvulden.
Echter, en waar ik al rekening mee hield, in een andere browser past het weer net niet. Zie screenshot:
http://imageshack.us/photo/my-images/823/schermafbeelding2011072v.png/ (copy/paste deze link)
Zoals jullie zien kom ik daar een stukje te kort en is de hele illusie weg. Vervolgens heb ik geprobeerd dmv de z-index de container boven de balk te plaatsen. De balk 100% width gegeven en een z-index van -1. Werkte niet. (Omdat de div's in andere files staan?).
Zijn er nog manieren om dit werkend te krijgen?
Bij voorbaat dank!
Peter.
Volgens mij ben je onnodig moeilijk aan het doen. Je kunt die grijze balk toch gewoon als background-color meegeven van je bovenste div, en dan de witte container een negatieve top-margin geven...?
Nee.
Nou. Dan is het nu misschien ook maar eens tijd om wat tussentijdse adviezen/meningen over m'n projectje te ontvangen. Het gaat om een webshopje.
Lastige is dat ik nog niet precies weet wat ik er mee wil doen, misschien verkoop ik 't hele handeltje, misschien ga ik hem zelf gebruiken, en als ik hem zelf ga gebruiken; wat wil ik gaan verkopen? Met het oog op al deze vragen heb ik besloten de shop zo clean mogelijk te maken. Met als prioriteit usability en overzichtelijkheid.
De laatste dagen echter, slaat bij mij de twijfel toe of deze cleane look wel the way to go is. Ik zelf hou er erg van, maar het draait in principe natuurlijk niet om wat ik vind. Daarom graag jullie op- en aanmerkingen. (Niet kijken naar de producten, dat is pure opvulling).
Klik hier.
Thanks!
Lastige is dat ik nog niet precies weet wat ik er mee wil doen, misschien verkoop ik 't hele handeltje, misschien ga ik hem zelf gebruiken, en als ik hem zelf ga gebruiken; wat wil ik gaan verkopen? Met het oog op al deze vragen heb ik besloten de shop zo clean mogelijk te maken. Met als prioriteit usability en overzichtelijkheid.
De laatste dagen echter, slaat bij mij de twijfel toe of deze cleane look wel the way to go is. Ik zelf hou er erg van, maar het draait in principe natuurlijk niet om wat ik vind. Daarom graag jullie op- en aanmerkingen. (Niet kijken naar de producten, dat is pure opvulling).
Klik hier.
Thanks!
Ik ga geen commentaar geven op het design, aangezien daar vast andere topics voor zijn. Wel op je HTML/CSS:
- Tabellen, anno 2011... echt waar?
- Inline styling. Handiger zou zijn om gewoon alles in een CSS-file te zetten, zodat je alles op 1 centraal punt kunt beheren i.p.v. in allemaal losse HTML/PHP bestanden.
- Lees eens wat over semantiek. Lijstjes zoals je footer zouden gewoon geneste UL's/OL's moeten zijn i.p.v. div's met een unieke ID en 5x 99% dezelfde CSS.
- Tabellen, anno 2011... echt waar?
- Inline styling. Handiger zou zijn om gewoon alles in een CSS-file te zetten, zodat je alles op 1 centraal punt kunt beheren i.p.v. in allemaal losse HTML/PHP bestanden.
- Lees eens wat over semantiek. Lijstjes zoals je footer zouden gewoon geneste UL's/OL's moeten zijn i.p.v. div's met een unieke ID en 5x 99% dezelfde CSS.
Nee.
Beste TimD,
Het betreft hier een ondertussen hevig aangepast opensource pakket. Er zitten inderdaad tables in, maar die zijn er niet door mij ingezet. Hoe ik dat kan gaan aanpassen is me onbekend. Gaat dit problemen opleveren / heeft het negatieve consequenties op enig vlak?
Over semantiek ga ik me eens inlezen. Bedankt!
Het betreft hier een ondertussen hevig aangepast opensource pakket. Er zitten inderdaad tables in, maar die zijn er niet door mij ingezet. Hoe ik dat kan gaan aanpassen is me onbekend. Gaat dit problemen opleveren / heeft het negatieve consequenties op enig vlak?
Over semantiek ga ik me eens inlezen. Bedankt!
ik wil graag weten hoe ik mijn footer op de correcte plek positioneer, dus onder de content en niet erboven.
HTML
CSS
Ik neem aan dat het met de float van de menu's te maken heeft in de content div en dat de footer deze als 't ware negeert en gewoon onder de header gaat zitten. Als ik me niet vergis moet ik ergens correct gebruik maken van "clear" maar waar precies? Kan iemand me even helpen?
Hartelijk dank.
HTML
| 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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Portal</title> <link href="style/portal.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <h1>Portal</h1> </div> <!-- HEADER --> <div id="content"> <h2> Opties </h2> <div id="menu1"><h2>Menu 1</h2> </div> <!-- MENU 1 --> <div id="menu2"><h2>Menu 2</h2> </div> <!-- MENU 2 --> <div id="menu3"><h2>Menu 3</h2> </div> <!-- MENU 3 --> <div id="menu4"><h2>Menu 4</h2> </div> <!-- MENU 4 --> <div id="menu5"><h2>Menu 5</h2> </div> <!-- MENU 5 --> <div id="menu6"><h2>Menu 6</h2> </div> <!-- MENU 6 --> <p> Klik op een menu om verder te gaan</p> </div> <!-- CONTENT --> <div id="footer"> <p>Footer</p> </div> <!-- FOOTER --> </body> </html> |
CSS
| 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 67 68 69 70 71 72 73 74 75 76 77 | @charset "utf-8"; /* CSS Document */ body { } #content { width:1000px; background-color:#CCC; position:absolute; left:50%; margin-left:-500px; clear:right; } #menu1 { background-color:#00F; width:300px; height:300px; float:left; margin-right:25px; margin-bottom:25px; margin-left:25px; } #menu2 { background-color:#393; width:300px; height:300px; float:left; margin-right:25px; margin-bottom:25px; } #menu3 { background-color:#966; width:300px; height:300px; float:left; margin-bottom:25px; } #menu4 { background-color:#96F; width:300px; height:300px; float:left; margin-right:25px; margin-left:25px; } #menu5 { background-color:#CF3; width:300px; height:300px; float:left; margin-right:25px; } #menu6 { background-color:#6C3; width:300px; height:300px; float:left; } #header { background-color:#CCC; } #footer { background-color:#CCC; } .clear { clear:both; } |
Ik neem aan dat het met de float van de menu's te maken heeft in de content div en dat de footer deze als 't ware negeert en gewoon onder de header gaat zitten. Als ik me niet vergis moet ik ergens correct gebruik maken van "clear" maar waar precies? Kan iemand me even helpen?
Hartelijk dank.
Sowieso #content niet absoluut positioneren. En er een overflow:hidden aan toe voegen om de float te clearen. Dan ben je al een heel eind gok ik.
Maar dat menu, maak daar nou gewoon even een UL van. Mijn hemel wat kan ik chagrijnig worden van menu's die uit divjes bestaan met unieke ID's met 10x dezelfde CSS.
Maar dat menu, maak daar nou gewoon even een UL van. Mijn hemel wat kan ik chagrijnig worden van menu's die uit divjes bestaan met unieke ID's met 10x dezelfde CSS.
Nee.
Ik zag dat ik je bovenstaande reactie al staan ja. Ik zal eens even kijken wat je er precies mee bedoelt, je moet niet vergeten dat sommige mensen niet op jouw kennis niveau zitten.quote:
Sowieso #content niet absoluut positioneren. En er een overflow:hidden aan toe voegen om de float te clearen. Dan ben je al een heel eind gok ik.
Maar dat menu, maak daar nou gewoon even een UL van. Mijn hemel wat kan ik chagrijnig worden van menu's die uit divjes bestaan met unieke ID's met 10x dezelfde CSS.
Ik waardeer echter wel dat je me probeert naar een ideale manier van schrijven probeert te loodsen hoor.
Ik ga eerst even aanpassen wat je suggereerde en daarna zal ik eens kijken of ik uit de voeten kom met je UL idee. Bedankt alvast.
Na het weghalen van :
Klopt de flow van de pagina inderdaad weer. Maar die code had ik juist gebruikt om de content precies in het midden van de pagina te positioneren. Waarom leverde dit eigenlijk problemen op, en is er een alternatief? Als je me hier antwoord op weet te geven, dan beloof ik je dat ik met UL aan de slag ga
| 1 2 3 4 5 | #content { position:absolute; left:50%; margin-left:-500px; } |
Klopt de flow van de pagina inderdaad weer. Maar die code had ik juist gebruikt om de content precies in het midden van de pagina te positioneren. Waarom leverde dit eigenlijk problemen op, en is er een alternatief? Als je me hier antwoord op weet te geven, dan beloof ik je dat ik met UL aan de slag ga
Het levert problemen op omdat:
a) position:absolute sowieso alleen gebruikt moet worden als het echt noodzakelijk is, om dingen over elkaar te plaatsen bijv.
b) margin-left: -500px zorgt dat je content uit beeld verdwijnt op schermen die geen 1000 pixels breed zijn
En waarom zou je niet gewoon zoals de rest van de hele wereld margin: auto gebruiken als je iets wilt centreren?
a) position:absolute sowieso alleen gebruikt moet worden als het echt noodzakelijk is, om dingen over elkaar te plaatsen bijv.
b) margin-left: -500px zorgt dat je content uit beeld verdwijnt op schermen die geen 1000 pixels breed zijn
En waarom zou je niet gewoon zoals de rest van de hele wereld margin: auto gebruiken als je iets wilt centreren?
Position:absolute zorgt er voor dat je element uit de flow van de pagina wordt gehaald (en daardoor dus geen ruimte meer in neemt) en wordt gepositioneerd a.d.h.v. de eerste gepositioneerde parent (in dit geval je body). Hierdoor schuiven de andere elementen (in dit geval je footer) naar boven.
Als je content "margin:0 auto;" geeft zou ie weer keurig in het midden moeten staan.
Als je content "margin:0 auto;" geeft zou ie weer keurig in het midden moeten staan.
Nee.
Geen idee waarom ik dat niet gebruikt heb, maar dat zal ik vanaf nu dus gaan toepassen. Nu staat alles zoals ik het wil, dan nu op naar je andere suggestie.
Is dit een beetje in de richting die je bedoelt? En als ik nu een Li aparte eigenschappen wil geven, dan daarvoor id aanmaken?
| 1 2 3 4 5 6 7 8 9 10 11 | ul { } li { background-color:#39F; list-style:none; width:200px; height:200px; margin:25px; float:left; } |
| 1 2 3 4 5 6 7 8 9 10 11 12 | <div id="content"> <h2> Opties </h2> <ul> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> <li>Menu 4</li> <li>Menu 5</li> <li>Menu 6</li> </ul> <p class="clear"> Klik op een menu om verder te gaan</p> </div> <!-- CONTENT --> |
Is dit een beetje in de richting die je bedoelt? En als ik nu een Li aparte eigenschappen wil geven, dan daarvoor id aanmaken?
Dat lijkt er al meer op ja. Ik zou in dit geval gebruik maken van classes om de li's een unieke achtergrond te geven, of natuurlijk een hendig sjieke :nth-child-selector. ID's gebruik ik eigenlijk nooit op losse elementen als li's, ik gebruik het alleen voor unieke componenten op een pagina (bijv. #navigation, #search etc), zodat je er ook naar toe kunt linken (index.html#search) - wat voor m.n. accessibility van belang is.
Nee.
Hopelijk hebben jullie nog energie voor 1 vraag van mij want ik blijf toch moeite hebben met positionering blijkbaar, ik ben nog even in de boeken gedoken maar ik kom er toch niet uit:
Ik wil de <li> mooi in het midden gepositioneerd hebben. Nu is er rechts meer marge dan links.
Is er nog een makkelijke manier om het automatisch uit te lijnen of moet ik gewoon precies uitmeten hoeveel pixels er vrij zijn links en rechts en dan de marge bijstellen?
De code:
Ik wil de <li> mooi in het midden gepositioneerd hebben. Nu is er rechts meer marge dan links.
Is er nog een makkelijke manier om het automatisch uit te lijnen of moet ik gewoon precies uitmeten hoeveel pixels er vrij zijn links en rechts en dan de marge bijstellen?
De code:
| 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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Portal</title> <link href="style/portal.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <h1>Portal</h1> </div> <!-- HEADER --> <div id="navigatie"> <h3>navigatie></h3> </div> <div id="content"> <h2> Opties </h2> <ul> <li><h3>Menu 1</h3></li> <li><h3>Menu 2</h3></li> <li><h3>Menu 3</h3></li> <li><h3>Menu 4</h3></li> <li><h3>Menu 5</h3></li> <li><h3>Menu 6</h3></li> </ul> <p class="clear"> Klik op een menu om verder te gaan</p> </div> <!-- CONTENT --> <div id="footer"> <p>Footer</p> </div> <!-- FOOTER --> </body> </html> |
| 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 | @charset "utf-8"; /* CSS Document */ body { } #content { width:1000px; background-color:#CCC; margin:0 auto; } #content h3 { text-align:center } ul { margin:0 auto; padding:0; } li { background-color:#39F; list-style:none; width:270px; height:270px; margin:20px; float:left; } #header { background-color:#CCC; } #footer { background-color:#CCC; } .clear { clear:both; } |
Laat ze niet floaten, dan kun je gewoon text-align:center (of justify) gebruiken op je parent.
Gebruik display:inline (of inline-block) om ze naast elkaar te krijgen
Gebruik display:inline (of inline-block) om ze naast elkaar te krijgen
Bedankt, een hele simpele oplossing. Die floats stamde nog af van mijn div oplossing, ik wist wel dat die de boosdoeners waren eigenlijk.quote:
Laat ze niet floaten, dan kun je gewoon text-align:center (of justify) gebruiken op je parent.
Gebruik display:inline (of inline-block) om ze naast elkaar te krijgen
Dat blijft toch nog wel het probleem voor mij met CSS, als ik mensen suggesties hoor geven dan klinkt het heel logisch maar om er zelf op te komen tijdens het schrijven van de code is gewoon erg lastig. Hoe dan ook, stapje voor stapje leer ik wel
Heel erg bedankt in elk geval, nu tijd om verder te schetsen.
Help, m'n uploadify scriptje geeft een bericht weer, maar ik kan er geen afbeelding inkrijgen!!
Dit is de output:
En dit is m'n script
Dit is de output:
| 1 | 11 bestand(en) geupload, 0 fouten. <img src="/include/images/loader_small.gif" />Het laden van de volgende pagina kan erg lang duren afhankelijk van het aantal afbeeldingen. |
En dit is m'n script
| 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 | <script type="text/javascript"> $(function() { $('#custom_file_upload').uploadify({ 'uploader' : '/include/uploadify/uploadify.swf', 'script' : '/afbeelding_upload.php', 'cancelImg' : '/include/uploadify/cancel.png', 'multi' : true, 'auto' : true, 'fileExt' : '*.jpg;*.gif;*.png', 'fileDesc' : 'Afbeeldingen (.JPG, .GIF, .PNG)', 'queueID' : 'custom-queue', 'buttonText' : 'Toevoegen', 'queueSizeLimit' : 20, 'simUploadLimit' : 2, 'removeCompleted': false, 'scriptData' : {'klantid':'#KLANTID'}, 'onSelectOnce' : function(event,data) { $('#status-message').text('Een ogenblik geduld...bestanden worden geupload.'); }, 'onAllComplete' : function(event,data) { $('#status-message').text(data.filesUploaded + ' bestand(en) geupload, ' + data.errors + ' fouten. <img src="/include/images/loader_small.gif" />Het laden van de volgende pagina kan erg lang duren afhankelijk van het aantal afbeeldingen.'); document.location.href = '/afbeelding_toevoegen_process.php?kid=#KLANTID'; } }); }); </script> |
IE9 valt me hard mee tot nu toe. En IE7/8... ach... pixelperfect ga ik niet eens proberen en gelukkig kun je veel fixen met conditional comments.quote:
ontwikkelen in moderne browsers is echt leuk, trouwens
hou me vast als ik straks IE7/8/9 ga proberen
Zolang je IE6 niet hoeft te ondersteunen vind ik het ook allemaal wel meevallen. IE7 heeft af en toe wat moeite met z-indexen e.d. - maar over het algemeen valt er best voor te ontwikkelen.
Nee.
Ik heb het afgelopen jaar geen enkele website afgeleverd met IE6-support en ik heb er 0 klanten over horen klagen.
Het ligt ook aan je doelgroep... op m'n werk moet IE6 wel ondersteund worden, omdat het bij onze doelgroep (ziekenhuizen) nog te veel wordt gebruikt.quote:
Ik heb het afgelopen jaar geen enkele website afgeleverd met IE6-support en ik heb er 0 klanten over horen klagen.
Grappig dat je dat zegt, want letterlijk de enige keer dat ik ermee werd geconfronteerd dat een site die ik had gebouwd niet goed werkt in IE6 was toen ik iemand in het ziekenhuis bezocht. De patienten daar hebben een soort touchscreen computerterminal waarop ze spelletjes kunnen doen en kunnen internetten en jawel hoor, op dat gare ding stond IE6 en dus deed m'n site het niet goedquote:
[..]
Het ligt ook aan je doelgroep... op m'n werk moet IE6 wel ondersteund worden, omdat het bij onze doelgroep (ziekenhuizen) nog te veel wordt gebruikt.
Best kans dat (bijna) alle computers in dat ziekenhuis nog IE6 draaiden. En dat ze dat nog steeds doen, want upgraden is gevaarlijk en risicovol enzo. En de IE6-only apps doen het dan waarschijnlijk niet meer meer, da's ook lastig...quote:
[..]
Grappig dat je dat zegt, want letterlijk de enige keer dat ik ermee werd geconfronteerd dat een site die ik had gebouwd niet goed werkt in IE6 was toen ik iemand in het ziekenhuis bezocht. De patienten daar hebben een soort touchscreen computerterminal waarop ze spelletjes kunnen doen en kunnen internetten en jawel hoor, op dat gare ding stond IE6 en dus deed m'n site het niet goed
En applicaties die alleen met IE6 werken, zijn ondertussen ook zodanig verouderd dat ze dringend vervangen moeten worden. Liever nog gisteren dan vandaag.
Mij is eens verteld dat het EPD (ook zo'n handig Haagsch idee) alleen werkt in IE6. Of het waar is, weet ik niet. Maar als het waar is, mogen ze wmb iedereen die eraan heeft meegewerkt opknopen.
Mij is eens verteld dat het EPD (ook zo'n handig Haagsch idee) alleen werkt in IE6. Of het waar is, weet ik niet. Maar als het waar is, mogen ze wmb iedereen die eraan heeft meegewerkt opknopen.
waarom vervangen als het werkt..quote:
En applicaties die alleen met IE6 werken, zijn ondertussen ook zodanig verouderd dat ze dringend vervangen moeten worden. Liever nog gisteren dan vandaag.
Mij is eens verteld dat het EPD (ook zo'n handig Haagsch idee) alleen werkt in IE6. Of het waar is, weet ik niet. Maar als het waar is, mogen ze wmb iedereen die eraan heeft meegewerkt opknopen.
onze apothekers (pas hebben we moeten wisselen van apotheek)
draaien ook nog een of ander dos programma op XP
Omdat het om gegevens gaat die niet alleen nu beschikbaar moeten zijn, maar waarvan ook gegarandeerd moet worden dat ze in de toekomst beschikbaar zijn.quote:
Onderhoudbaarheid, nieuwe inzichten (zowel van de bouwers als van de gebruikers), platformonafhankelijkheid. Zo'n dos programma in XP is leuk, maar er komt een moment dat dos programma's niet meer werken in Windows. En er komt een moment dat XP (inmiddels ook 10 jaar oud) helemaal niet meer ondersteund wordt. Windows 7 kan standaard niet meer overweg met dos programma's (er zijn in sommige gevallen workarounds).quote:
[..]
waarom vervangen als het werkt..
onze apothekers (pas hebben we moeten wisselen van apotheek)
draaien ook nog een of ander dos programma op XP
