Bonjour,
ENVIRONNEMENT: XHTML 1.0 Transitional
SITUATION: En cours de refonte sur un site, dans un p, un div ou dans une td, il me faut centrer une image reactive.
RAISONNEMENT: j'utilise par exemple <p><a ... ><img ... /><a></p>.
<p> element: inline par défaut, <a> element: inline par defaut, <img> element: vide.
En fonction de la css:
<p> est en texte centre,
<a> entoure <img> de la couleur choisie.
RESULTAT ATTENDU: avoir l'image <img> au centre de <p> entouree a cote par la bordure de <a>; ce a partir de CSS donc quelque soit la taille de l'image (bien sur compatible avec la taille de div de p ou de td). (il s'agit de vignettes que l'on peut agrandir)
RESUTLAT OBTENU:
Sous IE 7.0: OK
Sous FF 3.0.4: KO
l'image est bien centree mais la bordure de <a> entoure seulement une partie du bas de l'image.
ESSAI 1: je force la declaration de <a> a block {display: block}. je transforme le <p> en <div> puisque j'introduis un block (<a>). (<div> a toujours un texte-align: center).
RESULTAT 1:
Sous IE 7.0:
Sous FF 3.0.4: maintenant <a> entoure bien l'image, MAIS les bordures vont jusqu'au bord de <div>, ce dont je ne veux pas.
COMPLEMENTS:
- CPLT1: je pourrai utiliser margin: 0px auto 0px auto, mais dans ce cas il faut un width, ce qui necessiterait une class ou un id par largeur de vignette (pas genial),
- CPLT2: en faisant des essais, j'ai eu un resultat qui n'ai pas celui que je veux obtenir mais qui peut aider. Si je fais flotter <a> a gauche par exemple {float: left}, alors <a> entoure bien <img> immediatement a cote.
Voila j'espere avoir ete clair, j'ai (re)lu des tutoriels (je sais que lire peutr etre different de comprendre).
Si quelqu'un a un peu (?) de temps.
Merci.
Enfin voici un extrait du code au point de depart ("RESULTAT1"):
-- XHTML --
-- CSS --
ENVIRONNEMENT: XHTML 1.0 Transitional
SITUATION: En cours de refonte sur un site, dans un p, un div ou dans une td, il me faut centrer une image reactive.
RAISONNEMENT: j'utilise par exemple <p><a ... ><img ... /><a></p>.
<p> element: inline par défaut, <a> element: inline par defaut, <img> element: vide.
En fonction de la css:
<p> est en texte centre,
<a> entoure <img> de la couleur choisie.
RESULTAT ATTENDU: avoir l'image <img> au centre de <p> entouree a cote par la bordure de <a>; ce a partir de CSS donc quelque soit la taille de l'image (bien sur compatible avec la taille de div de p ou de td). (il s'agit de vignettes que l'on peut agrandir)
RESUTLAT OBTENU:
Sous IE 7.0: OK
Sous FF 3.0.4: KO
l'image est bien centree mais la bordure de <a> entoure seulement une partie du bas de l'image.
ESSAI 1: je force la declaration de <a> a block {display: block}. je transforme le <p> en <div> puisque j'introduis un block (<a>). (<div> a toujours un texte-align: center).
RESULTAT 1:
Sous IE 7.0:
Sous FF 3.0.4: maintenant <a> entoure bien l'image, MAIS les bordures vont jusqu'au bord de <div>, ce dont je ne veux pas.
COMPLEMENTS:
- CPLT1: je pourrai utiliser margin: 0px auto 0px auto, mais dans ce cas il faut un width, ce qui necessiterait une class ou un id par largeur de vignette (pas genial),
- CPLT2: en faisant des essais, j'ai eu un resultat qui n'ai pas celui que je veux obtenir mais qui peut aider. Si je fais flotter <a> a gauche par exemple {float: left}, alors <a> entoure bien <img> immediatement a cote.
Voila j'espere avoir ete clair, j'ai (re)lu des tutoriels (je sais que lire peutr etre different de comprendre).
Si quelqu'un a un peu (?) de temps.
Merci.
Enfin voici un extrait du code au point de depart ("RESULTAT1"):
-- XHTML --
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.W3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="fr">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="language" content="fr" />
<meta http-equiv="Content-Language" content="fr" />
<link rel="stylesheet" type="text/css" href="./Styles/AfsCalX.css" media="screen" />
</head>
<body>
<div class="cadcal">
<div class="centre1">
<a class="agrdim1" href="./ProgReg/CVP15000.pdf" target="_new" title=" Affiche du 150ème anniversaire du CVP "><img class="affreg" src="CVP15002.png" height="114px" width="80px" alt="Affiche du 150ème anniversaire du CVP" /></a>
</div>
</div>
</body>
-- CSS --
body {text-align: center; background: #303030; color:#808080}
/* valeurs standards */
.haut {vertical-align: top}
.bas {vertical-align: bottom}
.floatg {float: left}
.floatd {float: right}
.centre1 {margin: 0px auto 0px auto}
.centre2 {text-align: center}
/* Largeur utilisable 805px pour les ecrans 1024 */
div.cadcal {display: block; width: 805px; background: url("bckcalA.jpg") repeat-y 0px 0px; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; padding: 10px 0px 0px 0px; border: none}
/* affiche de regate avec agrandissement */
img.affreg
{margin: 0px 0px 0px 0px; padding: 1px 1px 1px 1px; border: 5px solid #404040; background: #000000}
a.agrdim1:active, a.agrdim1:link, a.agrdim1:visited
{margin: 0px 0px 0px 0px; text-decoration: none; padding: 0px 0px 0px 0px; border-top: 1px solid #505050; border-right: 1px solid #303030; border-bottom: 1px solid #303030; border-left: 1px solid #505050}
a.agrdim1:hover
{margin: 0px 0px 0px 0px; text-decoration: none; padding: 0px 0px 0px 0px; border-top: 1px solid #E04040; border-right: 1px solid #A02020; border-bottom: 1px solid #A02020; border-left: 1px solid #E04040}