Home > kruimelpad

vorige 50 volgende

inhoud

Twitter invoegen (5)

De ronde hoekjes zaten in de twitter-css die uigezet moest worden. Het ging met de border-radius eigenschapvan css3 en met browser-specifieke css.
Dit werkt niet in bv. IE7, en mag niet van de Webrichtlijnen.

Gerealiseerd in deze stap

  • De ronde hoekjes getekend in een klein gecombineerd gif-image. Voor de buitenhoekjes een #hoekjes-top en een #hoekjes-bottom containertje aangemaakt waar ze in kunnen als background-img (= de rechthoekige buitenhoeken worden overgeplakt met ronde hoeken).
  • Voor de binnenhoekjes is het midden transparant zodat de staande figuur er doorheen kan komen. Met css ingemonteerd in bestaande twitter-classes, weer als background-images.
  • De twitter-footer 1px negatieve margin-top gegeven om er in IE7 geen witte stippeltjes te zien.

Test verschil: zonder ronde hoekjes (reset).
Overblijft: bij het openen van de pagina staat alles wat onder het twitterblok komt, even bovenaan in de linkerkolom. Dit komt pas op de juiste plaats als na een flits het twitterblokje is opengeklapt (open de pagina nogmaals voor het effect). Ook de pagina-footer en het strookje wit erboven kunnen opeens van plaats veranderen. Het verspringen ziet er niet zo mooi uit.

Twitter

[vultekst]
[vultekst]
[vultekst]

Floep!

Hier ga ik...
[vultekst]
[vultekst]
[vultekst]
[vultekst]
[vultekst]
[vultekst]
[vultekst]
[laatste kolomregel]
[rechterkolom]
[vultekst]
[vultekst]
[laatste kolomregel]