5568 sujets

Sémantique web et HTML

Balise ImG dans une Balise A

Pages :
Bonjour,

Dans une cellule d'1 tableau, j'ai une balise A dans laquelle je mets une balise IMG et une balise DIV

La balise DIV est initialement caché (display none)
et mon image est centré verticalement

lorsque je passe la souris sur l'image (je fais appraitre la balise DIV avec du CSS) en bas à droite de mon écran ==> ca ca marche

MAIS mon probleme est que mon image se décale vers le haut de la cellule

Quelqu'un a til une solution pour éviter ce décalage ?

d'avance merci
Bonjour,

Je voulais juste réagir à ceci:
fredo25 a écrit :
j'ai une balise A dans laquelle je mets une balise IMG et une balise DIV
La balise a ne peut contenir d'éléments de type "bloc" tel que le div.
je pense que tu n'as pas compris mon IMG est directement dans la balise A


j'ai parlé de la balise DIV pour etre complet
Salut,

T'aider sans voir le problème sur une page en ligne, ou au moins sur un extrait du code risque d'être irréalisable Smiley cligne
voila l'estrait de mon code

print("<td id='tdfoto' style='background-repeat: no-repeat;' valign='middle' align='center' background='/images/photo/carre-vignette-v8.jpg' width='108' height='108'>");
print("<a class='agrandir-div' href='#zoom' onClick='zoomfoto(".$row["noproduit"].",document.gestfoto.indexphoto.value,\"".htmlentities(addslashes($row["nomproduit"]),ENT_QUOTES)."\");'>");
// *** photos 1 à x (voir champ nbphoto dans table produit)
print("<img alt='Zoom - Photo non contractuelle' name='photoprod' border='0' vspace='0' hspace='0' src='$srcfotoprod' align='center'>");
print("<div $bugie id='divgrand'>");
$srcfotoprod_grand = $repfotoprod."prod".$row["noproduit"]."-1-grand.jpg";
print("<table width='415' height='415' background='/images/photo/carre-grand.gif' border='0' style='background-repeat: no-repeat;'>");
print("<tr>");
print("<td align='center'>");
print("<img name='photogrand' src='".$srcfotoprod_grand."' alt='".htmlentities($row["nomproduit"],ENT_QUOTES)."' border='0' vspace='0' hspace='0'>");
print("</td>");
print("</tr>");
print("</table>");
print("</div>");
print("</a>");
print("</td>");


extait de mon fichier style CSS (pour balise A)

.agrandir-img {text-decoration: none; border: 0; display:block;}
.agrandir-img:hover {text-decoration: none; background: none; border : 0; }
.agrandir-img img {border:0;}
.agrandir-img div {display: none;}
.agrandir-img:hover div {display: inline; position: absolute; z-index:1; top:130px; right:0px; border: 0; padding: 0;}
.agrandir-div {display: none; position: absolute; z-index:1; bottom:0px; right:0px; border: 0; padding: 0;}
Modérateur
Bonsoir fredo25,

Merci d'éditer ton message pour le mettre entre les balises [code ]...[ /code] (sans espaces) comme indiqué dans la FAQ.

Par ailleurs, pour une meilleure lisibilité, il est préférable d'indiquer ton code une fois interprété (sans PHP).

