CSS : adapter un site aux mobiles

Un site qui s’affiche correctement sur un écran d’ordinateur ou sur une tablette voire un smartphone. Une vue de l’esprit ???
Oui c’est désormais possible à condition d’utiliser dans la feuille de style les média queries (c’est à dire en fait des tests en CSS) et de rajouter une instruction HTML dans la partie HEAD de chaque page : une meta balise.

Suite de l’article

Publié dans CSS 3, HTML&CSS -débutants | Laisser un commentaire

CSS3 : embarquer une police

Vous avez avez réalisé en local un superbe site en particulier par l’emploi d’une police exotique. Mais au moment de penser à l’hébergement du site (afin que le public y ait accès) vous vous dites :’c’est idiot ! la police que j’ai employée ne sera probablement pas installée sur l’ordinateur du visiteur donc je me suis fatigué pour rien … ‘
Rassurez vous. Vous pouvez désormais grâce au CSS3 mettre une police à disposition du ‘client’ le temps de sa visite.

Suite de l’article

Publié dans CSS 3, HTML&CSS -débutants | Laisser un commentaire

HTML5 : balise video

Héberger une vidéo sur Youtube ou Dailymotion puis faire un lien à partir de votre site (code HTML fourni par l’hébergeur) vers cette vidéo est une solution pour mettre à disposition une vidéo à partir de votre site. Mais le visiteur devra supporter 30 secondes de publicité …

Avant HTML5 l’incorporation d’une vidéo dans un site était très compliquée.
Il fallait utiliser un ‘plugin’ comme flash player ou quicktime.
Il y avait une autre solution : utiliser la balise object qui demandait beaucoup de paramètres obscures …
Suite de l’article

Publié dans HTML 5, HTML&CSS -débutants | Laisser un commentaire

CSS : une bannière toujours visible

Sur certains site la bannière (ou une barre de navigation) est fixe par rapport à l’écran et est toujours visible même lorsque l’on descend vers le bas de la page (les boîtes initialement sous le bandeau « glissent » sous ce dernier).

Pour obtenir cet effet il faut combiner les propriétés CSS position :fixed et z-index

suite de l’article

Publié dans CSS 3, HTML&CSS -débutants | Laisser un commentaire

A propos du centrage

Pour centrer horizontalement un texte dans une boîte il suffit d’utiliser la propriété CSS text-align avec la valeur center.

Par contre le centrage vertical d’un texte dans sa boîte c’est un peu plus délicat. Il faut savoir que le texte est toujours centré verticalement dans sa ligne. Donc si le texte est mono-ligne il suffit que la ligne (unique) de la boîte ait la même hauteur que cette boîte et votre texte sera centré verticalement dans la boîte.

Vous devez donc utiliser la propriété CSS line-height pour le texte avec la même valeur que la propriété height de la boîte.

 

 

Publié dans CSS 3, HTML 5, HTML&CSS -débutants | Laisser un commentaire

HTML5 : des balises structurantes

Si vous souhaitez que votre page contiennent de grandes divisions et que vous ignorez l’existence des nouvelles balises HTML5 vous allez multiplier dans votre code les
<div id = … > et les </div>

Le code HTML devient rapidement difficile à comprendre surtout si de surcroît il n’est pas indenté …

Heureusement il y a désormais les nouvelles balises structurantes (header, nav, section, article, footer, aside)

Suite de l’article

Publié dans CSS 3, HTML 5, HTML&CSS -débutants | Laisser un commentaire

CSS : les dégradés

Avant lorsque vous vouliez qu’une boîte ait un fond dégradé, c’était compliqué.

Il fallait utiliser un logiciel tel photoshop ou gimp pour créer une image correspondant à un dégradé (linéaire ou radial).

Puis dans une deuxième étape et via le CSS faire en sorte que cette image deviennent le « background » de notre boîte.

Désormais avec CSS3 on peut directement définir les dégradés en CSS.

Suite de l’article

Publié dans CSS 3, HTML&CSS -débutants | Laisser un commentaire