HTML code image par automatiquement à la ligne

Résolu/Fermé

bobymcc Messages postés 61 Date d'inscription dimanche 17 janvier 2021 Statut Membre Dernière intervention 6 mars 2022 - 16 févr. 2022 à 10:25
bobymcc Messages postés 61 Date d'inscription dimanche 17 janvier 2021 Statut Membre Dernière intervention 6 mars 2022 - 16 févr. 2022 à 18:16

Bonjour,

j'ai mis ce code qui est une phrase suivi par une petite image, hors ce que je comprend pas c'est que l'image part automatiquement à la ligne et reste pas sur la même ligne que mon texte.

Je sais pas ce que je dois enlever du code pour par que sa le face repartir à la ligne.

<h4><b>Suivez simplement ces étapes pour accéder à la plate-forme<img src="images/fresh.png" width="93" height="27" loading="lazy" data-path="local-images:/fresh.png" /></b></h4>

Vous en remerciant par avance

A voir également:

HTML code image par automatiquement à la ligne
Aller à la ligne excel - Guide
Code ascii de a - Guide
Code puk bloqué - Guide
Partager photos en ligne - Guide
Site de vente en ligne particulier - Guide

5 réponses

Réponse 1 / 5

txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 518
Modifié le 16 févr. 2022 à 16:38

Salut à tous,
Utilise le bouton "code" de la barre de mise en forme

▼

puis choisir le langage utilisé pour le code que tu veux montrer. Ce sera plus clair pour tous. Merci.
Oui une image est de type "bloc" par défaut tout comme le "p" (pour paragraphe) par exemple.
Si tu veux mettre l'image a la suite de ton texte utilise la propriété "inline" pour ton image. Tu pourra aussi mettre plusieurs images les unes a coté des autres.
--
Le bonheur est la seule chose que l'on peut donner sans l'avoir.

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
16 févr. 2022 à 16:51

Merci pour le rappel de la balise de code.

Non justement c'est l'inverse, par défaut les balises img sont de type inline ;)
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Img#mettre_en_forme_avec_css

txiki Messages postés 6596 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 518 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
16 févr. 2022 à 17:09

Hum ! pour avoir fait un paquet de sites, c'était comme ça. J'utilisais aussi le "float". Faut dire qu'il y a longtemps, avant le html5.

bobymcc Messages postés 61 Date d'inscription dimanche 17 janvier 2021 Statut Membre Dernière intervention 6 mars 2022
16 févr. 2022 à 17:23

