don't click here

Need Help w/HTML + CSS Coding -- Overlaying Text On Images w/Horizontal Scrolling

Discussion in 'Technical Discussion' started by T.Q., Jul 16, 2023.

  1. Jul 16, 2023 #1
    T.Q.

    T.Q.

    The Sims 2, Tim Drake [Robin] Member
    570
    88
    28
    Earth, Milky Way Galaxy
    Hi.

    I'm looking for assistance on how to place text over images that at exactly 200px in height, but varying widths.

    This is what it currently looks like:

    upload_2023-7-16_13-22-56.png

    I'm trying to achieve text showing like this:

    upload_2023-7-16_13-29-2.png

    I was trying to achieve it, and have been successful, but the tutorials I find keep dividing the images line by line instead of keeping it on 1 line that scrolls.

    I'm not sure what I'm doing wrong, but below is an extract of the coding prior to placement of the text. Can anyone help?

    Code (Text):
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta name="viewport" content="width=auto, initial-scale=1">
    5. <style>
    6. @font-face {font-family: Marcellus SC; src: url(http://tbq.x10host.com/tunisia69_files/main.ttf);}
    7. .responsive {width: 100%; max-width: 544px; height: auto;}
    8. .scrollheader {background-color: #444444; overflow: auto;}
    9. .scrollmenu {background-color: #111111; overflow: auto; white-space: nowrap;}
    10. .headermajor {font-family: Marcellus SC; font-size: 20.0pt; color: #DDD9C3;}
    11. .headerminor {font-family: Marcellus SC; font-size:14.0pt; color: #DDD9C3;}
    12. .headerspace {padding: 2.0pt;}
    13. </style>
    14. </head>
    15. <body bgcolor="#222222">
    16. <div align=center class="scrollheader">
    17.   <p style='text-align:center'>&nbsp</p>
    18.   <p style="text-align:center; font-size:20.0pt; font-family:'Baskerville Old Face',serif; color: #F2F2F2"><b>ONLINE WORLD CURRENCY STORE</b></p>
    19.   </div>
    20. <div align=center class="headerspace"></div>
    21. <div align=center class="headermajor">AFGHANISTAN</div>
    22. <div align=center class="headerspace"></div>
    23. <div class="scrollmenu">
    24.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan47.html target=main><img height=200 title="(1973) P-47" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan47_files/image001.jpg" loading="lazy"></a>
    25.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan55.html target=main><img height=200 title="(1979) P-55" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan55_files/image001.jpg" loading="lazy"></a>
    26.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan57.html target=main><img height=200 title="(1991) P-57" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan57_files/image001.jpg" loading="lazy"></a>
    27.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan58.html target=main><img height=200 title="(1991) P-58" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan58_files/image001.jpg" loading="lazy"></a>
    28.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan60.html target=main><img height=200 title="(1991) P-60" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan60_files/image001.jpg" loading="lazy"></a>
    29.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan61.html target=main><img height=200 title="(1991) P-61" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan61_files/image001.jpg" loading="lazy"></a>
    30.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan62.html target=main><img height=200 title="(1993) P-62" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan62_files/image001.jpg" loading="lazy"></a>
    31.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan63.html target=main><img height=200 title="(1993) P-63" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan63_files/image001.jpg" loading="lazy"></a>
    32.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan64.html target=main><img height=200 title="(2002) P-64" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan64_files/image001.jpg" loading="lazy"></a>
    33.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan65.html target=main><img height=200 title="(2002) P-65" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan65_files/image001.jpg" loading="lazy"></a>
    34.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan66.html target=main><img height=200 title="(2002) P-66" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan66_files/image001.jpg" loading="lazy"></a>
    35.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan67.html target=main><img height=200 title="(2008) P-67" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan67_files/image001.jpg" loading="lazy"></a>
    36.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan67A.html target=main><img height=200 title="(2012) P-67A" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan67A_files/image001.jpg" loading="lazy"></a>
    37.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan68.html target=main><img height=200 title="(2016) P-68" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan68_files/image001.jpg" loading="lazy"></a>
    38. </div>
    39. <div align=center class="headerspace"></div>
    40. <div align=center class="headermajor">ALGERIA</div>
    41. <div align=center class="headerspace"></div>
    42. <div class="scrollmenu">
    43.   <a href=http://gsthemes.freehostia.com/BANKNOTE/algeria130.html target=main><img height=200 title="(1977) P-130" src="http://gsthemes.freehostia.com/BANKNOTE/algeria130_files/image001.jpg" loading="lazy"></a>
    44.   <a href=http://gsthemes.freehostia.com/BANKNOTE/algeria137.html target=main><img height=200 title="(1992) P-137" src="http://gsthemes.freehostia.com/BANKNOTE/algeria137_files/image001.jpg" loading="lazy"></a>
    45.   <a href=http://gsthemes.freehostia.com/BANKNOTE/algeria138.html target=main><img height=200 title="(1992) P-138" src="http://gsthemes.freehostia.com/BANKNOTE/algeria138_files/image001.jpg" loading="lazy"></a>
    46. </div>
    47. </body>
    48. </html>
     

    Attached Files:

  2. Jul 17, 2023 #2
    Billy

    Billy

    RIP Oderus Urungus Member
    2,124
    185
    43
    Colorado, USA
    Indie games
    What solutions have you tried? I suspect there's a missing piece, like adding a float or something (though those can be tricky to get working and often take a lot of tweaking in my experience, as you may or may not know). Another solution I thought of that may or may not work is setting up a div or span with the dimensions you want and using the image as the background. Someone with more CSS experience than me (I'm also a bit rusty) could probably knock out a solution, but personally I always have to do a good bit of trial and error to get what I want.
     
  3. Jul 17, 2023 #3
    T.Q.

    T.Q.

    The Sims 2, Tim Drake [Robin] Member
    570
    88
    28
    Earth, Milky Way Galaxy
    Oh yeah, of course, that would help.

    Here's the code, and this is what it looks like:

    upload_2023-7-17_18-3-21.png

    So the problem I'm encountering is that the images are not side-by-side. That would be my goal (along with continuing the horizontal scrolling).

    Code (Text):
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta name="viewport" content="width=auto, initial-scale=1">
    5. <style>
    6. @font-face {font-family: Marcellus SC; src: url(http://tbq.x10host.com/tunisia69_files/main.ttf);}
    7. .responsive {width: 100%; max-width: 544px; height: auto;}
    8. .scrollheader {background-color: #444444; overflow: auto;}
    9. .scrollmenu {background-color: #111111; overflow: auto; white-space: nowrap;}
    10. .headermajor {font-family: Marcellus SC; font-size: 20.0pt; color: #DDD9C3;}
    11. .headerminor {font-family: Marcellus SC; font-size:14.0pt; color: #DDD9C3;}
    12. .headerspace {padding: 2.0pt;}
    13. .image-container {position: relative; color: white;}
    14. .image-overlay {position: absolute; left: 6px; bottom: 10px; background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 4px; font-size: 12px;}
    15. </style>
    16. </head>
    17. <body bgcolor="#222222">
    18. <div align=center class="scrollheader">
    19.   <p style='text-align:center'>&nbsp</p>
    20.   <p style="text-align:center; font-size:20.0pt; font-family:'Baskerville Old Face',serif; color: #F2F2F2"><b>ONLINE WORLD CURRENCY STORE</b></p>
    21.   </div>
    22. <div align=center class="headerspace"></div>
    23. <div align=center class="headermajor">AFGHANISTAN</div>
    24. <div align=center class="headerspace"></div>
    25. <div class="scrollmenu">
    26.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan47.html target=main><img height=200 title="(1973) P-47" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan47_files/image001.jpg" loading="lazy"></a>
    27.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan55.html target=main><img height=200 title="(1979) P-55" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan55_files/image001.jpg" loading="lazy"></a>
    28.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan57.html target=main><img height=200 title="(1991) P-57" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan57_files/image001.jpg" loading="lazy"></a>
    29.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan58.html target=main><img height=200 title="(1991) P-58" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan58_files/image001.jpg" loading="lazy"></a>
    30.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan60.html target=main><img height=200 title="(1991) P-60" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan60_files/image001.jpg" loading="lazy"></a>
    31.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan61.html target=main><img height=200 title="(1991) P-61" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan61_files/image001.jpg" loading="lazy"></a>
    32.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan62.html target=main><img height=200 title="(1993) P-62" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan62_files/image001.jpg" loading="lazy"></a>
    33.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan63.html target=main><img height=200 title="(1993) P-63" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan63_files/image001.jpg" loading="lazy"></a>
    34.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan64.html target=main><img height=200 title="(2002) P-64" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan64_files/image001.jpg" loading="lazy"></a>
    35.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan65.html target=main><img height=200 title="(2002) P-65" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan65_files/image001.jpg" loading="lazy"></a>
    36.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan66.html target=main><img height=200 title="(2002) P-66" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan66_files/image001.jpg" loading="lazy"></a>
    37.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan67.html target=main><img height=200 title="(2008) P-67" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan67_files/image001.jpg" loading="lazy"></a>
    38.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan67A.html target=main><img height=200 title="(2012) P-67A" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan67A_files/image001.jpg" loading="lazy"></a>
    39.   <a href=http://gsthemes.freehostia.com/BANKNOTE/afghanistan68.html target=main><img height=200 title="(2016) P-68" src="http://gsthemes.freehostia.com/BANKNOTE/afghanistan68_files/image001.jpg" loading="lazy"></a>
    40. </div>
    41. <div align=center class="headerspace"></div>
    42. <div align=center class="headermajor">ALGERIA</div>
    43. <div align=center class="headerspace"></div>
    44. <div class="scrollmenu">
    45.     <div class="image-container">
    46.     <a href="http://gsthemes.freehostia.com/BANKNOTE/algeria130.html" target="main">
    47.       <img height="200" title="(1977) P-130" src="http://gsthemes.freehostia.com/BANKNOTE/algeria130_files/image001.jpg" loading="lazy">
    48.       <div class="image-overlay">(1977) P-130</div>
    49.     </a>
    50.     </div>
    51.     <div class="image-container">
    52.     <a href="http://gsthemes.freehostia.com/BANKNOTE/algeria137.html" target="main">
    53.       <img height="200" title="(1992) P-137" src="http://gsthemes.freehostia.com/BANKNOTE/algeria137_files/image001.jpg" loading="lazy">
    54.       <div class="image-overlay">(1992) P-137</div>
    55.     </a>
    56.     </div>
    57.     <div class="image-container">
    58.     <a href="http://gsthemes.freehostia.com/BANKNOTE/algeria138.html" target="main">
    59.       <img height="200" title="(1992) P-138" src="http://gsthemes.freehostia.com/BANKNOTE/algeria138_files/image001.jpg" loading="lazy">
    60.       <div class="image-overlay">(1992) P-138</div>
    61.     </a>
    62.     </div>
    63. </div>
    64. </body>
    65. </html>
     
  4. Jul 17, 2023 #4
    Billy

    Billy

    RIP Oderus Urungus Member
    2,124
    185
    43
    Colorado, USA
    Indie games
    I was able to fix your solution by changing the divs into spans:
    [​IMG]

    Code (Text):
    1. <div class="scrollmenu">
    2.     <span class="image-container">
    3.     <a href="http://gsthemes.freehostia.com/BANKNOTE/algeria130.html" target="main">
    4.       <img height="200" title="(1977) P-130" src="http://gsthemes.freehostia.com/BANKNOTE/algeria130_files/image001.jpg" loading="lazy">
    5.       <span class="image-overlay">(1977) P-130</span>
    6.     </a>
    7.     </span>
    8.     <span class="image-container">
    9.     <a href="http://gsthemes.freehostia.com/BANKNOTE/algeria137.html" target="main">
    10.       <img height="200" title="(1992) P-137" src="http://gsthemes.freehostia.com/BANKNOTE/algeria137_files/image001.jpg" loading="lazy">
    11.       <span class="image-overlay">(1992) P-137</span>
    12.     </a>
    13.     </span>
    14.     <span class="image-container">
    15.     <a href="http://gsthemes.freehostia.com/BANKNOTE/algeria138.html" target="main">
    16.       <img height="200" title="(1992) P-138" src="http://gsthemes.freehostia.com/BANKNOTE/algeria138_files/image001.jpg" loading="lazy">
    17.       <span class="image-overlay">(1992) P-138</span>
    18.     </a>
    19.     </span>
    20. </div>
    It was also showing the link underlines between the images, so I added this to the CSS:
    Code (Text):
    1. .image-container a { text-decoration: none; }

    Not sure if it's totally what you're after, may need further tweaking.
     
  5. Jul 17, 2023 #5
    T.Q.

    T.Q.

    The Sims 2, Tim Drake [Robin] Member
    570
    88
    28
    Earth, Milky Way Galaxy
    Oh wow, really? It was that simple? Amazing!

    I obviously didn't have enough knowledge about div and span tags.

    Thank you for that! Now I can insert that for all the images now.
     
  6. Jul 18, 2023 #6
    Hivebrain

    Hivebrain

    Administrator
    3,049
    162
    43
    53.4N, 1.5W
    Github
    "display: inline-block" will make a div behave like a span.
     
    • Like Like x 2
    • Informative Informative x 1
    • List
  7. Jul 19, 2023 #7
    T.Q.

    T.Q.

    The Sims 2, Tim Drake [Robin] Member
    570
    88
    28
    Earth, Milky Way Galaxy
    Um hum, that's good to know as well. Welp, it seems to have worked, here's the link to my page. All those images have their labels now.

    Another project for the website that I will have to determine is how to reference data from a database (or excel sheet) placed on the server so that if information is updated, it gets reflected on the individual banknote pages.

    I'm guessing it's possible, but maybe not via an Excel sheet?
     
    Last edited: Jul 19, 2023
  8. Jul 20, 2023 #8
    tokumaru

    tokumaru

    Member
    905
    40
    28
    Rio de Janeiro
    "Real" websites use systems with databases for this, but you can get the information from anywhere you want if you can write the code to fetch and parse it, be it from a database, a file or whatever. I'm sure that there are libraries to parse Excel files available out there, but you could also use CSV, XML or JSON, which are more common. Either way, you'll still have to write the portion that loops through the data and generates dynamic HTML code from it.

    Ideally, this would be code running on the host server (so that users don't have access to your Excel/whatever data file), but could just as easily be implemented in JavaScript running on the client side if you prefer and don't mind users peeking into the internals of your page.
     
    Last edited: Jul 20, 2023