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.
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:Op zaterdag 9 juli 2011 12:40 schreef KomtTijd... het volgende:
[..]
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:Op zaterdag 9 juli 2011 12:38 schreef Tijn het volgende:
[..]
Maar dan hebben de middelste 3 elementen dus helemaal geen label-tekst meer. Dat lijkt me accessibility-wise nou niet echt ideaal, of wel?
Bleuh.
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:Op zaterdag 9 juli 2011 12:44 schreef PimD het volgende:
[..]
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
Bleuh.
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
Bleuh.
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.
Bleuh.
vooral ook touchpad-proof. Dat waardeer ik welquote:Op zaterdag 9 juli 2011 13:03 schreef Tijn het volgende:
[..]
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.
Bleuh.
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
Bleuh.
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...
Bleuh.
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
Dan nog zit je met 2 libraries door elkaar heen te werken. Niet wenselijk.
Op dinsdag 13 augustus schreef Xa1pt:
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.
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 ]
Bleuh.
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.
Bleuh.
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...?
Bleuh.
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.
Bleuh.
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.
Bleuh.
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.
Bleuh.
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.
Bleuh.
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.
Bleuh.
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
het front-end maakt dan niet uit.. dan moet de data goed opgeslagen worden... (en gedocumenteerd worden hoe deze opslag inelkaar steekt..quote:
[..]
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.
Wat zeg je dan tegen de gebruikers die in de toekomst bij de data moeten die nu alleen beschikbaar zijn via een IE6-only applicatie? Dat alle data beschikbaar is en dat ze alleen maar even een nieuwe frontend hoeven te schrijven?quote:
[..]
het front-end maakt dan niet uit.. dan moet de data goed opgeslagen worden... (en gedocumenteerd worden hoe deze opslag inelkaar steekt..
nee, je levert een werkende machine op met IE6, simpel as that..quote:Op zondag 31 juli 2011 00:45 schreef Tijn het volgende:
[..]
Wat zeg je dan tegen de gebruikers die in de toekomst bij de data moeten die nu alleen beschikbaar zijn via een IE6-only applicatie? Dat alle data beschikbaar is en dat ze alleen maar even een nieuwe frontend hoeven te schrijven?
Ah, je levert als webdeveloper ook hardware tegenwoordig?quote:
[..]
nee, je levert een werkende machine op met IE6, simpel as that..
Maar dan nog: het gaat om de toekomst, he. Support voor XP loopt al op z'n eind en MS is zelf IE6 ook liever kwijt dan rijk. Dus hoe ga je over pak-em-beet 10 jaar een systeem versieren waar nog IE6 op draait? En belangrijker: vind je dat echt een betere oplossing dan nu zorgen dat je IE6-applicatie langzamerhand ook toegankelijk wordt gemaakt voor andere browsers zodat je in de toekomst zulke kunstgrepen niet uit hoeft te halen?
Sowieso is een browser-specifieke webapplicatie natuurlijk te belachelijk voor woorden. Veel haakser op het concept van het web kun je niet staan. Als je toch alleen maar een enkele browser ondersteunt, ontwikkel dan liever helemaal geen webapplicatie en lever gewoon een native app aan. Dan verwacht ten minste ook niemand dat het cross platform is.
Zo lang niet meer voor IE ontwikkeld dat ik totaal ben vergeten wat de trucs ook alweer waren
“Specialization is for insects”.—Robert Heinlein
http://webwereld.nl/nieuw(...)ernet-explorer-.htmlquote:Op zaterdag 30 juli 2011 23:41 schreef Tijn het volgende:
Je zou zeggen dat juist IE6 blijven gebruiken gevaarlijk is. Maar goed, dat is mijn mening
Ik gebruik overigens Opera
Even een relatief simpel html/css-vraagje, maar ik krijg het niet voor elkaar:
Ik heb een <DIV> waarbinnen de inhoud van mijn pagina komt. Nu wil ik op een vaste positie rechts een blokje plaatsen, bij voorkeur ook een DIV.
Echter, de tekst gaat dwars door mijn DIV heen, en wordt er niet omheen geplaatst.
Heeft iemand een idee hoe ik dat voor elkaar krijg?
Hieronder de vereenvoudigde code (CSS heb ik er hier rechtstreeks in opgenomen).
Ik heb een <DIV> waarbinnen de inhoud van mijn pagina komt. Nu wil ik op een vaste positie rechts een blokje plaatsen, bij voorkeur ook een DIV.
Echter, de tekst gaat dwars door mijn DIV heen, en wordt er niet omheen geplaatst.
Heeft iemand een idee hoe ik dat voor elkaar krijg?
Hieronder de vereenvoudigde code (CSS heb ik er hier rechtstreeks in opgenomen).
| 1 2 3 4 5 6 7 8 9 10 11 12 | <DIV style="width:400px; position: relative; border:1px solid;"> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test <div style="width:100px;height:100px;top:50px;right:0px; position: absolute; border:2px solid;display:inline;"></div> </div> |
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.
Als je dingen absoluut positioneert gaat de tekst er niet om heen nee, daarvoor moet je gebruik maken van floats.
Bleuh.
Wat bedoel je nu, wat wil je precies en welke code heb je al???quote:
css, heb mn naam rood, nu wil ik nog graag een tag
Tnx PimD, float:right icm margin-top is wat ik zocht.
DIV's kunnen je zo frustreren als ze niet precies doen wat je verwacht.
DIV's kunnen je zo frustreren als ze niet precies doen wat je verwacht.
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.
In plaats van teksten als "test test test test test" kun je trouwens beter Lorem Ipsum gebruiken. Dat ziet er veel meer uit als echte tekst en is dus beter testmateriaal.
Ja dat klopt, maar het was meer ter illustratie van wat het probleem was. Op de website waar het om gaat, staat al inhoudelijke tekst.quote:
In plaats van teksten als "test test test test test" kun je trouwens beter Lorem Ipsum gebruiken. Dat ziet er veel meer uit als echte tekst en is dus beter testmateriaal.
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.
Nu was ik een simpele website aan het aanpassen in het CMS en heb ik iets verneukt. Er stond een simpele tekst met daaronder een hyperlink. Zodra je daarop klikte klapte eronder een stuk tekst uit.
Ik had het stuk tekst aangepast maar nu als ik die pagina bezoek staat alles reeds uitgeklapt. Hoe kan ik ervoor zorgen dat ie initieel weer verborgen is.
Ik had het stuk tekst aangepast maar nu als ik die pagina bezoek staat alles reeds uitgeklapt. Hoe kan ik ervoor zorgen dat ie initieel weer verborgen is.
Misschien een beetje brede vraag, maar weet anders ook niet of wat ik er anders achter ga komen.
Wat kunnen redenen zijn dat wanneer ik een CSS gebruik, hij wel bepaalde aspecten overneemt maar niet alles en dit alleen bij bepaalde tpl's?
Het zit zo. Ik ben bezig met een applicatie waar ik nu een CSS voor heb gemaakt.
Sommige pagina's pakt hij perfect, dus mooie achtergrond, goede lettertype en grootte enzo. Maar andere pagina's heeft hij wel de actergrond, maar zijn de letters enorm vergroot.
Als ik dan kijk met F12 in Explore dan herkent ie wel de lettertype en grootte die de CSS hem geeft.
Heb gekeken of alle heads/body's/tables goed worden afgesloten en dat is in het betreffende geval gebeurd.
Iemand enig idee waar ik het misschien anders in kan zoeken?
edit: heb even gekeken in google chrome. daarin doet hij 1 verkeerde pagina wel goed. Maar enkele andere verkeerde ook verkeerd.
[ Bericht 7% gewijzigd door Cue_ op 10-08-2011 13:57:05 ]
Wat kunnen redenen zijn dat wanneer ik een CSS gebruik, hij wel bepaalde aspecten overneemt maar niet alles en dit alleen bij bepaalde tpl's?
Het zit zo. Ik ben bezig met een applicatie waar ik nu een CSS voor heb gemaakt.
Sommige pagina's pakt hij perfect, dus mooie achtergrond, goede lettertype en grootte enzo. Maar andere pagina's heeft hij wel de actergrond, maar zijn de letters enorm vergroot.
Als ik dan kijk met F12 in Explore dan herkent ie wel de lettertype en grootte die de CSS hem geeft.
Heb gekeken of alle heads/body's/tables goed worden afgesloten en dat is in het betreffende geval gebeurd.
Iemand enig idee waar ik het misschien anders in kan zoeken?
edit: heb even gekeken in google chrome. daarin doet hij 1 verkeerde pagina wel goed. Maar enkele andere verkeerde ook verkeerd.
[ Bericht 7% gewijzigd door Cue_ op 10-08-2011 13:57:05 ]
eerst alle pagina's hard refreshen (ctrl+F5).
Dan kijken of je meerdere stylesheets hebt of inline style met hogere specificity.
Dan kijken of je meerdere stylesheets hebt of inline style met hogere specificity.
Explore helemaal herstart, ook hard refreshes helpen niet.quote:
eerst alle pagina's hard refreshen (ctrl+F5).
Dan kijken of je meerdere stylesheets hebt of inline style met hogere specificity.
Verder gebruik ik geen inline styles (ja wel beetje, maar heeft te maken met kolombreedtes, en die ziet hij ook wel gewoon)
Al ik in het F12 menu de CSS uitschakel, veranderd hij wel. Dus hij ziet opzich wel de koppeling met de CSS. Alleen niet zoals aangegeven
[ Bericht 12% gewijzigd door Cue_ op 10-08-2011 14:39:14 ]
Blijkbaar heb je gewoon een andere stijl ergens gedefinieerd met hogere specificiteit dus.quote:
Hmm.. als ik een aparte class maak voor de <td> en <tr> van de tabel. dan doet hij het wel goed
ik heb een foto-pagina gemaakt voor mn site
het vervelende is dat er staande en liggende foto's zijn gemaakt, een erg rommelige opmaak krijg ik dan dus.
Ik had 2 oplossingen gezien:
1) Uit alle foto's een vierkant nemen, dus niet schalen maar een stuk afknippen van zijkant of bovenkant zodat alle foto's gelijk van grote zijn. Dit lijkt me het mooiste maar ik wil niet alle foto's gaan bewerken. Kan dit met een css of php trucje..
Dit heeft mijn voorkeur maar ik denk dat het lastig is..dus
2) Om elke foto een vierkantje zetten met de breedte van een ligggende foto en de hoogte van een staande foto.
Hoe ga ik dat aanpakken? Iemand suggesties?
het vervelende is dat er staande en liggende foto's zijn gemaakt, een erg rommelige opmaak krijg ik dan dus.
Ik had 2 oplossingen gezien:
1) Uit alle foto's een vierkant nemen, dus niet schalen maar een stuk afknippen van zijkant of bovenkant zodat alle foto's gelijk van grote zijn. Dit lijkt me het mooiste maar ik wil niet alle foto's gaan bewerken. Kan dit met een css of php trucje..
Dit heeft mijn voorkeur maar ik denk dat het lastig is..dus
2) Om elke foto een vierkantje zetten met de breedte van een ligggende foto en de hoogte van een staande foto.
Hoe ga ik dat aanpakken? Iemand suggesties?
zoiets had ik ook al bedachtquote:
Ik zou voor optie twee gaan. En dan wel 'onzichtbaar' vierkant tov de achtergrond.
hoe kan ik dat slim aanpakken? want ik wil niet aan elke foto apart een class oid gaan hangen. Niet erg voor 1x maar niet als ik redelijk foto's ga uploaden.
Sowieso iemand een goed voorbeeld van een goede opmaak+script voor een slideshow fotopagina?
Ik heb nu een overzichtspagina, met thumbs, als je daarop klikt krijg je een grotere foto die je door kan klikken naar de volgende foto
ik ben nu een beetje aan het pielen maar volgens mij kan niet wat ik wil
is het mogelijk om de border of vierkantje om een staande EN liggende foto evengroot te krijgen.
een border voegt een rand toe aan de foto
ik heb ze maar geschaalt...niet zo mooi..maar wel snel resultaat
nog een vraag
ik ben op zoek naar een icoon voor een mapje foto's
op een android telefoon zag ik een icoon wat zogenaamd een stapeltje foto's was
waarbij de eerste foto in het mapje, de bovenste van de stapel is
kent iemand zo'n icoon??
zelf maken kan altijd nog..maar als het al bestaat das natuurlijk makkelijker
[ Bericht 44% gewijzigd door MrNiles op 11-08-2011 13:32:09 ]
is het mogelijk om de border of vierkantje om een staande EN liggende foto evengroot te krijgen.
een border voegt een rand toe aan de foto
ik heb ze maar geschaalt...niet zo mooi..maar wel snel resultaat
nog een vraag
ik ben op zoek naar een icoon voor een mapje foto's
op een android telefoon zag ik een icoon wat zogenaamd een stapeltje foto's was
waarbij de eerste foto in het mapje, de bovenste van de stapel is
kent iemand zo'n icoon??
zelf maken kan altijd nog..maar als het al bestaat das natuurlijk makkelijker
[ Bericht 44% gewijzigd door MrNiles op 11-08-2011 13:32:09 ]
http://www.iconarchive.com/ is misschien wat voor jou.quote:
ik ben op zoek naar een icoon voor een mapje foto's
op een android telefoon zag ik een icoon wat zogenaamd een stapeltje foto's was
waarbij de eerste foto in het mapje, de bovenste van de stapel is
kent iemand zo'n icoon??
zelf maken kan altijd nog..maar als het al bestaat das natuurlijk makkelijker
Wat zijn je opties als je voor bepaalder koppen en navigatie een font wilt gebruiken wat geen webfont is? Uiteraard kan ik het slicen uit photoshop, maar is er een standaard methode om de gebruiker toch de tekst te laten zien in de font die je wilt gebruiken? Dat is veel fijner als je nieuwe content wilt maken namelijk.
@font-facequote:
Wat zijn je opties als je voor bepaalder koppen en navigatie een font wilt gebruiken wat geen webfont is? Uiteraard kan ik het slicen uit photoshop, maar is er een standaard methode om de gebruiker toch de tekst te laten zien in de font die je wilt gebruiken? Dat is veel fijner als je nieuwe content wilt maken namelijk.
kun je alle lettertypes gebruiken
lettertype zet je bij je css files
Fijn ga ik me even in verdiepen, mijn dank is groot.quote:
[..]
@font-face
kun je alle lettertypes gebruiken
lettertype zet je bij je css files
tis heel simpelquote:
[..]
Fijn ga ik me even in verdiepen, mijn dank is groot.
je zit zoiets in je css
@font-face {
font-family: Eroded;
src: url('28days.ttf');
}
en in je class/div van je waar je je lettertype wilt hebben zet je iets van
font-family: Eroded
je moet het lettertype wel uitgepakt op je server hebben staan
Zo simpel als MrNiles het schetst is het niet. (Bijna) iedere browser verwacht een ander font: voor IE6 e.d. heb je een EOT-file nodig etc. Ik zou gewoon gebruik maken van www.fontsquirrel.com - dat werkt over het algemeen verdomd goed, hoewel je natuurlijk gauw tegen problemen met licenties aan kunt lopen.
[ Bericht 10% gewijzigd door PimD op 11-08-2011 17:52:35 ]
[ Bericht 10% gewijzigd door PimD op 11-08-2011 17:52:35 ]
Bleuh.
hmm..quote:
Zo simpel als MrNiles het schetst is het niet. (Bijna) iedere browser verwacht een ander font: voor IE6 e.d. heb je een EOT-file nodig etc. Ik zou gewoon gebruik maken van www.fontsquirrel.com - dat werkt over het algemeen verdomd goed.
Ik was ook al aan het stoeien want ik had een .otf bestand bij mijn font en Chrome kon de pagina niet weergeven. Ik dacht dat ik het misschien verkeerd gecodeerd had of dat ik een .ttf moest vinden maar dat lukt me nog niet.
En op fontsquirrel is mijn font ook niet te vinden. Hé vervelend, maar ik ga die site wel even doorbladeren, misschien is er een vergelijkbaar font.
Google heeft een vrij chille fontservice, je selecteert bij hen de fonts die je wilt gebruiken. Krijgt een @-import regel die je aan het begin van je css-bestand zet en je hoeft alleen nog de naam tussen quotaties te zetten.
http://www.google.com/webfonts
http://www.google.com/webfonts
“Specialization is for insects”.—Robert Heinlein
Dit werkt in elk geval erg gemakkelijk, niet precies het juiste font gevonden maar dan maar even genoegen nemen met iets minder. Wel heel fijn, niks installeren en maar 1 regel in de header en klaar! Super tip. Ga ik straks nog even die andere opties bekijken want enige nadeel is dat je vast zit aan de fonts van google, wel 200+ stuks weliswaar maar toch..quote:
Google heeft een vrij chille fontservice, je selecteert bij hen de fonts die je wilt gebruiken. Krijgt een @-import regel die je aan het begin van je css-bestand zet en je hoeft alleen nog de naam tussen quotaties te zetten.
http://www.google.com/webfonts
http://shiftingpixel.com/2008/03/03/smart-image-resizer/quote:
[..]
zoiets had ik ook al bedacht
hoe kan ik dat slim aanpakken? want ik wil niet aan elke foto apart een class oid gaan hangen. Niet erg voor 1x maar niet als ik redelijk foto's ga uploaden.
Sowieso iemand een goed voorbeeld van een goede opmaak+script voor een slideshow fotopagina?
Ik heb nu een overzichtspagina, met thumbs, als je daarop klikt krijg je een grotere foto die je door kan klikken naar de volgende foto
combineer met lightbox ofzo et voilla.
Is wel een nadeel inderdaad, ze moeten het hebben van de licentievrije fonts, worden er vast gestaag meerquote:
[..]
Dit werkt in elk geval erg gemakkelijk, niet precies het juiste font gevonden maar dan maar even genoegen nemen met iets minder. Wel heel fijn, niks installeren en maar 1 regel in de header en klaar! Super tip. Ga ik straks nog even die andere opties bekijken want enige nadeel is dat je vast zit aan de fonts van google, wel 200+ stuks weliswaar maar toch..
“Specialization is for insects”.—Robert Heinlein
ow, ik dacht dat dit css3 common was, crossbrowser enzoquote:
Zo simpel als MrNiles het schetst is het niet. (Bijna) iedere browser verwacht een ander font: voor IE6 e.d. heb je een EOT-file nodig etc. Ik zou gewoon gebruik maken van www.fontsquirrel.com - dat werkt over het algemeen verdomd goed, hoewel je natuurlijk gauw tegen problemen met licenties aan kunt lopen.
maar tis maar wat ik lees op andere pagina's
deze geeft wel veel info erover
http://randsco.com/index.php/2009/07/04/p680
Een onwijze noob vraag, maar ik moet hem toch stellen ;-)
Ik heb een output van een java script. Is het mogelijk om op basis van de output een style toe te wijzen?
Ik heb een output van een java script. Is het mogelijk om op basis van de output een style toe te wijzen?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | { sitePreset: 'site-dashboard', shortName: 'test', title: 'test', description: 'Dit is een test', isFavourite: true, isSiteManager: true }, |
Inorbit: zeg dat dan typluie triangeljosti
Beauregard: Een beetje FOK!ker laat het brood door z'n moeder smeren.
Ecosia
ek's 'n flash drive, jy's 'n floppy
Beauregard: Een beetje FOK!ker laat het brood door z'n moeder smeren.
Ecosia
ek's 'n flash drive, jy's 'n floppy
Zoiets?
Wellicht moet je nog wel even filteren maar het werkt prima.
Functie kan je natuurlijk overal vandaan aanroepen.
Edit; wel jquery als dat geen probleem is.
| 1 2 3 4 5 | <a href='#' onclick='functietje("test");'>Verander stijl</a><br> function functietje(e) { $('link').attr('href',e+'.css'); } |
Functie kan je natuurlijk overal vandaan aanroepen.
Edit; wel jquery als dat geen probleem is.
ik denk dat ik iets vollediger moet zijn ;-)quote:
Zoiets?
[ code verwijderd ]
Wellicht moet je nog wel even filteren maar het werkt prima.
Functie kan je natuurlijk overal vandaan aanroepen.
Edit; wel jquery als dat geen probleem is.
dit is het stuk script:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script type="text/javascript">//<![CDATA[ new Alfresco.dashlet.MySites("${args.htmlid}").setOptions( { imapEnabled: ${imapServerEnabled?string}, sites: [ <#if sites??> <#list sites as site> { sitePreset: '${site.sitePreset?js_string}', shortName: '${site.shortName?js_string}', title: '${site.title?js_string}', description: '${site.description?js_string}', isFavourite: ${site.isFavourite?string}, <#if imapServerEnabled>isIMAPFavourite: ${site.isIMAPFavourite?string},</#if> isSiteManager: ${site.isSiteManager?string} }<#if (site_has_next)>,</#if> </#list> </#if> |
dus de uitvoer in de browser is
| 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 | <div id="page_x002e_component-1-2_x002e_user_x007e_admin_x007e_dashboard"> <script type="text/javascript">//<![CDATA[ new Alfresco.dashlet.MySites("page_x002e_component-1-2_x002e_user_x007e_admin_x007e_dashboard").setOptions( { imapEnabled: false, sites: [ { sitePreset: 'site-dashboard', shortName: 'test', title: 'test', description: '', isFavourite: true, isSiteManager: true }, { sitePreset: 'site-dashboard', shortName: 'test2', title: 'test2', description: '', isFavourite: true, isSiteManager: true } |
en wil ik op basis van de 'title' een css style definiėren. dus voor title x (test1) een background image (test1.png)
voor test2 -> test2.png enz.
Ik besef me dat ik zodra ik een nieuwe site aanmaak ik ook de css moet updates met een nieuwe class voor de desbetreffende title, maar het aantal opties zijn beperkt, dus dat heb ik er wel voor over ;-)
zou dat mogelijk zijn?
en e.e.a. is gelinkt met my-sites.css
Inorbit: zeg dat dan typluie triangeljosti
Beauregard: Een beetje FOK!ker laat het brood door z'n moeder smeren.
Ecosia
ek's 'n flash drive, jy's 'n floppy
Beauregard: Een beetje FOK!ker laat het brood door z'n moeder smeren.
Ecosia
ek's 'n flash drive, jy's 'n floppy
tuurlijk kun je gewoon met [title=test1] {background-image:url('test1.png'); werken, maar de vraag is of je dan niet de title-tag aan het misbruiken bent,.. Waarom niet gewoon een classname toevoegen?
ik zou wel willen, maar weet niet waar ik dat moet doen, in het stukje javescript?quote:
tuurlijk kun je gewoon met [title=test1] {background-image:url('test1.png'); werken, maar de vraag is of je dan niet de title-tag aan het misbruiken bent,.. Waarom niet gewoon een classname toevoegen?
Inorbit: zeg dat dan typluie triangeljosti
Beauregard: Een beetje FOK!ker laat het brood door z'n moeder smeren.
Ecosia
ek's 'n flash drive, jy's 'n floppy
Beauregard: Een beetje FOK!ker laat het brood door z'n moeder smeren.
Ecosia
ek's 'n flash drive, jy's 'n floppy
...lees de documentatie?quote:
[..]
ik zou wel willen, maar weet niet waar ik dat moet doen, in het stukje javescript?
Het is duidelijk een soortement library/plugin waar dit stukje code gebruik van maakt.
Ugh okay, eerst content dan. Ik wilde gewoon even weten of ik hier de logische namen had gekozen.
Misschien even geduldig wachten op mijn boeken.
[ Bericht 97% gewijzigd door TheSeeker_NL op 25-08-2011 12:23:46 ]
Misschien even geduldig wachten op mijn boeken.
[ Bericht 97% gewijzigd door TheSeeker_NL op 25-08-2011 12:23:46 ]
