Conflit dans les styles CSS

Nerva · Message par **Nerva** » 14 mars 2005, 17:15

Bonjour.

J'utilise une page HTML pour faire apparaître une image, comme décrit ci-dessous :

<!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

GregK84 · Message par **GregK84** » 14 mars 2005, 17:30

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

calimo · Message par **calimo** » 14 mars 2005, 17:43

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

GregK84 · Message par **GregK84** » 14 mars 2005, 17:46

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

Nerva · Message par **Nerva** » 14 mars 2005, 17:48

Et bien merci à tous...

Geckozone

Conflit dans les styles CSS

Conflit dans les styles CSS

Qui est en ligne ?