circle css
cross-browser cirkels zonder plaatjes of scripts

home | index | menu | help

Er is geen CSS ondersteuning.


		

		

In de style-sheet heb ik een voorbeeld neergezet. Eén cirkel met een diameter van 130px. Als je één (of meerdere) cirkel(s) op jouw pagina wilt zetten moet je er even op letten dat je alle noodzakelijke code op jouw pagina plaatst. Let even goed op alle "if IE"-regeltjes in de broncode. De volgorde en de plaatsing moet precies zo gedaan worden als in het voorbeeld. Voor de rest heb je alleen alle css-code, en regeltjes in de body van class circle130, nodig. Als je in de style-sheet kijkt zie je dat het eenvoudig is om cirkels van andere afmetingen te voorzien. De radius is altijd de helft van de hoogte en de breedte. Als je op de link (voor de broncode) boven de cirkel klikt, kom je bij de source-code van deze pagina.

Nog even voor mijn "opera-klanten": upgraden boven 10.5 lijkt mij een goed plan. Ik ga er van uit dat opera fans nooit met een stokoude versie over het Internet heen surfen. Het is erg prettig dat Opera border-radius ondersteunt.

Tot slot wil ik nog even melden dat in de "if IE" het regeltje met body{margin:8px} alleen nodig is op deze pagina van de dns5. De standaard CSS van de site botst met de CSS van de "cirkel-pagina". Je kan de regel weglaten.

cache 26-05-2010