Page 1 sur 1
Conflit dans les styles CSS
Publié : 14 mars 2005, 17:15
par Nerva
Bonjour.
J'utilise une page HTML pour faire apparaître une image, comme décrit ci-dessous :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>image</title>
<link href="stylepopups.css" rel="stylesheet" type="text/css">
</head>
<body>
<center>
<table height="100%">
<tr>
<td><div align="center">
<a href="../../../home.htm"><img src="../../index.jpg"></a>
<a href="image_01.html"><img src="../../first.jpg"></a>
<a href="image_02.html"><img src="../../previous.jpg"></a>
<a href="image_04.html"><img src="../../next.jpg"></a>
<a href="image_12.html"><img src="../../last.jpg"></a>
</div></td>
</tr>
<tr>
<td valign="middle"><a href="Javascript:history.back()"><img src="image_03.jpg"></a></td>
</tr>
</table>
</center>
</body>
</html>
Grâce au style suivant, mon image est entourée d'un liseré noir de 3 pixels :
Code : Tout sélectionner
body
{
background-color: #FFFFFF;
background-image: url(images/background.jpg);
}
img
{
border: 3px solid #000000;
}
Le problème, c'est que j'ai également des flèches de défilement dans chaque page, et que elles aussi sont entourées du fameux liseré.
Comment faire pour que le style ne s'applique qu'à la photo ?
Merci
Publié : 14 mars 2005, 17:30
par GregK84
utilise une class pour les images qui ont besoin de ta bordure de 3 pixel.
exemple :
Code : Tout sélectionner
/*pas de bordure pour toute les images*/
img
{
border: 0;
}
img.border
{
border: 3px solid #000000;
}
et dans ton code html, tu ajoute au image qui on besoin de ta bordure de 3px.
Code : Tout sélectionner
<a href="image_12.html"><img class="border" src="../../last.jpg"></a>
et tu ne touche pas aux autres
Publié : 14 mars 2005, 17:43
par calimo
Non, le plus simple c'est de mettre un id à un bloc entourant tous les liens, et de sélectionner uniquement les images contenues dans ce bloc.
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>image</title>
<link href="stylepopups.css" rel="stylesheet" type="text/css">
</head>
<body>
<table id="navigation">
<tr>
<td>
<a href="../../../home.htm"><img src="../../index.jpg"></a>
<a href="image_01.html"><img src="../../first.jpg"></a>
<a href="image_02.html"><img src="../../previous.jpg"></a>
<a href="image_04.html"><img src="../../next.jpg"></a>
<a href="image_12.html"><img src="../../last.jpg"></a>
</td>
</tr>
<tr>
<td valign="middle"><a href="Javascript:history.back()"><img src="image_03.jpg"></a></td>
</tr>
</table>
</center>
</body>
</html>
Code : Tout sélectionner
body {
background-color: #FFFFFF;
background-image: url(images/background.jpg);
}
table#navigation {
height:100%
text-align:center;
margin-left:auto;
margin-right:auto;
}
#navigation img {
border: 3px solid #000000;
}
C'est beaucoup plus "propre" comme ça, ça évite de mettre plein de classes et de les répéter et ça te permet de découvrir les sélecteurs CSS descendants
Publié : 14 mars 2005, 17:46
par GregK84
calimo a écrit :Non, le plus simple c'est de mettre un id à un bloc entourant tous les liens, et de sélectionner uniquement les images contenues dans ce bloc.
C'est beaucoup plus "propre" comme ça, ça évite de mettre plein de classes et de les répéter et ça te permet de découvrir les sélecteurs CSS descendants
oui et c'est egalement la méthode que j'utilise
Publié : 14 mars 2005, 17:48
par Nerva
Et bien merci à tous...