HTML code image par automatiquement à la ligne
Résolu
bobymcc
Messages postés
61
Date d'inscription
Statut
Membre
Dernière intervention
-
bobymcc Messages postés 61 Date d'inscription Statut Membre Dernière intervention -
bobymcc Messages postés 61 Date d'inscription Statut Membre Dernière intervention -
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
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
- Code ascii - Guide
- Aller à la ligne excel - Guide
- Comment déverrouiller un téléphone quand on a oublié le code - Guide
- Partager photos en ligne - Guide
- Code puk bloqué - Guide
5 réponses
Salut à tous,
Utilise le bouton "code" de la barre de mise en forme
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.
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.
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
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
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>
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>
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
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
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
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
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 :
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.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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 :
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" />
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
Explications ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code