My attempts to decrease the volume of an HTML5/CSS3 Audio element have been unsuccessful

Hey there! I'm currently working on my very first webpage and recently added an audio element that is functioning perfectly. The only issue I'm encountering is trying to position the element at the bottom of my page.

I've already attempted the following:

  • Extensive Google searches for a solution
  • Seeking advice from individuals with more expertise than me
  • Using <br> multiple times (which kind of worked but created a messy layout)

Below, you'll find snippets of my HTML and CSS code. Feel free to ask if you require more information; however, please keep it concise as I believe learning is best achieved through hands-on experience. Unfortunately, this particular challenge has left me quite stuck in my learning journey.

HTML

 <audio src="music.mp3" controls>   
            <embed 
                src="music.mp3"
                width="300"
                height="90"
                loop="true"
                autostart="false" />
        </audio>

CSS

 audio {
    top:1200px;
    vertical-align: bottom;
}

On a side note, I also experimented with margin-bottom, but unfortunately couldn't get it to work as desired.

csshtml

Answer №2

For the CSS property top:1200px; to work properly, it is necessary to include a declaration of position:absolute, position:relative, or position:fixed.

If none of these positions are included, you can choose to use margin-top instead of top.

Another option is to enclose the audio element within a div and position that div according to your needs.

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

Is it possible to use Selenium with Python for copying and pasting

Is there a way to use control + A in Selenium Python to select text and then retrieve the highlighted text? ...

javascriptpythonhtmlselenium-webdriverweb-scraping

Retrieve JSON data from an external link and showcase it within a div, unfortunately encountering an issue with the functionality

Encountering the error message "XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access" Check out the plunker link for more information: http ...

javascripthtmljsonajaxgetjson

Attempting to align input fields and spans side by side

Is there a way to properly align multiple inputs next to each other with dots in between, resembling an IPv4 address? Currently, the span appears to float in the center. How can this be resolved? It's worth noting that all elements in the image have b ...

css

Center-align the text in mui's textfield

What I'm looking for is this: https://i.stack.imgur.com/ny3cy.png Here's what I ended up with: https://i.stack.imgur.com/vh7Lw.png I attempted to apply the style to my input props, but unfortunately, it didn't work. Any suggestions? Than ...

javascriptcssmaterial-ui

What in the world is going on with this code snippet? I'm completely stumped on how to fix this problem

Attempting to generate a custom element with unique properties function y(){ var g=document.createElement("div"); this.label="elephant"; return g; } y.prototype.customFunction=function(){ alert(arguments[0]+this.label); }; var b=new y(); b ...

javascripthtmlcustom-attributes

Are there any options available for customizing the animation settings on the UI-bootstrap's carousel feature?

If you're interested in seeing an example of the standard configuration, check out this link. It's surprising how scarce the documentation is for many of the features that the UIB team has developed... I'm curious if anyone here has experie ...

javascriptcssangularjsangular-ui-bootstrapcss-animations

Add the onclick() functionality to a personalized Angular 4 directive

I'm facing an issue with accessing the style of a button in my directive. I want to add a margin-left property to the button using an onclick() function in the directive. However, it doesn't seem to be working. Strangely, setting the CSS from the ...

javascriptcssangulartypescriptangularjs-directive

Encountering an issue when trying to use SVG clip-path in Safari

I'm currently experimenting with creating a unique hexagonal border around a button. My approach involves enlarging the container element by a few pixels compared to the button size and using the same clip-mask on both elements to achieve a bordered e ...

htmlcsssvgsafariclip-path

React - Next Blog: Issue with empty lines displaying on the browser

Currently, I am developing a blog that retrieves data from Mongo Atlas. The blog is built using Next.js version 9.5.4 and is hosted on Vercel. The blog page utilizes static props and regeneration. The data is fetched in JSON format and then stringified fo ...

htmlcssreactjsclassnext.js

Extract time value from html datetimepicker input

Recently, I've been utilizing a datetime_picker that I found on the web to create a value for an html text input. However, I encountered a problem in separating the value into distinct date and time components. When using the date_picker, the TEXT inp ...

phphtml

What techniques can I use to achieve a seamless transition using Javascript and CSS?

I'm striving for a seamless CSS transition. The concept of transition had me puzzled. Even though I utilized the setTimeout method in JavaScript to make my CSS functional, it lacks that SMOOTH feel! Check out my code below. function slideChange( ...

javascripthtmlcss

What is the best way to transfer an element and all its children to another div without losing any jQuery functionality?

At first, sharing an example of the JavaScript and HTML from my page is challenging because I couldn't make it work on JSfiddle. The issue I'm facing involves jQuery on a page where I've created two tabs. Essentially, it's the same con ...

javascriptjqueryhtmlcssdom

One method I use to retrieve ajax data and assign it before rendering the view

Despite putting the ajax.get in the created function, I am still unable to retrieve the ap_name value. This issue is related to vue.js created: function () { ajax.get('/envs').then(function (res) { this.apName = res.AP_NAME; ...

javascripthtmlvue.js

What is the best way to allow wider list items to overflow their absolutely positioned container?

My challenge involves a list that is dynamically populated, and I require it to be wider than its absolutely-positioned parent (specifically a custom <select> element implementation). #wrapper { position: relative; border: 1px ...

htmlcssinternet-explorer-11

How can I modify my code to ensure that trs and th elements are not selected if their display property is set to none?

I am currently working on creating a filter for my pivot table, but I am unsure of how to dynamically calculate the sum of each row/column based on whether they are displayed or not. If you need any other part of my code, feel free to ask. To hide employee ...

javascripthtmlhtml-table

The placement of the floating element completely messes up the

Whenever I try to float an element in my magnificent popup, the layout gets all messed up. You can see for yourself by trying to put the image and text next to each other using "float: left": http://jsfiddle.net/a7Vj8/1/ Every time I attempt to float th ...

htmlcss

Switch between showing and hiding a div by clicking on an image

Currently, I am experimenting with the toggle div function and utilizing images as triggers for toggling. For instance, when a div is closed, an image of a "plus" sign indicates to the user that it can be expanded, and vice versa for compressing the div. T ...

javascripthtmljqueryjquery-uijquery-events

A cookie designed to store and retain the preferred CSS stylesheet choice

I'm looking to create a cookie that will store the preference for a specific CSS stylesheet. I currently have a function in place that allows me to switch between stylesheets: function swapStylesheet(sheet){ document.getElementById('pagestyl ...

javascripthtmlcss

Get the username from Parse instead of using the ObjectID

When using angular and Parse for JavaScript, I have implemented a search field where an admin can input the objectid of a user to display their details. However, I would like to modify this functionality so that the admin can enter the username instead of ...

javascriptjqueryhtmlangularjsparse-platform

Is it necessary to adjust my font stack for optimal viewing on a high DPI tablet or computer screen?

My CSS includes the following font definition: html { font-size: 95%; font-family: Arial, Helvetica, sans-serif } I want my application to display well on PC, iOS, and Android tablets. I am aware that different devices have varying resolutions. C ...

androidhtmlioscssfont-size