Par ou commencer ?
Par ou commencer ? Personnellement, je prefere commencer par le haut, par ce qui est gros, par ce qui est simple. Petit a petit, j'ajoute ensuite ce qui est plus bas, ce qui est moins gros et ce qui est plus complique. De cette facon, j'evite l'angoisse de la page blanche, et j'obtiens des resultats visibles rapidement. De plus, commencer par le haut evite des problemes inutiles : ajouter d'autres elements plus bas presente peu de risques d'affecter ce qu'on a deja mis en place precedemment plus haut.
Dans mon cas, il s'agit donc de mettre en place le fond et la tasse. J'ai prealablement decoupe mon image en deux morceaux. La skin Radio dont je me suis inspire (voir JY) utilise 4 morceaux, qui correspondent aux cases d'une des tables utilisees pour la mise en page. Pour les CSS, le mieux est de couper les images en le moins de morceaux possibles, cela sera cela (a prononcer rapidement) de moins a recoller ensuite avec des styles. On aurait certainement pu ne garder qu'une seule image, mais je souhaitais ajouter un lien sur la tasse.
Voici mes deux morceaux d'images :
Pour commencer, je les affiche simplement l'un en dessous de l'autre, avec une balise <br /> pour que le deuxieme soit affiche en dessous du premier et non a sa droite :
<img src="espresso_top.gif" alt="" /><br /> <img src="espresso_left.gif" alt="" />
Mes styles ne contiennent pour l'instant pas grand chose, j'ai juste supprime les marges associees a l'element body :
body {
width:100%;
margin:0px;
padding:0px;
background-color:#ffffff;
color:#000000;
}
Et ajoute des styles correspondants au titre et au sous-titre :
#title {
font-family: verdana, arial, sans-serif;
}
#subTitle {
font-style:italic;
}
Un petit coup de validateur pour corriger quelques petits problemes mineurs, et voila, nous sommes partis sur de bonnes bases !
La suite : Espresso, 2ème étape - Les images : les problemes commencent