How to write text below every image in marquee slide show [closed]

StackOverflow https://stackoverflow.com/questions/22635775

  •  20-06-2023
  •  | 
  •  

Question

I want to write three lines of text below every image in this marquee slide-show.

Fiddle

<marquee bgcolor="#FFFFFF" height="5%" width="600px" direction="left" scrolldelay="120" align="middle" >
    <img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" width="120px" height="120px" border="5"/>
    <img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" width="120px" height="120px" border="5"/>
    <img src="http://www.pictures-of-cats.org/images/ragdoll-cat-small-pictures-of-cats.jpg" height="120px" width="120px" border="5"/>
    <img src="http://www.pictures-of-cats.org/images/ragdoll-cat-small-pictures-of-cats.jpg" height="120px" width="120px" border="5" />
    <img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" height="120px" width="120px" border="5" />
    <img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" height="120px" width="120px" border="5" />
    <img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" height="120px" width="120px" border="5"/>
    <img src="Animal68.gif" height="120px" width="120px" border="5" />
    <img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" height="120px" width="120px" border="5" />
    <img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" height="120px" width="120px" border="5" />
</marquee>
Was it helpful?

Solution

Is this what you are looking for?:

JSFIDDLE

wrapping img tag with a div then style it like this: .item { float:left} (class item it is whatever you like, i just used here because that was the class used on the FIDDLE)

OTHER TIPS

Avoid using <marquee> for images! But if you need to, then you can use it this way: Fiddle

<marquee bgcolor="#FFFFFF" height="5%" width="600px" direction="left" scrolldelay="120" align="middle" >
    <div style="width:120px; display: inline-block">                    
        <img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" width="120px" height="120px" border="5"/>
        <div>Text</div>
    </div>
    <div style="width:120px; display: inline-block">                    
        <img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" width="120px" height="120px" border="5"/>
        <div>Text</div>
    </div>
</marquee>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top