anoniem Geplaatst: 4 augustus 2003 Auteur Delen Geplaatst: 4 augustus 2003 [url=http://www.allmyfaqs.com/faq.pl?AnySizeDesign]AnySizeDesign[/url] geeft de nodige tips en links over het geschikt maken van webpagina's voor verschillende browsers en schermresoluties. Ook weer veel nadruk op CSS technieken. De pagina is onderdeel van [url=http://www.allmyfaqs.com/faq.pl?HomePage]All My FAQs[/url], waarin je nog veel meer nuttige tips op webdesign gebied vindt. Of het allemaal 'best practices' zijn is de vraag, maar handig is het zeker. Quote Link naar reactie
anoniem Geplaatst: 4 augustus 2003 Auteur Delen Geplaatst: 4 augustus 2003 Het boek van Joe Clark: Building Accessible Websites is online gezet: http://joeclark.org/book/sashay/serialization/ Quote Link naar reactie
anoniem Geplaatst: 17 september 2003 Auteur Delen Geplaatst: 17 september 2003 [size=9:6db4fbc381]KICK[/size:6db4fbc381] http://www.simplebits.com/tips/simplequiz/ [i:6db4fbc381]Quizen over correct markup, erg interessant.[/i:6db4fbc381] http://simon.incutio.com/categories/csstutorial/ http://simon.incutio.com/categories/markup/ http://www.stopdesign.com/log/category/css/ [i:6db4fbc381]Anders interessante posts over markup & style {(x)html + css} en niet al te moeilijk.[/i:6db4fbc381] Quote Link naar reactie
anoniem Geplaatst: 17 september 2003 Auteur Delen Geplaatst: 17 september 2003 Een site in aanbouw, maar belooft interessant te worden: http://stijlstek.nl Quote Link naar reactie
anoniem Geplaatst: 28 september 2003 Auteur Delen Geplaatst: 28 september 2003 Voor de CSS mensen: http://www.designdetector.com/articles/results.html Ik heb er net een tijdje rondgekeken en het ziet goed uit, nou ja, niet zo goed voor IE wimb Quote Link naar reactie
anoniem Geplaatst: 6 oktober 2003 Auteur Delen Geplaatst: 6 oktober 2003 [url=http://www.bigbaer.com/css_tutorials/]Nog meer leuke en interessante CSS tutorials.[/url] Ze laten o.a. mooi zien dat CSS [url=http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm]helemaal niet saai hoeft te zijn[/url]. Ik heb er even vluchtig met IE 5.5 naar gekeken en zelfs dat werkt nog behoorlijk, maar als je het Dido plaatje wilt zien die in de mouse-overs op [url=http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm]deze pagina (float tutorial, zeer leerzaam)[/url] is verstopt (wel een beetje irritant, maar leuke gimmick) moet je toch maar weer gewoon Mozilla gebruiken. ;) Quote Link naar reactie
anoniem Geplaatst: 9 oktober 2003 Auteur Delen Geplaatst: 9 oktober 2003 Ik vond dit wel even een grappig intermezzo: [quote:ce82656b2b]Quite randomly, found out that when coding HTML [url=http://www.eeggs.com/items/15786.html]one can specify the color "crap"[/url] within the font tag. Simply write <font color="crap"> and the resulting bit of text will have a light brown tinge. [/quote:ce82656b2b] Quote Link naar reactie
anoniem Geplaatst: 16 oktober 2003 Auteur Delen Geplaatst: 16 oktober 2003 [i:34245cec10][b:34245cec10][url=http://www.webdesignpractices.com/]Web Design Practices[/url][/b:34245cec10] is a site devoted to helping designers understand what design practices are currently in use on the Web—and aims to gather research about the usability of commonly-employed design practices.[/i:34245cec10] Quote Link naar reactie
anoniem Geplaatst: 23 oktober 2003 Auteur Delen Geplaatst: 23 oktober 2003 Artikel: [url=http://hotwired.lycos.com/webmonkey/03/36/index0a.html]Streamlining with web standards[/url] Quote Link naar reactie
anoniem Geplaatst: 5 november 2003 Auteur Delen Geplaatst: 5 november 2003 Nog meer handige informatie over webdesign, met veel aandacht voor de beperkingen van met name IEwin en IEmac: [url]http://www.quirksmode.org/[/url]. Overigens verwijst een van de links die termin8or eerder postte (http://www.xs4all.nl/~ppk/js/browsers.html) tegenwoordig ook naar deze pagina. [size=11:c5fb1cdcf0]\off-topic: Ik moet bekennen dat mijn laatste bijdragen meer in de tips & trucs & links sectie vallen dan onder de noemer 'best practices'. Maar ik denk toch dat deze links nuttig genoeg zijn om hier te noemen; zo langzamerhand is dit topic een beetje aan het uitgroeien tot een behoorlijk complete HTML/CSS catalogus. Hopelijk wordt ie ooit nog eens sticky gemaakt.[/size:c5fb1cdcf0] Quote Link naar reactie
anoniem Geplaatst: 23 november 2003 Auteur Delen Geplaatst: 23 november 2003 Een interessant weblog met informatie over website ontwikkeling is [url=http://www.brainstormsandraves.com/]Brainstorms & Raves[/url] van Shirley Kaiser. Zo te zien hecht ze nogal wat waarde aan webstandaarden en toegankelijkheid (m.a.w: aan 'best practices'). Ook interessant om te zien hoe zij gebruik maakt van weblogging software. Quote Link naar reactie
anoniem Geplaatst: 24 november 2003 Auteur Delen Geplaatst: 24 november 2003 Tijd om hier een echt 'best practices' topic van te maken. Als je CSS gebruikt, probeer dan zo gericht mogelijk het definitiegebied van een style aan te geven. Voorbeeld: [code:1:36246122fa] <html> <head> <style> a.MenuLinks { text-decoration: none; } </style> </head> <body> <a href="#" class="MenuLinks">blat</a> </body> </html> [/code:1:36246122fa] de a.MenuLinks geeft aan dat alleen tags van het type 'a' met classe-naam MenuLinks gestyled moeten worden. Nu kun je dus ook een div maken met een class="MenuLinks" met zijn eigen style. Quote Link naar reactie
anoniem Geplaatst: 24 november 2003 Auteur Delen Geplaatst: 24 november 2003 Jaaap, Leuk dat je ook dingen wilt bijdragen. Het is natuurlijk niet leuk om gelijk op je fouten gewezen te worden, maar bovenstaande is nou niet echt een goed voorbeeld van correct CSS en HTML gebruik. Dat terzijde, het is wellicht beter om naar pagina's te linken waar dit soort dingen duidelijk staan uitgelegd. Bijvoorbeeld: http://www.mezzoblue.com/archives/2003/11/19/css_crib_she/ Quote Link naar reactie
anoniem Geplaatst: 28 november 2003 Auteur Delen Geplaatst: 28 november 2003 [quote:6e97916841="termin8or"]Voor menulinks wordt meestal een descendent combinator gebruikt, aangezien deze in een lijst staan. Jouw voorbeeld zou 'verkeerd geinterpreteerd kunnen worden' daarnaast is a:hover niet geheel correct, a:link:hover en a:visited:hover zijn beter, omdat je dan zeker weet dat je het over a elementen hebben die ergens naar toe linken en geen 'lege' a elementen. Lees anders dit even: http://annevankesteren.nl/archives/2003/11/18/links-style-and-markup (geen spam oid ;-))[/quote:6e97916841] Het is wel handig als wordt vermeld WAAROM iets niet goed is. Quote Link naar reactie
anoniem Geplaatst: 28 november 2003 Auteur Delen Geplaatst: 28 november 2003 a elementen kunnen ook ankers zijn om te linken naar een bepaalde plek in het document. <a name="hier">tekts en markup en zo</a> Maar dit is eigenlijk niet meer nodig, want met alle beetje recente browsers kun je linken naar elk id. Als je dus geen ankers gebruikt a la <a name=..., dan kun je links dus gewoon stylen op deze manier: a{ text-decoration: none; } Quote Link naar reactie
anoniem Geplaatst: 7 januari 2004 Auteur Delen Geplaatst: 7 januari 2004 En met een kleine kick gaan we weer verder _on_-topic: http://www.htmldog.com/ [i:312123d322]HTML Dog is all about how to make web pages in the best possible way with HTML and CSS, the most common technologies used in making them.[/i:312123d322] Quote Link naar reactie
anoniem Geplaatst: 7 januari 2004 Auteur Delen Geplaatst: 7 januari 2004 Een paar linkjes op verzoek van Bas. http://www.danvine.com/icapture/ [i:b83f216739]iCapture is provided as a public service to the 97% of the computing world without macs. Standing tall, we 3% hereby declare "we too have a browser". So go on, give it a try by entering your URL above. You'll be delivered a screenshot of your site as a Mac sees it through Safari or Internet Explorer, all in 30 seconds or so. (Assuming the queue is empty) Come back as often as you would like.[/i:b83f216739] http://www.skyzyx.com/archives/000094.php [i:b83f216739]Ethan Marcotte (aka Sidesh0w) has posted a link to a tutorial on how to run Internet Explorer 5.01, 5.5, and 6.0 under Windows XP! I've tried it, and it works! To save some people the hassle, I've gone ahead and zipped each stand-alone installation and made them available for download. I've tested them on Windows 2000 and XP. You'd just need to upgrade your Windows 2000 installation with Internet Explorer 6.0, then download and unzip these files wherever you want (I put them in my Internet Explorer folder, myself).[/i:b83f216739] Quote Link naar reactie
anoniem Geplaatst: 8 januari 2004 Auteur Delen Geplaatst: 8 januari 2004 Een tijdje geleden ben ik eens bezig geweest met image replacement technieken. Hier wat links: 1. A List Apart: [url=http://www.alistapart.com/articles/fir/]Facts and Opinion About Fahrner Image Replacement[/url] 2. [url=http://phark.typepad.com/phark/2003/08/accessible_imag.html]Accessible Image Replacement[/url] 3. [url=http://www.madaboutstyle.com/sir/]Santa's Image Replacement[/url] 4. [url=http://www.moronicbajebus.com/playground/cssplay/image-replacement/]Image Replacement—No Span[/url] en: [url=http://www.kryogenix.org/code/browser/lir/]A new image replacement technique[/url] (dezelfde techniek, tegelijk uitgevonden door twee verschillende personen) 5. [url=http://www.sitepoint.com/print/1221]Accessible Header Images With CSS And XHTML[/url] 6a. A List Apart: [url=http://www.alistapart.com/articles/javascriptreplacement/]JavaScript Image Replacement[/url] 6b: Quirksmode.org: [url=http://www.quirksmode.org/oddsandends/again_fir.html]Why ALA's "JavaScript Image Replacement" is Very Bad[/url] Echter, ze hebben allemaal hun nadelen: 1. is bij nader inzien toch niet echt toegankelijk, omdat voice-browsers display:none niet weergeven (en terecht, volgens de HTML specificaties); en visibility:none vaak ook niet (niet terecht, geloof ik, maar wat doe je eraan?); geen oplossing voor mensen die plaatjes hebben uitgezet 2. met deze techniek maakt IE 5.01 er een zootje van, maar het werkt goed met andere browsers; geen oplossing voor mensen die plaatjes hebben uitgezet 3. levert bij IE 5.5 een ongewenste extra marge op beneden het plaatje; geen oplossing voor mensen die plaatjes hebben uitgezet; overflow:hidden werkt niet voor IE5 Mac 4. mooie techniek, maar helaas werkt het niet in de laatste Opera versies (in elk geval niet in 7.22 en 7.23); geen oplossing voor mensen die plaatjes hebben uitgezet 5. is meer een hack, maar werkt wel voor mensen die zonder plaatjes surfen; alleen geschikt voor fixed-width headers die dezelfde breedte hebben als het plaatje (anders komt de verborgen header onder het plaatje tevoorschijn bij het veranderen van de fontgrootte in Mozilla); werkt niet met IE 4.01. 6a. tja... eerlijk gezegd vind ik het gebruik van JavaScript voor dit doel nogal onlogisch en onelegant; bovendien is er een heleboel commentaar op dit artikel gekomen (lees de reacties), waaronder: 6b. ... dit artikel. Deze methode is wellicht een betere implementatie van het idee uit 6a, maar met dezelfde fundamentele bezwaren (JavaScript). Zelf heb ik ook een hack in elkaar gedraaid (de MORA Image Replacement techniek, of MIR), maar elegant kun je dat ook niet noemen: [code:1:dacd404a77]<h1><span>Page title</span></h1> h1 { background-image: url(title.gif); background-repeat: no-repeat; background-position: center; height: 70px; width: 100%; } h1 span { display: block; height: 70px; position: relative; top: -200em; /* push H1 text out of view */ } /* IE5 Mac Hack \*/ h1, h1 span { overflow: hidden; } /*/ h1 { text-indent: -200em; } /* End Hack */ [/code:1:dacd404a77] Nogmaals: het is een hack, en een lelijke bovendien. En het is bovendien best mogelijk dat iemand anders allang hetzelfde heeft uitgevonden, want ik kwam op dit onderwerp nadat ik eerst zelf de oorspronkelijke Farhner Image Replacement had her-uitgevonden. De h1 span moest ook naar overflow:hidden om te voorkomen dat het achtergrondplaatje verschuift bij vergroten van de fontafmetingen (ctrl+scrollwheel) in IE 5.x en IE6. De h1 span moest naar display:block en de span-hoogte moest gelijk gemaakt worden aan de hoogte van het plaatje om hetzelfde probleem te voorkomen bij IE6. En tenslotte kan IE5 Mac niet overweg met overflow:hidden, vandaar de extra hack voor deze browser (niet getest, overigens). Ik vrees dat het voorlopig aanmodderen blijft, totdat CSS3 breed ondersteund wordt. Maar zolang IE zelfs CSS1 nog niet goed ondersteund kan dat nog lang duren. Quote Link naar reactie
anoniem Geplaatst: 15 januari 2004 Auteur Delen Geplaatst: 15 januari 2004 He MORA, wat wil je eigenlijk bereiken met dat hele image replacement gebeuren? Je wil een plaatje zien i.p.v. de h1 text ofzo? Wat is je doel? Quote Link naar reactie
anoniem Geplaatst: 16 januari 2004 Auteur Delen Geplaatst: 16 januari 2004 [quote:4c55ec0957="Jaaap"]Je wil een plaatje zien i.p.v. de h1 text ofzo? Wat is je doel?[/quote:4c55ec0957]Dit is idd over het algemeen het doel van een image replacement techniek: een tekst dmv CSS vervangen door een afbeelding. - Bas Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen