Выпуск с эффектом зависания css

Пожалуйста, взгляните на this link. Наведите курсор на любую миниатюру фильма. Вы заметили, что все ли элементы движется вниз? Как я могу исправить эту проблему?Выпуск с эффектом зависания css

Также нажмите на любое уменьшенное изображение, игрок div сдвинется вниз. нет коробка тени под #player_container даже если установить его в CSS файлах

#player_container{ 
    display:none; 
    height:510px;  
    width: 100%; 
    background-image: url(images/bg/bg_tile.jpg); 
    margin-top: -510px; 
    padding-top: 20px; 
     -moz-box-shadow: 0px 10px 5px #888; 
    -webkit-box-shadow: 0px 10px 5px #888; 
    box-shadow: 0px 10px 5px #888; 
}

источник

2011-12-17 Tural Ali

я не вижу никаких проблем в хроме? – ptriek

@ptriek нет тени для теней под #player_container, даже если я установил его в css-файлах, попытался изменить z-index, нет успеха –

@TuralTeyyuboglu ok Я добавлю к моему ответу – Pointy

На видео добавить прозрачную границу, кажется, это исправить

.video { 
    border: 1px solid transparent; 
    float: left; 
    font-size: 11px; 
    height: 150px; 
    margin: 0 25px 25px 0; 
    width: 228px; 
}

Существует пара от другой способ исправить следующий часть с вашего вопроса. Один быстрый способ слишком добавить еще один контейнер, как

<div style="display: block;" class="gradient sh" id="player_container"> 

    <div class="jquery-youtube-tubeplayer" id="player"> 

    <div id="tubeplayer-player-container1324082555277"><iframe width="853" height="480" frameborder="0" src="http://www.youtube.com/embed/LxBGDijiii0?autoplay=1&amp;autohide=1&amp;controls=1&amp;rel=0&amp;fs=1&amp;wmode=transparent&amp;showinfo=0&amp;modestbranding=0&amp;start=0&amp;theme=dark&amp;color=red&amp;enablejsapi=1&amp;origin=http://tural.us" title="YouTube video player" allowfullscreen=""></iframe></div></div>. 
    <div class="bottomSpan"></div>  
</div>

и положить тень коробки на этом

.bottomSpan { 
    box-shadow: 0 10px 5px #888888; 
    display: block; 
    height: 17px; 
    position: absolute; 
    width: 100%; 
}

источник

2011-12-17 00:23:23

исправлено, 1 из значков, пожалуйста, посмотрите на втором этапе. Обновленный вопрос –

да, jquery делает его допустимым при нажатии –

Это происходит потому, что ваш контейнерный видеопоток перекрывается, shaddow есть –

Это происходит потому, что при наведении курсора мыши вы добавляете границу, которая делает контейнер 2px больше

решение дать начальному классу a границу

.video { 
    border: 1px solid #fff 
    float: left; 
    font-size: 11px; 
    height: 150px; 
    margin: 0 25px 25px 0; 
    width: 228px; 
}

Вторая проблема:

Для того, чтобы г-индексный работу вы должны дать ему position:relative свойству

#player_container { 
    display: none; 
    height: 510px; 
    width: 100%; 
    background-image: url(images/bg/bg_tile.jpg); 
    padding-top: 20px; 
    -moz-box-shadow: 0px 10px 5px #888; 
    -webkit-box-shadow: 0px 10px 5px #888; 
    box-shadow: 0px 10px 5px #888; 
    z-index: 2; 
    position: relative; 
}

источник

2011-12-17 00:24:12 Ibu

попробовал, никакого успеха! –

нет тени для теней под #player_container, даже если я установил его в css-файлах, попытался изменить z-index, без успеха –

@TuralTeyyuboglu Посмотрите на мое решение второй проблемы – Ibu

Вы добавив границы при наведении мыши, но не уменьшая размер элемента. «Высота» и «ширина» элемента в модели окна W3C описывают размер содержимого элемента блока. Отступ и граница: добавлено.

Некоторые браузеры позволяют переключаться обратно в коробку «границы коробки» размеров модели:

-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;

Однако Internet Explorer обыкновению, я не думаю, понимают это. Может быть, IE9 или 10 бы понять:

-ms-box-sizing: border-box;

(Вы бы положить, что на стиле «.video».)

редактировать — как к проблеме с тенью на плеере: есть нет тень, потому что нет комната для тени. Если вы сделаете поле игрока «позицией: абсолютным» и соответствующим образом настроите контент каким-то образом (возможно, придать «обертке» div большую верхнюю прописку так же, как размер игрока), тогда вы увидите тень.

Вы действительно должны использовать что-то вроде Firebug, чтобы играть с CSS в интерактивном режиме.

источник

2011-12-17 00:25:12 Pointy

IE8 и больше поддержка простой 'box-sizing: border-box'. – thirtydot

нет тени для ящика под #player_container, даже если я установил его в css-файлах, попытался изменить z-index, не удался –

@TuralTeyyuboglu uhh ... это не имеет ничего общего с теневой коробкой. – Pointy

Для меня изменение поля на соответствующем < li> будет иметь больше смысла.

источник

2011-12-17 00:27:10

Боится микшерные вещи немного:

Вашего фоновое изображение устанавливается на #player-container - если вы хотите #player-container иметь тень, вам нужна дополнительный содержащий DIV для этого задний план. Прямо сейчас #player-container имеет тень, но поскольку он на 100% шире и заполняет вертикальное пространство, тень не отображается.
Ваш игрок точно 853px х 480px, так что вы должны установить #player-container точно эти размеры (без отступов, без маржи, они будут добавлены к ширине/высоте)
Добавить отступы в дополнительный содержащий div, который также содержит фон.
также (но не так важно): #player-container имеет width:100% - это не имеет никакого смысла - по умолчанию width:auto, так #player-container автоматически будет ширина 100%

источник

2011-12-17 01:02:45 ptriek

«Ваш игрок ровно 853px x 480px, поэтому вам нужно будет установить # player-container именно на эти размеры (без заполнения, без полей, они будут добавлены к ширине/высоте)« Я хочу, чтобы он соответствовал горизонтали 100 %, есть еще один div для игрока внутри контейнера –

Выпуск с эффектом зависания css

ответ

Смежные вопросы