Captivating Images accompanied by Descriptive Captions

I was wondering if there is a straightforward method using only CSS and HTML to address this particular issue.
I am in the process of creating a marquee that displays images within a fixed-width div. The number of images exceeds the capacity of the div, causing overflow. The basic marquee function works fine, displaying the overflow images sequentially.
<marquee>
<img ..... />
<img ..... />
<img ..... />
</marquee>

However, I would like to add a caption, specifically the image name below each image. The challenge I'm encountering is that when I attempt to include this using simple markup or CSS, instead of keeping the images within the marquee on a single line, the overflow images outside the div stack up below the initial images. This results in multiple rows as more images are added (not moving within the marquee).

I have experimented with enclosing each image in its own separate div, corresponding to the text below it. Additionally, I've tried utilizing multiple span elements with a block display and fixed width matching the image width for each image - essentially creating a separate line of text beneath each image.
Further attempts involve using HTML5 tags such as <figure> and <figcaption>, but the same issue persists in some form or another.

If there exists a solution to this predicament using solely HTML and CSS, please advise.
P.S. It is worth noting that this page is static.

Thank you in advance.

Answer №1

The marquee element is considered a non-standard tag, and is not recommended for use in HTML4 or HTML5. According to W3C guidelines, HTML should be used solely for markup purposes, rather than for formatting or animations. Instead of using the marquee tag, consider implementing one of these alternatives that adhere to web standards:

JavaScript or jQuery

You can utilize a slider script with JavaScript or jQuery.

CSS3

Implement a marquee animation using CSS3.

Answer №2

<html>
<head>

</head>
<body>
<marquee direction="left"><table><tr><td style="min-width:250px;"><img src="images/img1.png"  alt="" style="width:155px;height:79px;" /><img src="images/img2.png"  alt="" style="width:155px;height:79px;" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</br></br><span style="padding-right:20%;">Insert title-1 here</span><span style="padding-right:20%;">Insert title-2 here</span></td></tr></table></marquee>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Resolving Conflicting CSS Styles

It's frustrating to constantly have to ask questions. I've been struggling to implement code on my website, but every time I try to add something new, it just doesn't work. I even tried changing the CSS names, thinking that might solve the i ...

What can I do to stop my list items from dropping below the menu even when there isn't enough space?

I'm facing an issue with my menu and despite several attempts, I can't seem to resolve it. In Firefox, everything looks fine, but in other browsers, the last anchor tag inside my menu keeps collapsing underneath. I've tried various solutions ...

What is the best method for displaying a wbmp image on an HTML page?

In my recent HTML file, I included the following code: <!DOCTYPE html> <html> <body> <img src="thieftitle.wbmp" alt="W3Schools.com" width="104" height="142"> </body> </html> t ...

I am encountering an issue where my ejs file is not rendering properly even after moving my static files to the public folder and including the line of code app.use(express.static("public")). Can anyone help

After relocating the index.html and css files to the public folder and adding app.use(express.static("public)) in app.js, everything was working fine and the list.ejs was rendering correctly. However, there seems to be an issue now. const express = re ...

The icon cannot be displayed using the <use> tag in HTML

While examining the source code, I stumbled upon the <use></use> tag. <use xlink:href="#icon-ghost"></use> I couldn't find extensive information about this particular tag. Can someone explain what it is and how it is typicall ...

Unable to view the image in browsers other than Internet Explorer

On a webpage, there is a feature where clicking on the "Add More" link should display an input box and a "Delete" button image. Surprisingly, this functionality works perfectly on IE browsers, but not on Mozilla or Chrome. In non-IE browsers, only the text ...

Position the div to the right of a left navigation bar instead of beneath it using Bootstrap 5

After using the code snippet from , I'm struggling to align content to the right of the navigation bar. It seems like a simple issue related to changes in Bootstrap 5 that I can't seem to figure out. <div class="d-flex flex-column vh-100 ...

I have configured my CSS styles in the module.css file of my Next.js application, but unfortunately, they are not being applied

I recently developed a nextjs with electron template application: Here is the link to my code on CodeSandbox: https://codesandbox.io/s/sx6qfm In my code, I have defined CSS classes in VscodeLayout.module.css: .container { width: '100%'; he ...

When I start scrolling down, the Jumptron background image vanishes

Utilizing bootstrap jumptron with a background image has led to an issue where the background image disappears as I scroll down, leaving only the jumptron div class displaying the heading. How can this be fixed so that the image remains visible even when s ...

Designing Post Archive with Flexbox to create dynamic layouts

I am currently exploring different techniques to style my columns, and I have encountered an issue where if there are less than 4 posts in a row, there is extra space between each post. While I understand that floats can resolve this problem, I am searchin ...

Stop webpage loading with -webkit-transform

I recently encountered a frustrating issue with the Background Image display problem on iPad. I received advice to add -webkit-transform: translateZ(0); to the id, which initially fixed the problem but then led to a new issue. While it resolved the backgro ...

What could be the reason for the HTML canvas not displaying anything after a new element is added?

How come the HTML canvas stops showing anything after adding a new element? Here is my HTML canvas, which works perfectly fine until I add a new element to the DOM: <canvas class="id-canvas", width="1025", height="600"> ...

The <a> tag does not have the clickability feature

My personal website doesn't allow me to click on the links that I have added for web pages. Here is the CSS code I am using: @font-face { font-family: typewrite; src: url(fonts/typewcond_regular.otf); } @font-face { font-family: typewrite; sr ...

Adding a luminous glow effect to the <a> tag upon selection

Currently, I am working on integrating a navigation bar into a test site. I have noticed that some navigation bars highlight the current selected page by adding a bar underneath or creating a glowing effect around the <a> tag. I am unsure of the corr ...

Arranging several lists in a row without any specific order

I am trying to arrange multiple <ul> elements on the same line to create a shop-like display for products. Currently, I have set up several unordered list tags: ul { display: inline; } li { list-style: none; } <ul> <li>& ...

Why has my dropdown menu decided to go horizontal, rather than dropping down as it should?

Hi there! I'm new to css and tried following a tutorial with some tweaks. However, when adding a drop down menu using lists, it ended up going sideways instead of downward. Can anyone help me out? I also would like to have a collapsible menu implemen ...

Comparing the benefits of a 3-column flow layout to a traditional

I've been wondering about the popularity of 3 column flow layouts compared to using a table with 3 columns and one row. Can someone explain the advantages and disadvantages of using a flow layout versus a table layout for this scenario? Thank you ...

Is it possible to utilize retina images with CSS3's :before selector?

Can I adjust the size of an image inserted using :before? For example, if I want to use a high resolution image in the content below - how can I specify the dimensions? .buy_tickets_btn:before{ content: url(../images/buttons/pink_ticket_btn_bg.pn ...

What is the easiest and most straightforward method for deploying HTML and JavaScript in Service Mix?

I am currently working on a small HTML/web page project and I am interested in deploying service mix. Although I have knowledge of the web page side and I am familiar with service mix, I haven't ventured into using a simple HTML/JavaScript setup withi ...

Adding a class to an element can be easily achieved when both input fields have values

Is it possible to apply the "active" class to the element go_back_right only when both inputs with classes search_box_name and search_box_id have content in them? I've tried looking for solutions on this platform, but being new to JavaScript, I couldn ...