How can i write something on the side of an image in html? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

How can i write something on the side of an image in html?

I used the <img> tag, but if i try to write something later it ends up below the image (with or without<figcaption>). I need to write stuff on the right side. Thanks already for the answer!

29th Dec 2020, 12:38 AM
Paolo Mastrogiovanni
Paolo Mastrogiovanni - avatar
18 Answers
+ 3
It's by default paragraph or other content will start from below! You have to use position element in CSS. You can float the image right/left, where you want!
29th Dec 2020, 5:06 AM
Nilesh Roy
Nilesh Roy - avatar
+ 3
<p><img style = “float:(left or right); width:(insert)px; height:(insert)px” > text </p> Using the float value make it float to the right or the left of the text. Make sure to have the <p> tag. This website explains it better than me: w3schools.com/css/css_float.asp
30th Dec 2020, 10:12 PM
BlueTiger435
BlueTiger435 - avatar
+ 2
You should position the text with CSS using the "position" property.
29th Dec 2020, 3:06 AM
:DD
:DD - avatar
+ 2
And what if in css it is declared by the container in display: flex; and flex-direction: row; to position it to the side: https://code.sololearn.com/W9nBfTtoeWIW/?ref=app
29th Dec 2020, 12:53 PM
Daniel Briceño
Daniel Briceño - avatar
+ 2
You can also put the title attribute that places the text inside an image: example: <img src="url" alt="texto" title="texto for img"></img> but it is not highly recommended because there is a browser that does not give them much importance and shows when the pointer is inside it
29th Dec 2020, 1:01 PM
Daniel Briceño
Daniel Briceño - avatar
+ 2
you want to put it inside the image - this question should come first
29th Dec 2020, 1:02 PM
Daniel Briceño
Daniel Briceño - avatar
+ 2
I recommend php and css watermark with a position solid and contend in a div con vw , No px only vw or vh too. con css flex @media screen
30th Dec 2020, 5:02 PM
Mi Camino Es Boxeador Profesional = Jhon / Tux
Mi Camino Es Boxeador Profesional = Jhon / Tux - avatar
+ 2
else the animation css
30th Dec 2020, 5:03 PM
Mi Camino Es Boxeador Profesional = Jhon / Tux
Mi Camino Es Boxeador Profesional = Jhon / Tux - avatar
+ 2
Use photo editor
30th Dec 2020, 10:21 PM
Václav Hajšman
Václav Hajšman - avatar
+ 1
It is helpful to show your code bit. That way we can actually see what is going wrong.
29th Dec 2020, 11:30 PM
Chris Coder
Chris Coder - avatar
+ 1
You can create a canvas and set your image as background and then render texts on it.
30th Dec 2020, 6:17 PM
Em Leons
Em Leons - avatar
0
Do you need help? write your code in the massage service and i help you, yes, I know
30th Dec 2020, 4:52 PM
Mi Camino Es Boxeador Profesional = Jhon / Tux
Mi Camino Es Boxeador Profesional = Jhon / Tux - avatar
0
make the adapted content
30th Dec 2020, 5:06 PM
Mi Camino Es Boxeador Profesional = Jhon / Tux
Mi Camino Es Boxeador Profesional = Jhon / Tux - avatar
0
Thanks everybody for the help! I'm just getting started learning html and i didn't approach yet other languages like css or php. I guess that when i will start with those i will understand much more!
30th Dec 2020, 5:21 PM
Paolo Mastrogiovanni
Paolo Mastrogiovanni - avatar
0
is with js=iframe border: 0px too css from javascript is better
2nd Jan 2021, 4:44 AM
Mi Camino Es Boxeador Profesional = Jhon / Tux
Mi Camino Es Boxeador Profesional = Jhon / Tux - avatar
0
You can nest the img tag into the paragraph element. <p><img>Image</p> If you want the text before then put the text before the image. <p>image<img></p> <p><img src="https://apk-dl.com/detail/image/com.sololearn.htmltrial-w250.png">Hello</p>
3rd Jan 2021, 1:00 AM
Chris Coder
Chris Coder - avatar
0
a
3rd Oct 2023, 8:12 AM
JennaLloyd