CODEWITHSUNDEEP
htmlcss
user1444393
user1444393

Reputation: 233

customize the audio tag position

I have the following HTML code:

<body id="mybg">

<div id="countdown-11"></div>
<br>
<audio id="myaudio" src="music/forestsounds.ogg" controls="controls" loop="loop"></audio>
</body>

where the <div> is a coundown timer, I want to put the audio component below the countdown timer... in this case they are superimposed.

I tried with this CSS code:

#myaudio{
bottom: 10px;
}

But no result. What's wrong?

Upvotes: 0

Views: 2751

Answers (3)

Gunaseelan
Gunaseelan

Reputation: 2542

As we have discussed, This Fiddle is fulfill your requirement.

CSS Code:

#countdown-11{
  clear:both;
  background: #444 !important;
  color:#FFF;
  margin:4px;
  padding:4px;
}
#myaudio{
   clear:both;
}

Upvotes: 0

Kebab Programmer
Kebab Programmer

Reputation: 1219

Use Position Absolute to change the position of the div dynamically

#myaudio
{
   position:absolute;
   top:10%;
   left:10%;
}

The percentage values can be changed depending on where you want the "myaudio" div to go

Hope This Helps :)

Upvotes: 0

QUB3X
QUB3X

Reputation: 536

Try to add to the audio tag in the css the following code:

position: absolute;

then use top, left, etc. to move it.

Upvotes: 2

Related Questions