html - Positioning a div between two buttons -
i'm trying have remote control buttons, , div playing info between 2 of them.
but doesn't work.
as can see, on actual ipad, renders differently, , don't know how fix it.
html:
<div id="buttons"> <button id="prev" class="control" onmousedown="skip('prev')"></button> <div id="info"> gfegrbhthehrerhg</div> <button id="next" class="control" onmousedown="skip('next')"></button><br /> <button id="rwd" class="control" onmousedown="changespeed(-2)"></button> <button id="stop" class="control" onmousedown="emitcommand('stop')"></button> <button id="play" class="control" onmousedown="emitcommand('play: loop: true speed: 100')"></button> <button id="ffwd" class="control" onmousedown="changespeed(2)"></button>
css:
button.control { display: inline-block; width:150px; height:150px; background-size: 150px 150px; border:0; margin: 0.5%; } div#info { width:300px; height: 150px; margin: 0 1.1%; position: relative; top: -58px; margin-bottom: -50px; border:1px solid red; display: inline-block; } button#prev { margin-left: 160px; } button#rwd { margin-left: 160px; } #buttons { margin: 0 auto; border: 1px solid lightgray; }
what doing wrong? correct way accomplish this? thanks
add
vertical-align: top;
div#info
and remove top: -58px;
div#info
too
here's link working example: example link
Comments
Post a Comment