Les images : les problemes commencent
Les problemes commencent : les deux images ci-dessus qui composent ma tasse de cafe sont bien collees avec Internet Explorer 5.5, mais sont decollees de quelques pixels avec Mozilla. C'est tres frustrant et cela arrive tres souvent malheureusement. Et encore, je n'ai pas essaye avec Opera et une douzaine de versions differentes de Mozilla et Internet Explorer.
J'utilise maintenant les styles suivant :
#espressoLeft {
float:left;
}
[..]
<div id="espressoTop"><img src="espresso_top.gif" width="600" height="38" alt="" /></div>
<div id="espressoLeft"><img src="espresso_left.gif" width="150" height="73" alt="" /></div>
Par contre, le titre et le sous-titre sont maintenant correctement positionnes a droite de la tasse. C'est la raison du "float:left" ci-dessus dans les styles de #espressoLeft. La propriete "float" permet de sortir un element du flot normal. Voir a ce sujet ce document du W3C qui explique l'effet de la propriete float. L'element #espressoLeft va etre positionne a gauche, et les elements qui suivent (le titre, le sous-titre et le texte dans notre cas) a sa droite, en epousant la forme de l'element #espressoLeft.
J'ai egalement enleve les marges en bas du titre et en haut du sous-titre pour qu'ils soient affiches tres pres l'un en dessous de l'autre :
#title {
font-family: verdana, arial, sans-serif;
margin-top:0px;
margin-bottom:0px;
}
#subTitle {
font-style:italic;
margin-top:0px;
}
La suite : Espresso, 3ème étape - Les images : les problemes sont resolus