Pourquoi mettre un <a> avant <img src=....>

Bonjour,
c'est vraiment une question de débutant ça!
Quand on a un float installé ainsi:
<div class="floatright><a>< img src=....../></a>...</div>

Savez vous pourquoi le float ne fonctionne que si on a la balise <a>?

MErci pour vos explications.

a écrit :
Savez vous pourquoi le float ne fonctionne que si on a la balise <a>?

Il n'y a pas de raison : une balise <a> vide ne sert a priori strictement à rien.

Pour en dire plus, il faudrait avoir accès à ton code HTML et CSS.

Si tu travailles en HTML5, la balise <figure> est plus indiquée que la balise <div> pour encadrer une image.

Bonne continuation.
Modifié par thierry (19 Mar 2016 - 13:03)

abeille a écrit :
Bonjour,
c'est vraiment une question de débutant ça!
Quand on a un float installé ainsi:
&lt;div class="floatright&gt;&lt;a&gt;&lt; img src=....../&gt;&lt;/a&gt;...&lt;/div&gt;

Savez vous pourquoi le float ne fonctionne que si on a la balise &lt;a&gt;?

MErci pour vos explications.

Comme dit précédemment, il n'y a pas de raison. Montre nous ton code.

Ton code est de toute manière faux. Pourquoi ? L'attribut "href" dans un élément "a" est obligatoire !
Modifié par niuxe (19 Mar 2016 - 18:18)

Voila le Html:

<div class="floatright"><a><img src="...atome4.jpg" alt=""/></a>

Et si j'enlève le <a>, ça ne fonctionne plus.
Ou si je fais <a img src=..." aussi.

Je crois que je vais me faire taper sur les doigts! J'ai pas trop compris la balise <a>!!!

Dans ton code tu dois avoir une image cliquable.

Si tu clique sur ton image elle grossit pas par hasard ?

Nous ont tape pas sur les doigts, on met des coups de pied au fesse, c'est plus efficace

La balise </a> ferme un ordre de lien. Ca indique que c'est la fin du lien.
Modifié par Tintin75 (19 Mar 2016 - 19:54)

@abeille

Montrez-nous le CSS pour la "class" floatright tout d'abord.

Ensuite, dites-nous ce que voulez obtenir en cliquant sur l'image. Un lien vers ... ???

Enfin, il vaudrait mieux ne pas laisser l'attribut "alt" vide.

