_ZheKA_

Подскажите, как можно отцентрировать блок #myblock поверх видео? <div id="trailer" class="is_overlay"><video id="video" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto"><source src="http://5thedgestudio.at.ua/img/back.mp4"></source></video></div><div id="myblock">Мои любые данные</div>.is_overlay{ display: block; width: 100%; height: 100%; }#trailer {position: fixed;top: 0; right: 0; bottom: 0; left: 0;overflow: hidden;;}#trailer > video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index:-1000;}@media (min-aspect-ratio: 16/9) {#trailer > video { height: 300%; top: -100%; }}@media (max-aspect-ratio: 16/9) {#trailer > video { width: 300%; left: -100%; }}/* Если есть поддержка object-fit (Chrome/Chrome для Android, Safari в iOS 8 и Opera), используем его: */@supports (object-fit: cover) {#trailer > video {top: 0; left: 0;width: 100%; height: 100%;object-fit: cover;}}#myblock {margin: 0 auto;width:1000px;z-index:9999;}Сейчас блок #myblock даже поверх не отображается

Подставил меньшие картинки, но они стали странно отображаться в фигурках и подергивания остались. В чем моя ошибка? https://jsfiddle.net/Chefranov/885bp83L/

Vlad, Покажите пример пожалуйста.

лучше не стало

Помогите сделать анимацию плавнее, без подергиваний https://jsfiddle.net/Chefranov/5p6xt6zd/

Большое спасибо!

Был бы весьма благодарен если вы подскажете как сделать в моем случае https://jsfiddle.net/Chefranov/Lts50x9n/

Всем спасибо за помощь! Сделал как хотел. Конечный результат: https://jsfiddle.net/Chefranov/Lts50x9n/

А анимацию этим отдельным картинкам можно задать? Мне банального плавного сдвига достаточно будет

Отлично, а как теперь для каждой отдельной фигурке задать и анимировать фоновое изображение (пример)?

Можно подробнее?

Здравствуйте! Подскажите как можно сверстать вот такую фигуру Каждая из трех составляющих пентагона должны быть кликабельны (ссылки), а также поверх них должен быть текст. Для каждой составляющей будет разный фон в виде картинки. Как все это сделать средствами CSS и HTML? Желательно максимально кроссбраузерно. Заранее благодарен!

Вопрос по CSS. Подскажите как заставить работать ul {мои данные} ul li {мои данные} только в контейнере например с классом "mycontainer"

Имеется выпадающие CSS меню. Подскажите как сделать в выпадающем списке ещё один выпадающий список? Вот графически показываю как хочу: Текущий код: <div class="menu" align="left"> <li><a href="#" target="_self" >Технологии</a> <ul> <li><a href="javascript://" onclick="new _uWnd('ajax','AVS','800','600',{autosize:false,modal: true,close:true,header:true,nomove: true,fixed:true},{xml:false,url:'http://audi-info.at.ua/publ/audi/models/avs/2-1-0-9'})">AVS</a></li> <li><a href="javascript://" onclick="new _uWnd('ajax','ABS','800','600',{autosize:false,modal: true,close:true,header:true,nomove: true,fixed:true},{xml:false,url:'http://audi-info.at.ua/publ/audi/models/abs/2-1-0-5'})">ABS</a></li> <li><a href="javascript://" onclick="new _uWnd('ajax','EBV','800','600',{autosize:false,modal: true,close:true,header:true,nomove: true,fixed:true},{xml:false,url:'http://audi-info.at.ua/publ/audi/models/ebv/2-1-0-6'})">EBV</a></li> <li><a href="javascript://" onclick="new _uWnd('ajax','Tiptronic','800','600',{autosize:false,modal: true,close:true,header:true,nomove: true,fixed:true},{xml:false,url:'http://audi-info.at.ua/publ/audi/models/tiptronic/2-1-0-7'})">Tiptronic</a></li> <li><a href="javascript://" onclick="new _uWnd('ajax','EDS','800','600',{autosize:false,modal: true,close:true,header:true,nomove: true,fixed:true},{xml:false,url:'http://audi-info.at.ua/publ/audi/models/ebs/2-1-0-8'})">EDS</a></li> <li><a href="Ссылка" target="_self">ESP</a></li> </ul> </li> </div> .menu{ border:none; border:0px; margin:0px; padding:0px; font:arial; font-size:14px; font-weight:bold; } .menu ul{ height:35px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px; } .menu li a{ color:#fff; display:block; font-weight:normal; line-height:35px; margin:0px; padding:0px 25px; text-align:center; text-decoration:none; } .menu li a:hover, .menu ul li:hover a{ background: #b3b7bd; color:#FFFFFF; text-decoration:none; } .menu li ul{ background-color:#b3b7bd; display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:225px; z-index:200; /*top:1em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { display:block; float:none; margin:0px; padding:0px; width:225px; } .menu li:hover li a{ background:none; } .menu li ul a{ display:block; height:35px; font-size:12px; font-style:normal; margin:0px; padding:0px 10px 0px 15px; text-align:left; } .menu li ul a:hover, .menu li ul li:hover a{ background-color:#979da5; border:0px; color:#ffffff; text-decoration:none; } .menu p{ clear:left; } Что надо добавить или изменить? Заранее благодарен!!!

Решил проблему убиранием padding