Mettre en forme en CSS
Les choses se compliquent un peu plus lorsqu'on arrive au CSS. En effet, il faut du travail (et parfois un peu d'astuce) pour obtenir un résultat se rapprochant de la maquette. Je dis bien « se rapprochant » car vous ne pourrez jamais obtenir un résultat identique au pixel près.
Mettez-vous bien cela en tête : le but est d'obtenir le rendu le plus proche possible, sans chercher la perfection. Même si vous obtenez selon vous « la perfection » sur un navigateur, vous pouvez être sûrs qu'il y aura des différences sur un autre navigateur (plus ancien) ou sur une autre machine que la vôtre. Nous allons donc faire au mieux et ce sera déjà du travail, vous verrez.
Pour mettre en forme le design, je vais procéder en plusieurs étapes. Je vais m'occuper des éléments suivants, dans cet ordre :
Pour les besoins du design, mon graphiste a utilisé trois polices sur sa maquette :
Vous trouverez ces polices dans le fichier que je vous ai fait télécharger un peu plus haut. Si ce n'est pas encore fait, je vous encourage fortement à le télécharger.
La plupart des ordinateurs sont équipés de Trebuchet MS (quoique pas nécessairement tous, on pourrait la faire télécharger). Par contre, les deux autres polices sont un peu originales et ne sont sûrement pas présentes sur les ordinateurs de vos visiteurs. Nous allons les leur faire télécharger.
Comme vous le savez, il faut proposer plusieurs versions de ces polices pour les différents navigateurs. Dafont ne propose que le .ttf en téléchargement. Par contre, FontSquirrel propose un générateur de polices à utiliser en CSS3 avec @font-face : vous lui envoyez un .ttf, l'outil transforme le fichier dans tous les autres formats nécessaires et vous fournit même le code CSS prêt à l'emploi !
Je m'en suis servi pour générer les différentes versions des deux polices exotiques que je vais utiliser. Ensuite, dans mon fichier CSS, je rajoute ce code qui m'a été fourni par FontSquirrel pour déclarer les nouvelles polices :
/* Définition des polices personnalisées */
@font-face { font-family: 'BallparkWeiner'; src: url('polices/ballpark.eot'); src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'), url('polices/ballpark.woff') format('woff'), url('polices/ballpark.ttf') format('truetype'), url('polices/ballpark.svg#BallparkWeiner') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Dayrom'; src: url('polices/dayrom.eot'); src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'), url('polices/dayrom.woff') format('woff'), url('polices/dayrom.ttf') format('truetype'), url('polices/dayrom.svg#Dayrom') format('svg'); font-weight: normal; font-style: normal; } |
En plus de cela, il faut bien entendu mettre à disposition les fichiers des polices. Comme vous le voyez, j'ai créé un sous-dossier polices dans lequel j'ai mis les différentes versions de mes polices.
On peut maintenant s'attaquer à définir quelques styles globaux pour tout le design de notre page. On va définir une image de fond, une police et une couleur de texte par défaut, et surtout on va dimensionner notre page et la centrer à l'écran.
/* Eléments principaux de la page */
body { background: url('images/fond_jaune.png'); font-family: 'Trebuchet MS', Arial, sans-serif; color: #181818; }
#bloc_page { width: 900px; margin: auto; }
section h1, footer h1, nav a { font-family: Dayrom, serif; font-weight: normal; text-transform: uppercase; } |
Avec #bloc_page, le bloc qui englobe toute la page, j'ai fixé les limites à 900 pixels de large. Avec les marges automatiques, le design sera centré.
Si vous souhaitez créer un design qui s'adapte aux dimensions de l'écran du visiteur, définissez une largeur en pourcentage plutôt qu'en pixels.
J'ai utilisé la propriété CSS text-transform: uppercase; (que nous n'avons pas vue auparavant) pour faire en sorte que mes titres soient toujours écrits en majuscules. Cette propriété transforme en effet le texte en majuscules (elle peut aussi faire l'inverse avec lowercase). Notez qu'on aurait aussi pu écrire les titres directement en majuscules dans le code HTML.
La figure suivante vous montre ce qu'on obtient pour le moment avec le code CSS. On est encore loin du résultat final mais on se sent déjà un petit peu plus « chez soi ».
Le fond et les limites de la page commencent à apparaître
D'après la structure que j'ai proposée, l'en-tête contient aussi les liens de navigation. Commençons par définir l'en-tête et, en particulier, le logo en haut à gauche. Nous verrons ensuite comment mettre en forme les liens de navigation.
/* Header */
header { background: url('images/separateur.png') repeat-x bottom; }
#titre_principal { display: inline-block; }
header h1 { font-family: 'BallparkWeiner', serif; font-size: 2.5em; font-weight: normal; }
#logo, header h1 { display: inline-block; margin-bottom: 0px; }
header h2 { font-family: Dayrom, serif; font-size: 1.1em; margin-top: 0px; font-weight: normal; } |
Nous créons une distinction entre l'en-tête et le corps de page grâce à une image de fond. Les éléments sont positionnés en inline-block et nous personnalisons les polices et les dimensions. Rien d'extraordinaire pour le moment.
La mise en forme des liens de navigation est un petit peu plus intéressante. Vous l'avez vu, j'ai créé une liste à puces pour les liens… mais une telle liste s'affiche habituellement en hauteur, et non en largeur. Heureusement, cela se change facilement, vous allez voir :
/* Navigation */
nav { display: inline-block; width: 740px; text-align: right; }
nav ul { list-style-type: none; }
nav li { display: inline-block; margin-right: 15px; }
nav a { font-size: 1.3em; color: #181818; padding-bottom: 3px; text-decoration: none; }
nav a:hover { color: #760001; border-bottom: 3px solid #760001; } |
La principale nouveauté est la définition CSS list-style-type: none;, qui permet de retirer l'image ronde servant de puce. Chaque élément de la liste (<li>) est positionné en inline-block, ce qui nous permet de placer les liens côte à côte comme nous le souhaitions.
Le reste des définitions ne contient rien d'extraordinaire : des dimensions, des couleurs, des bordures… Autant de choses que vous connaissez déjà. Notez que je ne trouve pas forcément les bonnes valeurs du premier coup, il me faut parfois tâtonner un peu pour trouver une apparence proche de la maquette d'origine.
La figure suivante représente le résultat que nous obtenons avec les derniers ajouts de CSS.
L'en-tête est mis en page
Bien, passons maintenant à un exercice un peu plus difficile mais très intéressant : la bannière ! Notre maquette comporte une jolie bannière représentant le pont de San Francisco. Cette bannière, sur votre site, peut être amenée à évoluer. Ici, elle peut servir à illustrer, par exemple, le dernier billet de blog de notre ami Zozor, qui vient de visiter San Francisco.
La bannière est intéressante à plus d'un titre :
Voici le code que j'ai utilisé pour réaliser toute la bannière :
/* Bannière */
#banniere_image { margin-top: 15px; height: 200px; border-radius: 5px; background: url('images/sanfrancisco.jpg') no-repeat; position: relative; box-shadow: 0px 4px 4px #1c1a19; margin-bottom: 25px; }
#banniere_description { position: absolute; bottom: 0; border-radius: 0px 0px 5px 5px; width: 99.5%; height: 33px; padding-top: 15px; padding-left: 4px; background-color: rgb(24,24,24); /* Pour les anciens navigateurs */ background-color: rgba(24,24,24,0.8); color: white; font-size: 0.8em; }
.bouton_rouge { display: inline-block; height: 25px; position: absolute; right: 5px; bottom: 5px; background: url('images/fond_degraderouge.png') repeat-x; border: 1px solid #760001; border-radius: 5px; font-size: 1.2em; text-align: center; padding: 3px 8px 0px 8px; color: white; text-decoration: none; }
.bouton_rouge img { border: 0; } |
Ce code est assez technique et riche en fonctionnalités CSS. C'est peut-être la partie la plus délicate à réaliser dans cette page.
Vous pouvez constater que j'ai choisi d'afficher l'image du pont sous forme d'image de fond dans le bloc <div> de la bannière.
J'ai aussi donné une position relative à la bannière, sans utiliser de propriétés pour en modifier le décalage… Pourquoi ? A priori, une position relative sans décalage ne sert à rien… Et pourtant, cela m'a été particulièrement utile pour placer le bouton « Voir l'article » en bas à droite de la bannière. En effet, j'ai placé le bouton en absolu à l'intérieur.
Le bouton ne devrait-il pas se placer en bas à droite de la page ?
Non, souvenez-vous ce que je vous avais dit : si un bloc est positionné en absolu dans un autre bloc lui-même positionné en absolu, fixe ou relatif, alors il se positionne à l'intérieur de ce bloc.
Notre bannière est positionnée en relatif (sans décalage). Comme le bouton est positionné en absolu à l'intérieur, il se place donc en bas à droite de la bannière !
C'est une technique particulièrement utile et puissante dans la réalisation d'un design, souvenez-vous en !
Dernier détail : pour la légende de la bannière, j'ai choisi d'utiliser la transparence avec la notation RGBa plutôt que la propriété opacity. En effet, opacity aurait rendu tout le contenu du bloc transparent, y compris le bouton « Voir l'article » à l'intérieur. J'ai trouvé préférable de rendre transparente seulement la couleur de fond plutôt que tout le bloc.
Le résultat est plutôt sympathique (figure suivante).
La bannière est mise en forme
Cela en jette, vous ne trouvez pas ?
Pour réaliser le dégradé du bouton « Voir l'article », j'ai utilisé une image de fond représentant le dégradé et j'ai répété cette image horizontalement. Sachez qu'il existe une propriété CSS3linear-gradient qui permet de réaliser des dégradés sans avoir à recourir à une image de fond. Son usage étant un peu complexe actuellement, j'ai choisi de ne pas l'utiliser dans cet exemple, mais vous pouvez vous documenter à son sujet si vous le souhaitez !
Le corps, au centre de la page, est dans notre cas constitué d'une unique balise <section> (mais il pourrait y en avoir plusieurs, bien sûr).
Pas beaucoup de difficultés sur le corps, le positionnement du bloc « À propos de l'auteur » se fait en inline-block. On joue avec les angles arrondis et les ombres, on ajuste un peu les marges et les dimensions du texte, et nous y voilà !
/* Corps */
article, aside { display: inline-block; vertical-align: top; text-align: justify; }
article { width: 625px; margin-right: 15px; }
.ico_categorie { vertical-align: middle; margin-right: 8px; }
article p { font-size: 0.8em; }
aside { position: relative; width: 235px; background-color: #706b64; box-shadow: 0px 2px 5px #1c1a19; border-radius: 5px; padding: 10px; color: white; font-size: 0.9em; }
#fleche_bulle { position: absolute; top: 100px; left: -12px; }
#photo_zozor { text-align: center; }
#photo_zozor img { border: 1px solid #181818; }
aside img { margin-right: 5px; } |
La petite difficulté ici était de réussir à placer la flèche à gauche du bloc <aside> « À propos de l'auteur » pour donner l'effet d'une bulle. Là encore, notre meilleur ami est le positionnement absolu. La technique est la même : je positionne le bloc <aside> en relatif (sans effectuer de décalage), ce qui me permet ensuite de positionner l'image de la flèche en absolu par rapport au bloc <aside> (et non par rapport à la page entière). En jouant sur le décalage de l'image, je peux la placer avec précision où je veux, au pixel près (figure suivante) !
Le corps de la page est mis en forme
Il ne nous reste plus que le pied de page à mettre en forme. Celui-ci est constitué de trois sous-blocs que j'ai matérialisés par des <div> auxquels j'ai donné des id pour mieux les repérer. Ces blocs sont positionnés en inline-block les uns à côté des autres.
/* Footer */
footer { background: url('images/ico_top.png') no-repeat top center, url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top; padding-top: 25px; }
footer p, footer ul { font-size: 0.8em; }
footer h1 { font-size: 1.1em; }
#tweet, #mes_photos, #mes_amis { display: inline-block; vertical-align: top; }
#tweet { width: 28%; }
#mes_photos { width: 35%; }
#mes_amis { width: 31%; }
#mes_photos img { border: 1px solid #181818; margin-right: 2px; }
#mes_amis ul { display: inline-block; vertical-align: top; margin-top: 0; width: 48%; list-style-image: url('images/ico_liensexterne.png'); padding-left: 2px; }
#mes_amis a { text-decoration: none; color: #760001; } |
Deux petites particularités à signaler sur le pied de page :
Et voilà, notre design est terminé (figure suivante) !
Le pied de page est mis en forme
Ah, vous pensez en avoir fini ? Il reste hélas encore un peu de travail : il faut tester notre site sur différents navigateurs. Idéalement, il vaut mieux le faire au fur et à mesure de la mise en place du design. En particulier, les anciennes versions d'Internet Explorer (IE6 à IE8) méritent qu'on s'y attarde car le résultat n'est pas forcément celui auquel on s'attendait…
Créé avec HelpNDoc Personal Edition: Créer des documents d'aide PDF facilement