Discussion :

[gdhia]

Bonjour,

Bonjour à tous,

sur la page suivante: http://rac-spa.org/sites/default/files/doc_medmpanet/catalogue/index2.html

le css que j'utilise permet normalement de faire en sorte que les images se redimensionnement automatiquement selon la taille de l'ecran (pc, tablette, téléphone...) comporte une définition.

j'essaye de mettre des lien de sorte que lors du clic sur une couverture, ça ouvre une autre page, mais quand j'insère la balise <a href>, la définition existant dans le CSS pour cette balise déforme l'image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.showcase a:link, .showcase a:visited, .showcase a:hover, .showcase a:active {
    color: white !important;
    display: block;
    margin: 0 auto 1rem;
    position: relative;
    text-decoration: none;
    width: 11.75rem;}

j'ai donc du créer une nouvelle classe "a.one" avec le CSS suivant pour l'image reste dans la bonne proportion (vous verrez que la différence est au niveau du width:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.showcase a.one:link, .showcase a.one:visited, .showcase a.one:hover, .showcase a.one:active {
    color: white !important;
    display: block;
    margin: 0 auto 1rem;
    position: relative;
    text-decoration: none;
    width: 16.29rem;}

le problème c'est que maintenant quand j'ouvre la page sur un téléphone, toutes les images qui n'ont pas de lien activé apparaissent redimensionnées, mais celles qui ont un lien gardent ce width redéfinit.


Est ce que quelqu'un pourrait m'aider à résoudre ce problème d'une façon pro ?


Merci d'avance.

[Inikaam]

Bonjour gdhia,

Au vu de la structure de ton site j'ai du mal à saisir le résultat que tu souhaites obtenir : je ne vois pas de redimensionnement d'image, par contre l'ensemble est géré par un JS qui fait autant les placements que les tailles.

Pour ce qui est de ton CSS, j'ai plusieurs remarques à te soumettre :

• Pourquoi mettre un !important sur la couleur ?
• Les tailles rem sont initialement prévues pour des font-size, pas pour des width et des border-width, utilises des %
• J'aurais tendance à suggérer que ton a et l'image qu'il contient soient en width: 100%, et que la height de ton image soit en auto, pour éviter les déformations