Mon image n'est pas un lien! Et quand je clique dessus, elle ne grossit pas, elle n'est pas érectile cette image. Contrairement à certains trucs. (

le Html:

<div class="floatright"><a><img src="...atome4.jpg" alt=""/></a>

Le Css:

.floatright a{
	float: left;
    border: 15px solid #F2F2F2;}

Je ne sais plus pourquoi j'ai du "floatright a{}. C'est du code qu'on m'a proposé alors que je débutais....mais maintenant je ne sais plus pour quoi il est là!

Merci pour vos explications;

Évidemment !

D'après ton code CSS, c'est le <a> qui est mis en float, et non le <div class="floatright">.

Pour résoudre ton problème, il faudrait coder :

<div class="floatright"><img src="...atome4.jpg" alt=""/></div>

et

.floatright {
	float: left;
	border: 15px solid #F2F2F2;
}

Mais ta classe .floatright toute seule, elle correspond à quoi ?
Modifié par thierry (19 Mar 2016 - 21:38)

thierry a écrit :
Évidemment !

D'après ton code CSS, c'est le &lt;a&gt; qui est mis en float, et non le &lt;div class="floatright"&gt;.

Pour résoudre ton problème, il faudrait coder :

<div class="floatright"><img src="...atome4.jpg" alt=""/></div>

et

.floatright {
	float: left;
	border: 15px solid #F2F2F2;
}

Mais ta classe .floatright toute seule, elle correspond à quoi ?

Voila, j'ai enlevé tout les <a><img src="..par des <img src="...
ça donne ça:

<div class="floatright"><img src=".......

et le CSS

.floatright{
	float: right;
    border: 15px solid #F2F2F2;}

Mais maintenant TOUTES mes images restent à gauche et sans aucun float!

Je n'avais pas pensé à une chose : <div> est un élément de type block, et les éléments de type block dont la largeur n'est pas spécifiée occupent toute la largeur de leur conteneur.

Doc, si ton élément <div> n'a pas de largeur spécifiée, tu auras beau le mettre en float, il occupera toujours toute la largeur de son conteneur, et le float n’affectera pas l'image contenue dans le <div>.

Essaie donc de donner une largeur à tes <div>.

D'autre part (je ne connais pas le contexte), as-tu vraiment besoin d'inclure tes images dans des <div> ?

Bonne continuation.

niuxe a écrit :
Ton code est de toute manière faux. Pourquoi ? L'attribut "href" dans un élément "a" est obligatoire !

Ça c'était vrai avant, mais plus depuis html5 :

Mozilla Developer Network a écrit :
Il s'agissait du seul attribut obligatoire pour définir un hyperlien, mais il n'est plus obligatoire en HTML5. Ne pas mettre cet attribut crée un lien d'espace reservé. L'attribut href indique la cible du lien, soit une URL, soit un fragment d'URL. Un fragment d'URL est un nom précédé par un dièse (#), qui indique une cible interne au document (un ID). Les URL ne se limitent pas au documents web sur HTTP. Les URL peuvent utiliser n'importe quel protocole supporté par le navigateur. Par exemple, file, ftp et mailto fonctionnent avec la plupart des agents-utilisateur.

Voir la documentation ici <a> - HTML (HyperText Markup Language) | MDN

Salut THierry

thierry a écrit :

Essaie donc de donner une largeur à tes &lt;div&gt;.

Mais ça on le définit où? Dans le CSS avec width et heidi?

thierry a écrit :
D'autre part (je ne connais pas le contexte), as-tu vraiment besoin d'inclure tes images dans des &lt;div&gt; ?
.

Oui, car j'ai du texte, et parfois une autre image incluse dans le premier DIV. Cela fait une grande image à gauche et une image plus petite à droite.

Merci pour vos explications.

abeille a écrit :
Mais maintenant TOUTES mes images restent à gauche et sans aucun float!

J'ai donc fait dans le CSS:

.floatright img{
float=right
}

abeille a écrit :
J'ai donc fait dans le CSS:

.floatright img{
float=right
}

C'est quoi ce égal ? En css il faut deux points :

.floatright img{
float: right
}

Olivier C a écrit :

C'est quoi ce égal ? En css il faut deux points :

.floatright img{
float: right
}

Oui, erreur de recopiage!

Olivier C a écrit :

Ça c'était vrai avant, mais plus depuis html5 :

Voir la documentation ici &lt;a&gt; - HTML (HyperText Markup Language) | MDN

Merci, je ne savais pas. Mais alors une ancre sans href, je vois pas l'utilité. Autant écrire un span. Au niveau sémantiqe, c'est kif kif ? Que veut dire un lien d'espace réservé ?

mdn a écrit :

Il s'agissait du seul attribut obligatoire pour définir un hyperlien, mais il n'est plus obligatoire en HTML5. Ne pas mettre cet attribut crée un lien d'espace reservé.

a écrit :
Mais ça on le définit où? Dans le CSS avec width et heidi?

Width et height, oui.

Sauf que le height ne doit pas être nécessaire, je suppose, à moins que tes divs doivent tous avoir la même heuteur ou quelque chose comme ça.

Et et mettant tes images en float: right, ça marche ?
Modifié par thierry (20 Mar 2016 - 14:46)

a écrit :
Merci, je ne savais pas. Mais alors une ancre sans href, je vois pas l'utilité. Autant écrire un span. Au niveau sémantiqe, c'est kif kif ? Que veut dire un lien d'espace réservé ?

Ce n'est sémantiquement certainement pas la même chose, sinon on ne se serait pas donné la peine de permettre cette alternative. Une règle pas forcément très scientifique dit que si on a deux synonymes parfaitement équivalents, alors un des deux finira par disparaître.


Par contre, moi non plus je ne vois pas l'utilité d'un lien sans href. Sauf si c'est équivalent à <a href="#"> (un lien qui en soit ne fait rien mais dont l'action peut être définie en JavaScript). Auquel cas ce serait un raccourci de 9 caractères.
ET je ne comprends pas non plus ce qu'est un lien d'espace réservé.
on

niuxe a écrit :
Merci, je ne savais pas. Mais alors une ancre sans href, je vois pas l'utilité. Autant écrire un span. Au niveau sémantique, c'est kif kif ? Que veut dire un lien d'espace réservé ?

Je n'en sais rien, je n'ai pas compris l'intérêt pour l'instant et je n'ai rien trouvé de significatif sur le web, je l'ai juste mis dans un coin de ma tête en attendant.

Ce pourrait être le sujet d'un nouveau topic sur le forum...
Modifié par Olivier C (21 Mar 2016 - 08:57)

niuxe a écrit :
Que veut dire un lien d'espace réservé ?

Je l'ai traduit ainsi :
Un espace de lien réservé, donc une balise dépourvue d'attribut href, est à mon sens une balise complétée par un traitement côté client.
J'imagine bien cette balise avec un Id ou une Classe captée à la volée par du JS qui insère un lien (plutôt une référence) de façon dynamique.
Pure hypothèse bien sûr !
Modifié par Greg_Lumiere (21 Mar 2016 - 11:42)