cartrege

Здравствуйте! На одной из страниц, которую я сейчас пытаюсь сверстать есть Parallax-эффекет. Я добился того, что он работает, но вылезла проблема: откуда-то появляется горизонтальный скролл, хотя инспектор показывает размеры элементов верные. Разметка страницы: <div class="card"> <div class="image"> <!-- Image --> <img src="..."> </div> <div class="info"> <!-- Information --> </div></div>Стили: .card { height: 100vh; perspective: 1px; overflow-y: auto; overflow-x: hidden; perspective-origin: top center; background: white;}.image { transform: translateZ(-1px) scale(3); height: auto; width: 100vw;}.info { transform: translateZ(0); background: background: rgb(154, 199, 170); width: 100vw box-sizing: border-box;}C такой разметкой и стилями эффект работает, но появляется горизонтальный скролл. Если при этом потянуть влево и вверх, то получится вот такой эффект: Подскажите, пожалуйста, почему такое может происходить (что добавляется горизонатльный скролл и едет блок .info)? Проблема решена Я наложил стили на вложенную картинку в блоке .img, после чего все заработало как надо: .image img{ transform: translateZ(-1px) scale(3); width: 100vw;}.image { height: auto; overflow: hidden;}

Большое спасибо! Сейчас все исправил, все хорошо.

Здравствуйте! Столкнулся со следующей проблемой. Есть строка таблицы, в последней ячейке которой появляется крестик, для удаления строки. Все выглядит вот так: Этот скрин сделан в хроме, где все отображается хорошо. Но в фф появляется проблема - все эти крестики складываются "стопкой" в верхнем правом углу страницы. У последней ячейки позиционирование относительное, у крестика - абсолютное. Вот пример разметки таблицы: <table class="content-table campaignsList"> <cation>cccc</caption> <tbody> <tr> <th> <div class="inner"> <span class="text">cccc</span> </div> </th> <th> <div class="inner"> <span class="text">cccc</span> </div> </th> <th> <div class="inner"> <span class="text">cccc</span> </div> </th> <th> <div class="inner"> <span class="text">cccc</span> </div> </th> <th> <div class="inner"> <span class="text">cccc</span> </div> </th> <th> <div class="inner"> <span class="text">cccc</span> </div> </th> </tr> <tr> <td>xxxx</td> <td> <a href="/xxx/xxx">zzz</a> </td> <td>3.58</td> <td>zzz</td> <td> <a href="/sss/ddd">zzz</a> </td> <!-- В этом столбце крестик --> <td> <a href="/ddd/fff">zzz</a> <div class="disableRow">×</div> </td> </tr> </tbody></table>Стили: /** Ячейка **/.campaignsList td { position: relative;}/** Крестик **/.disableRow { background: rgb(245, 30, 0); position: absolute; top: 8px; right: -5px; height: 15px; width: 15px; line-height: 15px; text-align: center; color: rgb(228, 226, 226); cursor: pointer; box-shadow: 0px 1px 1px black;}Подскажите, пожалуйста, с чем такое может быть связано? (Что в фф все крестики складываются в верхнем правом углу страницы, хотя блок с ними находится внутри относительно спозиционированной ячейки?)

Здравия желаю! Есть элемент на странице. Когда пользователь скроллит страницу, то, этот элемент передвигается вместе со страницей. Дойдя до верхнего края страницы он должен зафиксироваться и всегда оставаться на экране. Подскажите, пожалуйста, как это можно реализовать? При обратном скроллинге, он должен будет встать на свое место, когда пользователь будет выше его первоначальных координат. Спасибо

Спасибо огромное за помощь! )

Здравствуйте! Проблема: размещаю слой внутри слоя. Ожидаю, что родительский слой будет их держать внутри. Но вместо этого два дочерних слоя выходят за его границы. Располагаются-то как надо, но нужно, чтобы они были внутри основного. Я пробовал изменять position, float, clear зачем-то трогал. Что нужно сделать, желтый и зеленый оказались внутри? Спасибо! html: <div id="main"> ...... <div id="slider"> <img id="one" src="images/1.jpg"> <img id="two" src="images/2.jpg"> <img id="three" src="images/3.jpg"> <img id="four" src="images/4.jpg"> <img id="five" src="images/5.jpg"> <ul> <li><a href="#one"></a></li> <li><a href="#two"></a></li> <li><a href="#three"></a></li> <li><a href="#four"></a></li> <li><a href="#five"></a></li> </ul> </div> <!-- Main content of page <!-- General block --> <div id ="general"> Основной контент </div> <!-- Right side block --> <div id="right-side"> Архив </div> </div> css: div#main { margin: 66px auto 20px; padding: 0px 0px 0px 0px; width: 900px; border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; background-color:#FFF; text-align:justify; box-shadow: 0 0 20px; -moz-box-shadow: 0 0 20px; -webkit-box-shadow: 0 0 20px; -o-box-shadow: 0 0 20px; } /* Стиль слоя с основным контентом */ #general { float: left; background-color: yellow; min-height: 40px; width: 660px; position: relative; } /* Стиль слоя с архивом и всем таким */ #right-side { float: right; background-color: green; min-height: 40px; width: 240px; position: relative; }

Оно вложено: <ul id="nav"> <li><a href="#">новости</a></li> <li><a href="#">документы</a> <ul> <li><a href="#">кпмо</a></li> <li><a href="#">другие документы</a></li> </ul> </li> <li><a href="#">фотографии</a></li> </ul> и стиль: #nav, #nav > li { line-height: 100%; display: inline; list-style: none; padding-right: 20px; } #nav ul { display: none; margin: 0px; padding: 5px 5px 5px 5px; list-style: none; background-color: white; border-radius: 5px; -o-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0, 0.1); z-index: 20; } #nav li:hover > ul { display: inline-block; }

Здравствуйте! Только-только вернулся из армии. Подкинули работу для разминки, и я тут же встал. Проблема такая: у меня ниспадающее меню позиционируется по absolute. Тут ясно сразу, что при изменениях размера окна его может быть и не видно, да, и вообще, оно не там где надо появляется. Скажите, пожалуйста, как мне его разместить так, чтобы оно при любом окне появлялось под родительским элементом? (Оно будет только у меню "Документы") Спасибо!