Quote:
Originally Posted by rightawn
The audio player doesn't necessarily need to be inside of the SVG.
...
So far, I've had issues with the audio player appearing on different pages than the image. I want them tp display together.
|
Then the solution is easy. Just put the audio control and the image inside a <div> with the property "display: inline-block". You should have something like this:
Code:
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo.</p>
<div class="inblock">
<audio class="sound" controls="controls" src="../Audio/Track18.mp3">Track18</audio>
<img class="full" alt="leopard" src="../Images/leopard.jpg"/>
</div>
<p>Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus.</p>
</body>
And your .css stylesheet should have the following:
Code:
p {
text-align: justify;
line-height: 1.2em;
font-size: 1em;
margin: 0;
}
.inblock {
display: inline-block;
margin: 1em 0;
}
.sound {
width: 100%;
margin-bottom: 1em;
}
.full {
width: 100%;
}
With that code your audio control and image will remain together. I attach an epub with an example so you can watch the code better.
EDIT: The code can be modified a bit if you want to limit the height of the image to a percentage of the screen height, since that is also possible to get.