CSS: проблема видимости кнопки - PullRequest
Новая
       5

CSS: проблема видимости кнопки

3 голосов
/ 23 августа 2010

Я работаю над проектом с видеоплеером.Я хочу добавить кнопки воспроизведения / паузы и пропуска вместе, но одна из кнопок всегда невидима, однако работает.Коды, которые я использую:

в файле .css: 

.buttons { position:absolute; top: 326px; left:150px;  }
.buttons DIV { width: 26px; height: 20px; cursor: pointer; }
.buttons .pause { background-image: url("button_pause.png"); }
.buttons .play { background-image: url("button_play.png"); }
.buttons .skip { background-image: url("button_skip.png"); }

в файле html: 

<div class="buttons">
    <div id="skip" onclick="skipCurrentSong();"></div>
    <div id="playpause" onclick="setPlayPause();"></div>
</div>

функции в файле js работают правильно, но кнопка пропусканевидимЯ попытался создать другой класс в CSS-файле для кнопки пропуска и соответственно обновил HTML-файл, но это также дало тот же результат.Кто-нибудь может сказать, какую ошибку я совершаю и как ее исправить?

Заранее спасибо.

Некоторые дополнительные коды:

.css file: 

@CHARSET "UTF-8";

BODY { height: 530px; overflow: hidden; }

#tv { width: 532px; height: 443px; background: url("tv.png") no-repeat; margin: 0 auto; margin-top: 20px; z-index: 3; position: relative; }
#title { color: #dddddd; text-align: right; float: right; margin-top: 320px; margin-right: 120px; }


.buttons { position:absolute; top: 326px; left:150px;  }
.buttons DIV { width: 26px; height: 20px; cursor: pointer; background-color: white;}
.buttons .pause { background-image: url("button_pause.png"); }
.buttons .play { background-image: url("button_play.png"); }
.buttons .skip { background-image: url("button_skip.png"); }

FORM { display: block; margin: 0 auto; background: url("player.png"); height: 295px; width: 482px; clear: both; position: relative; top: -421px; margin-bottom: -295px; z-index: 4; }
FORM LABEL { color: #00aad4; margin-bottom: 10px; padding-top: 40px; }
FORM INPUT { border: none; border-bottom: 3px solid #00aad4; font-size: 24px; width: 200px; }
FORM * {  display: block; margin: 0 auto; text-align: center; }
FORM .loader { margin-top: 10px; }


.loader { background: url("load.gif"); width: 16px; height: 16px; margin: 0 auto; visibility: hidden; }
.load .loader { visibility: visible; }

в html-файле: 

<div id="tv">

    <div id="title"></div>

    <div class="buttons">
        <div id="playpause" onclick="setPlayPause();"></div>
        <div id="skip" onclick="skipCurrentSong();"></div>
    </div>

</div>

Ответы [ 2 ]

1 голос
/ 23 августа 2010

Обновлено: Это даст вам три кнопки.Вы хотите, чтобы пауза / воспроизведение сочетались?

CSS: 

.buttons { position:absolute; top: 326px; left:150px;  }
.buttons div { width: 26px; height: 20px; cursor: pointer; background-color: white;}
.buttons #pause { background-image: url("button_pause.png"); }
.buttons #play { background-image: url("button_play.png"); }
.buttons #skip { background-image: url("button_skip.png"); }

HTML: 

<div id="tv">

    <div id="title"></div>

    <div class="buttons">
        <div id="play" onclick="setPlayPause();"></div>
        <div id="pause" onclick="setPlayPause();"></div>
        <div id="skip" onclick="skipCurrentSong();"></div>
    </div>

</div>
0 голосов
/ 23 августа 2010

Я изменил код .css как: 

.skipbutton { position:absolute; top:326px; left:120px;  }
.skipbutton DIV { width: 26px; height: 20px; cursor: pointer; background-color: gray;}
.skipbutton .skip { background-image: url("button_skip.png"); }

.buttons { position:absolute; top: 326px; left:90px;  }
.buttons DIV { width: 26px; height: 20px; cursor: pointer;  }
.buttons .pause { background-image: url("button_pause.png"); }
.buttons .play { background-image: url("button_play.png"); }

и изменил .html как: 

<div id="tv">

    <div id="title"></div>

    <div class="skipbutton">
        <div class="skip" onclick="skipCurrentSong();"></div>
    </div>

    <div class="buttons">
        <div id="playpause" onclick="setPlayPause();"></div>
    </div>

</div>

удивительно для кнопки пропуска, класс div работал, в то время как для кнопки playpause, div id работает и класс div просто убивает кнопку Это немного неловко, поскольку две кнопки имеют одинаковую структуру в файле CSS.

Ранее я пытался разделить классы для двух кнопок, но на этот раз все заработало.

Благодаря lasseespeholt.

...