par
Invité » 28 déc. 2006, 02:58
Salut,
Ton image d'entête fait partie de la présentation donc sa place est bien dans le CSS en background d'un h1 ou d'une div si tu y mets plusieurs choses. En revanche, ce n'est pas forcémment le cas de tes liens. Pour ces derniers, tu peux soit placer tes images en background CSS sur chaque lien soit mettre l'image directement dans le (X)HTML si tes exigences graphiques sont particulières... (pour la police de caractères par exemple)
exemple :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<style type="text/css">/*<![CDATA[*/
a
{
position: absolute;
top: 100px;
left: 80px;
display: block;
}
a img
{
border: 0;
}
/*]]>*/</style>
</head>
<body>
<a href="http://accueil.htm"><img src="accueil.png" width="240" height="124" alt="accueil" title="" /></a>
</body>
</html>- display: block passe le lien en type block afin que tu puisses le placer comme bon te semble...
- border: 0; est nécessaire sur les images comprises dans des liens si tu ne veux pas te retrouver avec une bordure autour de l'image...
- alt sert de texte de remplacement en cas d'indisponibilité de l'image... (lecteurs d'écrans par exemple)
- width et height sont indiqués dans le (X)HTML pour accélèrer la restitution du document dans les navigateurs graphiques...
( + d'infos
ici)
- title="" évite d'avoir le alt qui apparaît sur IE quand tu survoles l'image (bug d'IE)
Salut,
Ton image d'entête fait partie de la présentation donc sa place est bien dans le CSS en background d'un h1 ou d'une div si tu y mets plusieurs choses. En revanche, ce n'est pas forcémment le cas de tes liens. Pour ces derniers, tu peux soit placer tes images en background CSS sur chaque lien soit mettre l'image directement dans le (X)HTML si tes exigences graphiques sont particulières... (pour la police de caractères par exemple)
exemple :
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<style type="text/css">/*<![CDATA[*/
a
{
position: absolute;
top: 100px;
left: 80px;
display: block;
}
a img
{
border: 0;
}
/*]]>*/</style>
</head>
<body>
<a href="http://accueil.htm"><img src="accueil.png" width="240" height="124" alt="accueil" title="" /></a>
</body>
</html>[/code]- display: block passe le lien en type block afin que tu puisses le placer comme bon te semble...
- border: 0; est nécessaire sur les images comprises dans des liens si tu ne veux pas te retrouver avec une bordure autour de l'image...
- alt sert de texte de remplacement en cas d'indisponibilité de l'image... (lecteurs d'écrans par exemple)
- width et height sont indiqués dans le (X)HTML pour accélèrer la restitution du document dans les navigateurs graphiques...
( + d'infos [url=http://www.blog-and-blues.org/weblog/2004/08/10/266-taille-des-images-et-separation-excessive-du-contenu-et-de-la-presentation]ici[/url])
- title="" évite d'avoir le alt qui apparaît sur IE quand tu survoles l'image (bug d'IE)
