Styling elements with CSS layers

I have been trying to make text flow across the screen against a stunning matrix background. Every time I attempt it, the marquee seems to push the matrix down and leaves an unsightly black gap. My goal is to position the matrix (div columns) so that they stretch to the top of the page but stay behind the marquee. I've played around with CSS absolute positioning, but I must be missing something... Here's how my code looks at the moment.

<html>
<head>
<HTA:APPLICATION  
APPLICATIONNAME="Matrix"  
VERSION="1.0.0.0" 
AUTHOR="Someone"

BORDER="none"  
INNERBORDER="no"  
CAPTION="no"  
SYSMENU="no"  
MAXIMIZEBUTTON="no"  
MINIMIZEBUTTON="no"  
ICON="NO"  
SCROLL="no"  
SCROLLFLAT="yes"  
SINGLEINSTANCE="yes"  
WINDOWSTATE="maximize"  
SHOWINTASKBAR="no"  
CONTEXTMENU="no"  
SELECTION="no"/> 

<title>Matrix © 2017</title>
<style type="text/css">
body{
background-color: black; 
color: DarkSlateGray; 
font-size: 20px;
}
div{
width: 20px; 
float: left;
}
</style>

<font color="#FF0000" size="+3"><marquee>Marquee Text Here</marquee></font>

...

Answer №1

When it comes to the use of position: absolute, you are right on point. Ensure that this code is included in your CSS:

marquee {
  position: absolute;
}

A quick note from the comments section: The marquee element within a tag has become outdated for quite some time now. Best of luck with this!...

body{
background-color: black; 
color: DarkSlateGray; 
font-size: 20px;
}
div{
width: 20px; 
float: left;
}
marquee {
  position: absolute;
}
<html>
<head>
<HTA:APPLICATION  
APPLICATIONNAME="Matrix"  
VERSION="1.0.0.0" 
AUTHOR="Someone"

BORDER="none"  
INNERBORDER="no"  
CAPTION="no"  
SYSMENU="no"  
MAXIMIZEBUTTON="no"  
MINIMIZEBUTTON="no"  
ICON="NO"  
SCROLL="no"  
SCROLLFLAT="yes"  
SINGLEINSTANCE="yes"  
WINDOWSTATE="maximize"  
SHOWINTASKBAR="no"  
CONTEXTMENU="no"  
SELECTION="no"/> 

<title>Matrix © 2017</title>

<font color="#FF0000" size="+3"><marquee>Marquee Text Here</marquee></font>

... (snipped for brevity) ...

</script>
</head>
<body>

... (snipped for brevity) ...

<embed src="don.mp3" autostart="true" loop="true">  
</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

What is the best way to emphasize the current page within my Bootstrap <nav> menu?

Below is the Bootstrap code that defines our main menu navigation: <div class="col-xl-9 col-lg-9"> <div class="main-menu d-none d-lg-block"> <nav> ...

How can I center an image in HTML while maintaining a slight margin at the bottom

I am facing a minor issue with the bottom margin of an image. I can't figure out why there is a small gap between the image and the menu below. Can someone provide an explanation? My goal is to have the menu align perfectly with the image, but for so ...

What is the best way to align a div and two buttons with respect to an image within an li element?

I am trying to adjust the positioning of text on top of an image with a 40px margin. Additionally, I want to place two buttons on each side of the list item (one on the right and one on the left). Despite numerous attempts with various solutions, including ...

Amusing antics observed when hovering over a div in Firefox

Issue resolved, many thanks to all Here is the dilemma I am dealing with something like this <a href='http://google.com' class="buy_now" > <div class='yada yada' > Go </div> </a> buy_now changes backgro ...

Unfortunately, Node Sass does not have compatibility with your current environment, which is Windows 64-bit with an unsupported runtime

Having been a regular user of Node.js to utilize gulp and sass for my HTML projects, I recently encountered a new issue. An error message stating "Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (57)" has no ...

Leverage the power of Angular UI Bootstrap to create an interactive Carousel Form

