vendredi 20 janvier 2012

border-collapse et border-radius

Catégorie : CSS : Utiles

Certain d'entre vous ce sont peut-être arraché les cheveux en voulant arrondir les coins d'un tableau avec des bordures sans y parvenir

La valeur collapse aux bordures de cellules de votre tableaux pour la propriété : border-collapse , entre en conflit avec la propriété: border-radius.

Une astuce pour eviter ce conflit C.S.S. ?

Oui !

border-collapse:collapse; élimine les espaces autour des cellules d'un tableau.

Pour éliminer ou mettre a zéro ces espaces, il est possible d'e^tre un peu plus bavard pour déclaré ces styles:

declaration explicite :
border-collapse:separate;, c'est la valeur par défaut!
border-spacing:0px ;, ici, le border-radius reste applicable.

exemple

border-spacing:0;
th dans theadth dans theadth dans thead
td dans tfoottd dans tfoottd dans tfoot
td dans tbodytd dans tbodytd dans tbody
border-collapse:collapse
th dans theadth dans theadth dans thead
td dans tfoottd dans tfoottd dans tfoot
td dans tbodytd dans tbodytd dans tbody

mercredi 02 décembre 2009

@font-face , pour 90% de vos visiteurs , même pas peur !

Catégorie : CSS : Utiles

Ce titre d'article ne se veut pas provocateur , pourtant ....

N'en plaisent a certains , IE propose depuis longtemps aux webmaster de faire usage de police "exotique" . Enfin , disons de police de caractères peu communes ou rares sur les ordinateurs des visiteurs.

I.E. permet , via @font-face d'afficher sur une page web , une police qui n'est pas installé sur le pc du visiteur .

Un bémol d'importance , ne permettait pas vraiment d'en faire usage ...

I.E. n'accepte que des font au format .EOT , et ironiquement qualifié : opentype.

Le programme WEFT , de microsoft ,( ne fonctionnant donc que sous l'OS Windows) , permet de creer ces fichiers de polices et impose d'indiquer des droits d'utilisations (restrictif a un seul domaine par exemple), et c'est sans compter l'utilisation peut intuitive du programme qui finit par rendre cette possibilité quasi inexploitable .

Enfin , nos autres navigateurs , eux , ne reconnaissent pas ce type de police .

Nouvelle donne

Pourtant , aujourd'hui , nombre de nos navigateurs implémente @font-face , disparue dans les specifications C.S.S. 2.0 mais qui refait surface dans la version 3. Plusieurs type de police sont utilisables , seul I.E. est refractaire et n'accepte que son type de fichier OpenType . Microsoft propose même d'en faire un standard ! .

Lire la suite de : @font-face , pour 90% de vos visiteurs , même pas peur !

mercredi 28 janvier 2009

Feuille de style par defaut

Catégorie : CSS : Utiles

Dans les recommandations du W3C , on trouve une feuille de style informative sur les styles par defauts a appliqué a nos pages en (x)html.

Ce quelle (re)definie

Par defaut tout les éléments sont formatté comme des element de type "inline" ... votre navigateur embarque une page de style par defaut de ce type , si ce n'est celle-ci.

Ce sample style sheet redefinie l'ensemble des balises et de quelques pseudo elements , sans toutefois reprendre certaines regles (tableau en particulier) qui sont souvent definis par les attributs inserer par l'editeur ou les elements non assujettis directement au CSS , tel que les image , applet , objet , frame , applet , dont les dimensions sont par defaut inconnues .

Lire la suite de : Feuille de style par defaut

lundi 26 janvier 2009

dictionnaire de liens

Catégorie : CSS : Utiles

Un petit utilitaire bien pratique , plus besoin de parcourir les pages du W3C , ou d'une liste sans fin de propriétés , de faire une requête auprès d'un moteur de recherche , pour retrouvé la simple définition d'une propriété , d'un pseudo élément ou d'un sélecteur .

On tape le nom d'une propriété , d'un pseudo élément , d'un selecteur ou caractées de syntaxe , une balise de (x)html , on envoi le formulaire , et on clique sur le lien pour arriver pile-poil sur la définition officiel .

Cool , dommage qu'on en a si rarement besoin ...

Pour y accéder :Mini Dictionnaire de liens - css 2.1 , HTML 4.01

questionnez ce mini-dico qui comprend 245 liens + 1 et si il vous plait , vous pouvez aussi le télécharger .

C'est un simple script PHP, qui tient dans 107ko et qui ne fait rien d'autre que de répondre aux 245 questions dont il connait les réponses , pour les autres , il vous renvoi vers le moteur de recherche google en ciblant le site du W3C .

Lire la suite de : dictionnaire de liens

lundi 20 octobre 2008

Tests visuels sur : vertical-align et ses valeurs.

Catégorie : CSS : Utiles

Testons les valeurs : baseline , sub , super ,top ,text-top ,middle ,bottom ,length et percent et visualisons leurs effets .

Pour ce test , nous nous servirons :

  1. un fond blanc
  2. un paragraphe avec une bordure grise et un fond bleu claire
  3. d'une image avec une bordure css verte
  4. d'un texte rouge surligné et souligné en reprenant le nom de la valeur appliquée a l'image .

La position de l'image dans le pargraphe et son alignement sur le texte sera clairement visible .

Lire la suite de : Tests visuels sur : vertical-align et ses valeurs.

page 1 sur 1