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
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
A voir également:
- HTML code image par automatiquement à la ligne
- Aller à la ligne excel - Guide
- Google recherche par image - Guide
- Apparaitre hors ligne instagram - Guide
- Image iso - Guide
- Vente en ligne particulier - Guide
5 réponses
txiki
Messages postés
6597
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
515
Modifié le 16 févr. 2022 à 16:38
Modifié le 16 févr. 2022 à 16:38
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.
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
16 févr. 2022 à 13:06
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
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
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
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>
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
524
16 févr. 2022 à 13:39
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
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
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
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
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
524
16 févr. 2022 à 16:04
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 :
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.
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
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 ? :$
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:39
16 févr. 2022 à 17:39
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
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
16 févr. 2022 à 18:16
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 :
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" />
16 févr. 2022 à 16:51
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
16 févr. 2022 à 17:09
16 févr. 2022 à 17:23
16 févr. 2022 à 17:36
Explications ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
16 févr. 2022 à 18:02