Is it possible for someone to create a custom ui.bootstrap carousel with a manual sliding button, along with two divs containing content? I'm having trouble understanding how to implement carousels based solely on their provided example in the documen ...

Implementing reCAPTCHA and PHP for Email Form Submission

Currently using GoDaddy as the web host for my website. Struggling to integrate reCAPTCHA into the email form on my site. I successfully pass the reCAPTCHA test, but emails are not being sent. So far, the website has been built using PHP and HTML only. ...

Is it possible to retrieve specific information from a website using the rvest package?

I've been attempting to extract and display the review rating of a song through web scraping using rvest in R from Pitchfork. The rating for this particular song is 8.5, but unfortunately, I am encountering an issue as shown below: https://i.sstatic.n ...

Create a Sleek Dropdown Navigation Menu with MaterializeCSS in WordPress

I am having trouble displaying the dropdown menu on my WordPress website. How can I make sure the dropdown menu appears properly? functions.php register_nav_menus( array( 'primary' => __( 'Primary Menu', 'TNCTR-OnePage' ) ...

Looking to create a full-width image slider for your webpage without using absolute positioning? Here's how!

Recently, I added a Slider to my website officesincambridge.co.uk. I decided to make the slider go the full width of the page by adjusting the div it was wrapped in: .custom-slider { position:absolute; //added left: 0; //added width: 100%;} This c ...

Mastering jQuery placement using CSS3 "transform: scale"

There seems to be an issue with jQuery not functioning well with CSS "transform: scale()" (however, it works fine with "transform: translate()") Please examine this straightforward example: $(document).ready(function() { $('#root').dblclic ...

What is the best way to center and restrict the content on a page using Bootstrap?

I am trying to achieve a similar effect in Bootstrap 5 as the following CSS code: margin: 0 auto; width:60%; In Bootstrap, this code aligns items to the left of the page rather than center. How can I limit the width to the middle 60% and then distribute t ...

The dilemma of modifying the base input style in Streamlit

st.write('This is just a simple example', title) st.markdown("<style>.stTextInput > label {font-size:120%; font- weight:bold; color:white; background:linear-gradient(to bottom, #3399ff 0%,#00ffff 100%);border: 2px ;border-radiu ...

html occasionally fails to render in emails

Recently, I created a Java code to send HTML emails. The code works perfectly when sending the emails to multiple recipients at once. Below is the sample code: String content="<html><p><h1>This is my first Java email with an image but wi ...

Maintaining aspect ratio while keeping images the same height and responsive

I have encountered a challenging issue that remains unresolved despite my extensive search for an answer. I have not found a solution in the "Questions that may already have your answer" section, nor have I discovered one elsewhere on the web. Here is the ...

Trouble with video embedding not adjusting properly within a Bootstrap 5 carousel

I'm currently facing an issue with two video embeds in a carousel. One has a standard bootstrap size of 16x9, while the other has a custom size of 4x5. Even though I'm using the embed-responsive code for both videos, none of them scale responsiv ...

Iterate through each checkbox within a specific classed div to check for selected options

Is there a way to loop through specific checkboxes with a particular class inside a div without assigning individual IDs to each one? I want to avoid the manual process of adding IDs. Below is the code snippet: JS <script> function calculate() { ...

CSS can be utilized to craft intricate and dynamic shapes

Currently, I am attempting to produce a trapeze-like design utilizing various techniques in order to achieve the best possible outcome. The shape I am aiming to create is similar to this: (the content inside the shape will consist of images and text) Th ...

Eliminate HTML tags when CKEDITOR is switched

I recently switched from a normal textarea to CKEDITOR, with a toggle button that allows users to switch between the two. However, I encountered an issue where HTML tags are not removed after destroying CKEDITOR if there was existing content in it when swi ...

Is there a way to change OTF/TTF file formats into EOT?

Is there a simpler way to convert my OTF/TTF fonts to EOT format for Microsoft browsers' @font-face feature? I attempted using the WEFT tool but without success. Any alternative methods available? ...