Merci pour le retour, mais je ne trouve pas cette icone pour le faire :( ci-joint tous ce que j'ai

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525 > bobymcc Messages postés 61 Date d'inscription dimanche 17 janvier 2021 Statut Membre Dernière intervention 6 mars 2022
16 févr. 2022 à 17:36

La balise de code ne concerne pas Joomla, il s'agit de la balise que tu dois utiliser pour rendre ton code plus lisible sur ce forum.
Explications ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
16 févr. 2022 à 18:02

Désolé il faut vraiment que je me relise, il s'agit de la classe d-inline-block, elle doit donc être dans un attribut class et pas dans loading :

<img class="d-inline-block" src="images/icones/mobile.png" alt="mobile" width="21" height="25" loading="lazy" data-path="local-images:/icones/mobile.png" />

Réponse 2 / 5

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
16 févr. 2022 à 13:06

Bonjour,

Si la largeur de la page n'est pas trop petite, l'image s'affiche bien à coté du texte : https://jsfiddle.net/g31x6jkw/

Le problème doit donc venir d'un autre code sur ta page. Pas de fichier/code css sur la page ?
Utilise l'Inspecteur dans les outils de développement de ton navigateur (clic droit dans la page puis Inspecter) pour voir le code css appliqué sur tes balises.

Utilise également le validateur w3c pour corriger les éventuelles erreurs de syntaxe html (copier le code source de la page affiché dans la navigateur dans l'onglet "Validate by Direct Input" :
https://validator.w3.org/#validate_by_input

Réponse 3 / 5

bobymcc Messages postés 61 Date d'inscription dimanche 17 janvier 2021 Statut Membre Dernière intervention 6 mars 2022
16 févr. 2022 à 13:10

Bonjour ,

merci pour ton retour, voici tous le code de ma page, toutes les endroits ou j'ai des images ca part à la ligne :( alors que si je met le visuel de ma page HTML il est bien à coté mais des que je met en vision publication ils sont en de sous.
Ce que je comprend pas car voit pas de balise pour dire à la ligne

<table style="border-collapse: collapse; width: 100.06%; height: 549px;" border="0">
<tbody>
<tr>
<td style="width: 100%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/freshtime%20temperature.jpg" width="943" height="488" loading="lazy" data-path="local-images:/freshtime temperature.jpg" /></td>
</tr>
</tbody>
</table>
<p> </p>
<table style="border-collapse: collapse; width: 99.9601%;" border="0">
<tbody>
<tr>
<td style="width: 49.6707%;">
<figure class="image Pourquoi"><img class="Pourquoi" src="images/why.png" alt="Pourquoi" width="450" height="338" loading="lazy" data-path="local-images:/why.png" />
<figcaption></figcaption>
</figure>
</td>
<td style="width: 49.6707%;">
<h1><b>POURQUOI?</b></h1>
<p>Sécurité de la chaîne du froid</p>
<p><a href="http://businesshumanconnect.com/Images/Rapport.pdf">Rapport</a> automatique et permanent (Ex. : service Hygiène)</p>
<p>Calibrage porté à 3 ans.</p>
<p>Contrôle du système à distance en temps réel</p>
<p>Installation légère sans fil et rapide</p>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 99.9601%;" border="0">
<tbody>
<tr>
<td style="width: 100%;">
<h1 style="text-align: center;"> </h1>
<h1 style="text-align: center;"> </h1>
<h1 style="text-align: center;"><b>MATÉRIELS</b></h1>
<p> </p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="images/Materiel%20Freshtime.png" width="875" height="510" loading="lazy" data-path="local-images:/Materiel Freshtime.png" /></p>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 99.9601%; height: 906.1px;" border="0">
<tbody>
<tr style="height: 906.1px;">
<td style="width: 99.6407%; height: 906.1px;">
<h1 style="text-align: center;"> </h1>
<h1 style="text-align: center;"> </h1>
<h1 style="text-align: center;"><b>PRÉSENTATION</b></h1>
<p><b><video style="width: 995px; height: 747px;" controls="controls" width="995" height="747">
<source src="images/videos/Business%20Human%20Connect.mp4" type="video/mp4" /></video></b></p>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 99.9601%; height: 443px;" border="0">
<tbody>
<tr>
<td style="width: 100%;">
<p> </p>
<h1 style="text-align: center;"><b>PLATE-FORME POUR PRODUIT</b></h1>
<h5 style="text-align: center;"><b><span style="font-size: 18px;">Il existe une plate-forme spécifique pour le produit <img src="images/fresh.png" width="93" height="27" loading="lazy" data-path="local-images:/fresh.png" /></span></b></h5>
<p> </p>
<table style="border-collapse: collapse; width: 100.1%;" border="0">
<tbody>
<tr>
<td style="width: 45.0902%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://businesshumanconnect.com/Images/Screenshot%20(125).png" width="448" height="194" /></td>
<td style="width: 54.8096%;">
<h4><b>Suivez simplement ces étapes pour accéder à la plate-forme<img src="images/fresh.png" width="93" height="27" loading="lazy" data-path="local-images:/fresh.png" /></b></h4>
<p>1. Cliquez sur ce <a href="https://freshtime.businesshumanconnect.com/" target="_blank" rel="noopener">lien pour accéder à la plate-forme</a></p>
<p>2. En cliquant sur le lien ci-dessus, vous mènera directement à la plate-forme.</p>
<p>3. Entrez le nom d'utilisateur et le mot de passe ci-dessous,</p>
<p><strong>Nom d'utilisateur - demo@businesshumanconnect.com</strong></p>
<p><strong>Mot de passe - demo2017</strong></p>
<p>4. Vous obtiendrez une démonstration de notre produit.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 99.9601%;" border="0">
<tbody>
<tr>
<td style="width: 49.6707%;"> </td>
<td style="width: 49.6707%;">
<h2 class="text-center"> </h2>
<h2 class="text-center">CONTACT</h2>
<p> </p>
</td>
</tr>
<tr>
<td style="width: 49.6707%;">
<p>Vous organisez un évènement, vous souhaitez communiquer rapidement et partager vos informations d'un simple geste ?</p>
<p>N'hésitez pas à nous contacter pour plus d'informations sur nos produits ou pour toutes autres questions.</p>
<p> <img src="images/icones/map.png" width="18" height="20" loading="lazy" data-path="local-images:/icones/map.png" /> 20 bd Princesse Charlotte, 98000 Monaco</p>
<p> <img src="images/icones/mobile.png" width="17" height="19" loading="lazy" data-path="local-images:/icones/mobile.png" />+33 6.49.83.15.98</p>
<p> <img src="images/icones/contact.png" width="22" height="20" loading="lazy" data-path="local-images:/icones/contact.png" /><a href="mailto:contact@businesshumanconnect.com">contact@businesshumanconnect.com</a></p>
<p> </p>
</td>
<td style="width: 49.6707%; text-align: center;">{loadmoduleid 110}</td>
</tr>
</tbody>
</table>

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
16 févr. 2022 à 13:39

Le problème doit venir d'un autre code sur ton site (surement coté css) lors de la publication de cette page.

Depuis quand tu rencontres ce problème sur les images, c'est suite à l'installation/la mise à jour du thème ou d'un plugin ?

Fait un clic droit dans la page sur ton navigateur puis clique sur Inspecter pour ouvrir les outils de développement de ton navigateur.
Clique ensuite sur le bouton de sélection d'élément et sélectionne une balise img. Enfin, regarde dans le panneau css quel est le code css appliqué sur la balise img.
Plus de détails (pour Firefox mais l'équivalent existe sur les autres navigateurs) : https://developer.mozilla.org/fr/docs/Tools/Page_Inspector/UI_Tour#le_bouton_de_s%C3%A9lection_d'%C3%A9l%C3%A9ments

Réponse 4 / 5

bobymcc Messages postés 61 Date d'inscription dimanche 17 janvier 2021 Statut Membre Dernière intervention 6 mars 2022
16 févr. 2022 à 14:07

merci ,

Alors je viens me mettre sur joomla je me forme avec des tuto donc toujours hu le souci car nouveau.

J'ai pas trouvé css, voici un imprime ecrant

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
16 févr. 2022 à 16:04

Sur la capture d'écran, on voit en effet que le problème vient bien du css.

Dans le panneau css, on peut voir que que plusieurs propriétés css sont appliquées sur la balise img :

img {
    display: block;
    max-width: 100%;
    height: auto;
}

C'est la propriété display: block; dans ce code qui force les images à s'afficher sous forme de bloc, donc à la ligne.
Il faut donc supprimer cette propriété pour corriger ton soucis. Le fichier template.css à corriger doit se trouver dans le dossier de ton template Joomla.

bobymcc Messages postés 61 Date d'inscription dimanche 17 janvier 2021 Statut Membre Dernière intervention 6 mars 2022 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
16 févr. 2022 à 17:25

Merci pour le retour, j'ai regarde dans mon dossier de site internet fait une recherche template.css j'en ai 6 laquel je dois prendre ? :$

j'ai trouvé plusieurs fichier avec ce nom et dans tous les fichiers dans images j'ai block, je met quoi à la place de block svp ?

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
16 févr. 2022 à 18:16

Si tu ne sais pas ce que tu fais, ne modifie pas les fichiers css de ton template, tu risques d'avoir plus de problème.

Une solution simple est d'ajouter un attribut style sur ta balise img :

<img style="display: inline-block;" src="images/powered_by.png" width="294" height="44" loading="lazy" data-path="local-images:/powered_by.png" />

Discussions similaires

Que veut dire "correspondant occupé" lors d'un appel ?

Retour à la ligne tchat.