Есть ли способ очистить код, центрировать изображения и заставить вещи оставаться на месте? - PullRequest
Новая
       1

Есть ли способ очистить код, центрировать изображения и заставить вещи оставаться на месте?

0 голосов
/ 10 января 2019

Есть ли способ очистить код, центрировать изображения и заставить вещи оставаться на месте ..

Вот взгляд, который я хочу ..
Основная внешняя коробка должна оставаться в центре страницы браузера ..
Кнопки «Пауза», «Воспроизведение» и «Стоп» смещаются влево от поля ..
Имейте мое изображение, чтобы установить в центре коробки ..
Кнопка «Добавить / скачать» для всплытия справа от поля.
Вот демонстрация того, что у меня до сих пор ..

Нажмите на ссылку CountryDum Productions 

<!DOCTYPE html>
<html>
<head>
</head>
  <body>
    <div class="box-set2">
      <audio id="player" src="audio/SUKA.mp3"></audio>
    <div>
      <button class="alignleft" onclick="document.getElementById('player').pause()">
      <img src="images/Set1/pause.png" style="width:30px;height:30px;">
      </button>
      <button class="alignleft" onclick="document.getElementById('player').play()">
      <img src="images/Set1/play.png" style="width:30px;height:30px;">
      </button>
      <button class="alignleft" id="player" onclick="player.src = ''; player.src = 'audio/SUKA.mp3';">
      <img src="images/Set1/stop.png" style="width:30px;height:30px;">
      </button>
      <button class="alignright" onclick="window.location.href='download/TakeOne.rar'">
      <img src="images/Set1/add.png" style="width:30px;height:30px;">
      </button>
      <div id="image">
      <img src="images/kit.png" style="width:200px;height:200px;">
    </div>
      <div style="clear: both;"></div>
    </div>
    </div>
    </div>

<style>
.box-set2 {
background: #eaeaed;
height: 200px;
width:40%;
top:100px;
margin:0px 0px 20px 40%;
padding:10px;
position: relative;
}
.alignleft {
background: #eaeaed;
float: left;
border:0px;
margin-left: 2px;
padding: 0;
outline: 0;
}
.alignright {
background: #eaeaed;
float: right;
border:0px;
margin: 0;
padding: 0;
}
#image {
border:0px;
margin:0;
padding: 0;
}
</style>
  </body>
</html>

1 Ответ

0 голосов
/ 10 января 2019

Используйте background-image вместо img внутри button

button{
width:50px;
height:50px;
background-image:url("https://image.flaticon.com/icons/svg/579/579268.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
<audio id="player" src="audio/SUKA.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>

<button onclick="document.getElementById('player').pause()">Pause</button>

<button id="player" onclick="player.src = ''; player.src = 'audio/SUKA.mp3';">Stop</button>
</div>

Редактировать объединить все кнопки в одну, которую вы должны использовать JS, и установить display:none/block для кнопки: 

function func(elem,id){
elem.style.display="none";
var elemShow=document.getElementById(id);
console.log()
elemShow.style.display="block";
}
    button{
    width:50px;
    height:50px;
    background-image:url("https://image.flaticon.com/icons/svg/579/579268.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    #pause,#play{
    display:none;
    }
<audio id="player" src="audio/SUKA.mp3"></audio>
<div>
 <button onclick="document.getElementById('player').play();func(this,'pause')" id="play">Play</button>
 <button onclick="document.getElementById('player').pause();func(this,'play')" id="pause">Pause</button>
 <button id="stop" onclick="func(this,'play');player.src = ''; player.src = 'audio/SUKA.mp3';">Stop</button>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...