Merci. Smiley smile
Modifié par koala64 (28 Dec 2006 - 00:25)
Modérateur
Pourquoi as-tu mis ceci dans un tableau (est-ce des données tabulaires ?) et pourquoi as-tu des informations de style dans le HTML ? (ce n'est pas son rôle mais celui de CSS)

fredo25 a écrit :
c'est vrai mais cele fonctionne quand meme
Tu ne peux pas l'assurer quelquesoit le support vu que dans ce cas, ton code est invalide...
Modifié par koala64 (28 Dec 2006 - 00:26)
je mets dans un tableau pour pouvoir centrer verticalement mon image (et cela pour tous navigateur) sinon cela est impossible

sinon pour le style : rien n'empeche qu'il soit dans les balises
Modérateur
fredo25 a écrit :
je mets dans un tableau pour pouvoir centrer verticalement mon image (et cela pour tous navigateur) sinon cela est impossible
Bien sûr que si que c'est possible...
Exemple :
<!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" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css">/*<![CDATA[*/

img
{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -120px;
	margin-top: -62px;
	display: block;
}

		/*]]>*/</style>
	</head>	
	<body>

<img src="logo.gif" width="240" height="124" alt="mon logo" />

	</body>
</html>
Pour y arriver, il suffit simplement de passer la balise img en block...
Mais pour que tu renonces si vite de le faire via CSS, il semble que tu n'ais pas compris en quoi la présentation en tableau était néfaste... (tout le monde ne se sert pas de navigateurs graphiques et ta structure n'est pas forcémment logique pour quelqu'un qui ne dispose pas de l'un de ceux-ci). Tout dépend de ce que tu souhaites transmettre comme information et non comme présentation...
fredo a écrit :
sinon pour le style : rien n'empeche qu'il soit dans les balises
Effectivement mis à part que tu codes comme ceux qui ont choisis de ne pas évoluer...
Je te conseille vivement la lecture de ce document :
Pourquoi est-il souhaitable de séparer le contenu de la présentation ?
Tu peux faire bien plus de choses avec CSS que tu ne le ferais en HTML...

Je te précise simplement que tu es sur un forum dédié aux standards et que si tu n'es pas là pour aller dans ce sens, d'autres forums seront plus adaptés à tes besoins...

Merci par ailleurs de modifier ton code précédent comme je te l'ai demandé... Smiley ohwell
Modifié par koala64 (28 Dec 2006 - 01:25)
Salut,

fredo25 a écrit :

sinon pour le style : rien n'empeche qu'il soit dans les balises

Tout à fait et c'est une possibilité très pratique parfois. Mais il faut bien comprendre que cela ne peut concerner que des gens expérimentés dans l'usage des css.

la logique :
J'y connais rien et je met mes style n'importe où, puis je comprend un peu mieux et je me décide à les regrouper dans le head du document, puis j'arrête les frais et je les met enfin dans un fichier.css externe et lié.

Ben c'est tête droit dans le mur et grosses bosses à l'arrivée Smiley cligne

Par contre la logique :
toute css est externalisée... Puis dans certaines circonstances particulières j'utilise une css spécifique à un document déclarée dans le head de celui ci... Puis dans certaines circonstances très particulières et de préférence anecdotiques je me risque à un ajout d'une valeur de propriété dans le balisage lui même.

Ben là effectivement ça peut être très pratique... ... Mais ça ne concerne pas du tout les débutants.

fredo25 a écrit :
c'est vrai mais cele fonctionne quand meme

pfiouffff !!! ... Heureusement que c'est la trêve de Noël Smiley cligne

Pour faire court, ce n'est pas parce que les navigateurs ont intégré un processus de gestion des errreurs les plus lamentables des développeurs défaillants qu'il faut se croire tout permis. Ce d'autant plus qu'avec un code non défaillant et bien miraculeusement ça marche aussi ^^ Incroyable Non ??? Smiley lol

fredo25 a écrit :
je mets dans un tableau pour pouvoir centrer verticalement mon image (et cela pour tous navigateur) sinon cela est impossible

+1 en général


Bon, en fait je pense que tu t'embêtes à obtenir un effet de comportement avec une solution css. C'est sans doute une erreur de méthode et une solution javascript conviendrait bien mieux. En étant vigilant, et sur ce forum c'est assez facile, ça ne devrait pas poser de problèmes particuliers (accessibilité, obstruction si js inactif, etc ...)


à Koala > La technique des marges négatives pour centrer un élément doit être, hors le cas de valeurs très faibles, complètement éradiquée du catalogue des solutions possibles. C'est une catastrophe complète du point de vue de l'accessibilité, contenu potentiellement hors du viewport sans aucun défilement possible pour l'atteindre. Et pi il faut pas mettre <img> en enfant direct de <body> Smiley cligne
Modifié par clb56 (28 Dec 2006 - 03:09)
Modérateur
erf... ne pas coder après minuit... je me le suis déjà dit mais je suis têtu... Smiley rolleyes

