18010 sujets

Questions générales et questions de débutants

[Résolu] Modifier la largeur dans <style>

bonjour
je voudrai changer la valeur de "width" en fonction de l'image qui appelle le <style>

<!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" lang="fr">
<head>
<meta content="text/html; charset=UTF-8"
http-equiv="content-type" />
<style type="text/css">
img {
width:300px;
}
img:hover {
width:860px;
}
</style>
<title>test2</title>
</head>
<body>
<p><img src="bluenote1sousverre.jpg" alt="sousverre" />
<img src="bluenote2sousverre.jpg" alt="sousverre" />
<img src="etui.jpg" alt="sousverre" /></p>
</div>
<br />
</body>
</html>
Modifié par michelo (07 Sep 2014 - 22:42)
michelo a écrit :
je voudrai changer la valeur de &quot;width&quot; en fonction de l'image qui appelle le &lt;style&gt;

Keuwah ???
Bonjour,

Dans un premier temps je te conseille de faire 2 fichier distinct 1 css et 1 html , pour ton problème peu tu t'expliquer plus précisément car pour le moment avec ton css toute les images auront 300px de largeur et lorsque que tu mettra ta souris dessus elle passeront a 860px
merci denetax
effectivement les 3 images s'affichent dans la même taille, mais pour la 3ème image, je voudrai qu'elle s'affiche dans une taille plus petite (normal et zoom)
Deux solutions pour ta question :

La première un peu bourrine consiste à utiliser le sélecteur 
img+img+img {}

Plutôt déconseillé surtout si tu veux plus d'image.

Et la deuxième solution (la vraie) est d'ajouter une classe à ton image (ou un ID) ce qui donne en html : 
<img src="bluenote1sousverre.jpg" alt="sousverre" />
<img src="bluenote2sousverre.jpg" alt="sousverre" />
<img class="maTroisiemeImage" src="etui.jpg" alt="sousverre" />

Et l'appel CSS :
.maTroisiemeImage {}
merci solidsnake
mais comme je ne connais pas très bien le css, vous serait t'il possible de ma faire parvenir la totalité du code de page ?
merci d'avance
Bon, je ne connais pas les dimensions que tu veux, mais ça devrait ressembler à un truc du genre :
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>test2</title>
    <style>
      img                         { width:300px; }
      img.maTroisiemeImage        { width:200px; }
      img.maTroisiemeImage:hover  { width:860px; }
    </style>
  </head>
  <body>
    <p>
      <img src="bluenote1sousverre.jpg" alt="sousverre" />
      <img src="bluenote2sousverre.jpg" alt="sousverre" />
      <img src="etui.jpg" alt="sousverre" class="maTroisiemeImage" />
    </p>
  </body>
</html>

Bon le doctype est différent, mais tu pourras remettre celui que tu veux, à partir de là tu pourras également changer les valeurs tout seul.
Modifié par SolidSnake (08 Sep 2014 - 15:48)
Bonjour,

Très bon exemple de SolidSnake, il faut utiliser les classes ou les id pour ce type de problématique.
La différence entre ces deux notions?

Si tu souhaites réutiliser ce style d'image à plusieurs reprises dans ton site, alors il faut créer une classe : 
.smallerimages{width:200px;}

Si ce style est unique, alors il faut créer un identifiant : 
#smallerimage{width:200px;}


La classe se définit dans la feuille de styles css avec un point, tandis que l'identifiant se définit avec un dièse.

Dans la partie HTML, il faut bien évidemment appeler cette classe ou cet identifiant, comme spécifié dans l'exemple de SolidSnake.

Pour une classe :
class="smallerimages"

Pour un identifiant : 
id="smallerimage"
Sujet clos
Aller à