_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

Здравствуйте! Помогите мне решить проблему с кроссбраузерностью. Вот так у меня выглядит меню в Opera: А вот так в остальных браузерах: То есть в последнем случае появляется в заголовке лишние пиксели и фоновая картинка начинает дублироватся. <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="50" valign="middle" class="menu2"><strong class="toptext2">База вещей</strong></td> </tr> <tr> <td valign="middle" class="menuBody"> тут ссылки меню </td> </tr> </table> .menu2 {background-color:#887b56;background-image:url(ссылка на фоновое изображение);font-size:16px;color:#d8c06a;background-repeat: repeat-y;padding-left:5px;padding-bottom:4px;} .toptext2 {padding-left:9px; padding-top:2px;display:block;} .menuBody {background-image:url(ссылка на фоновое изображение);background-color:#bfaa71;} Помогите решить данную проблему

а ещё варианты существуют? Мне главное убрать в IE под заголовком меню лишние пространство

У меня проблема с табличной версткой. Вот отрывок кода: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="50" class="menu2">База вещей</td> </tr> <tr> <td class="menuBody"> </td> </tr> </table> CSS: .menu2 {background-color:#887b56;background-image:url(../img/menu_up3.jpg);font-size:16px;font-weight:bold;color:#d8c06a;padding-left:30px;padding-top:8px;background-repeat:no-repeat;} Вот как выглядит в IE: Вот как в остальных браузерах: Как сделать чтобы в IE отображалось нормально? Использую следующий DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Помогите решить проблему с отображением таблицы в Internet Explorer. Вот как выглядит моя таблица с данными в IE: А вот как в остальных браузерах: Как можно решить проблему, чтобы правильно отображались эти строки: Код таблицы: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" align="left" valign="middle" class="toptitle"><a class="ltoptitle" href="$ENTRY_URL$">$TITLE$</a> <?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?></td> </tr> <tr> <td width="156" rowspan="5" align="center" valign="top" class="fileposter"><img src="$SCREEN_URL$" alt="постер" width="150" border="0" title="$TITLE$" /></td> <td width="802" align="left" class="filedetail"><strong>Разрешение:</strong> $AUTHOR_NAME$</td> </tr> <tr> <td align="left" class="filedetail"><strong>Добавил:</strong> <a href="$PROFILE_URL$">$USERNAME$</a></td> </tr> <tr> <td align="left" class="filedetail"><strong>Размер:</strong> $FILE_SIZE$</td> </tr> <tr> <td align="left" class="filedetail"><strong>Платформа:</strong> <?if($SECTION_NAME$='Java игры')?>Java<?else?>Symbian 9.x<?endif?></td> </tr> <tr> <td valign="top" class="filedescr">$MESSAGE$</td> </tr> <tr> <td colspan="2" class="bottominfo"><a class="lbottominfo" href="$FILE_URL$">Скачать приложение</a> | Скачиваний: $LOADS$ | Рейтинг: $RATED$ | Коментариев: $COMMENTS_NUM$</td> </tr> </table> Классы в CSS: .toptitle { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; background-image:url(../img/toptitle.jpg); background-color: #303030; height: 15px; padding: 5px; border:1px solid #CCCCCC; } .fileposter { background-color: #FFFFFF; padding: 1px; border:1px solid #CCCCCC; } .filedetail { background-color: #F0F0F0; border-bottom: 1px dotted #CCCCCC; border-right: 1px solid #CCCCCC; padding: 2px; } .filedescr { background-color: #FFFFFF; padding: 2px; border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; margin:0px; }