... donc ok pour les marges négatives sur le centrage horizontal ainsi que de ne pas mettre img en enfant direct du body mais si je mets ça :
<!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" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css">/*<![CDATA[*/

div
{
	text-align: center;
}
div img
{
	position: absolute;
	top: 50%;
	margin: -62px -120px;
}

		/*]]>*/</style>
	</head>	
	<body>

<div>
	<img src="logo.gif" width="240" height="124" alt="mon logo" />
</div>

	</body>
</html>
Quel serait le problème ? Smiley sweatdrop

Je n'ai pas bien saisi :
a écrit :
(...) contenu potentiellement hors du viewport sans aucun défilement possible pour l'atteindre.
Voudrais-tu dire que même pour un centrage vertical, il serait préférable de le faire via JS ? Smiley confuse S'il y a problème en CSS, on va avoir le même en JS mais dans les deux cas, ça se désactive (au pire)...
pour le centrage vertical je disais que c'était impossible parceque mon image à une hauteur variable donc le coup des 50% ne fonctionne plus
Modérateur
Il me semble t'avoir demandé par deux fois de modifier le code non balisé, non ? Smiley smile

Au cas où tu ne l'as pas compris, il règne ici une bonne ambiance que nous essayons de maintenir... Depuis le début, je te vois donner des informations au compte-goutte, contredire, systématiquement et sous une forme assez désagréable, ceux qui tentent de t'aider (alors que tu ne maitrises visiblement pas la technique) et te moquer éperdumment des injonctions d'un modérateur... Si tu cherches le banissement, je peux te venir en aide...

C'est le dernier avertissement ; je te laisse choisir... Smiley cligne
PARDON ??

QUi est désagréable ? alors que je me fais agresser lors de mes premiers post


je suis encore tomber sur un forum de donneurs de leçon qui passe leur temps à ne pas répondre au question

bon tant pis je vais aller voir ailleurs
Modérateur
Personne n'a souhaité te donner de leçons... ce ne sont que des conseils... et je ne vois pas ici où tu t'es fait agresser... Si tu parles de mes demandes, c'est mon rôle de modérateur et je le fais sans aucune animosité envers toi...

Le principe n'est pas te donner une réponse toute faite mais de t'y mener progressivement afin que tu en comprennes les diverses contraintes et les moindres rouages... Si certains ont mis d'autres points en exergue, c'est peut-être parce que tu ne t'y prenais pas comme il faut (ça arrive à tout le monde)

a écrit :
bon tant pis je vais aller voir ailleurs
ça aussi, c'est off-topic...
Modifié par koala64 (28 Dec 2006 - 11:48)
koala64 a écrit :
Voudrais-tu dire que même pour un centrage vertical, il serait préférable de le faire via JS ? Smiley confuse S'il y a problème en CSS, on va avoir le même en JS mais dans les deux cas, ça se désactive (au pire)...


Salut,

Ah oui, j'ai répondu un peu trop en raccourci. Je ne parlais pas du centrage vertical pour l'utilisation du js mais de l'effet montrer/cacher un texte. Le poblème exposé dans le premier post repose sur le fait que l'image et le texte (à fredo25 > Texte à mettre dans un span et non dans un div !!!) ont le même parent. cette contrainte on peut facilement et très légitimement s'en débarassé en obtenant l'effet via javascript au lieu de css comme c'est le cas pour l'instant.

Si l'on fait

<p id="conteneur_image">
<a href=""><img src="" /></a>
</p>
<p id="conteneur_texte_a_montrer">
Texte à montrer
</p>


Avec un javascript qui tue dont je te laisse apprécier l'élégance Smiley langue Smiley lol 

function effet_image() {
document.getElementById('conteneur_image').document.getElementsByTagName(a[0]).onmouseover= function() {
document.getElementById('conteneur_texte_a_montrer').style.display="block";
}
}

window.onload=effet_image();


Alors le conteneur de l'image n'est plus déterminé par la présence du texte quand il passe en display:block;.
Pages :
Sujet clos
Aller à