Search the Community

Позиционирование подпункта задан относительно родителя. Свойство "left" подпункта задан 100%-ная ширина родителья, но свойство меняется относительно главного окна браузера. Также ведет себя и свойство "top" . В чём ошибка? Вот ссылка https://jsfiddle.net/ttoliboff/kbb6rybz/

Всем привет. При верстке возникла проблема. В header е есть ссылка при ховере на котором появляется выпадашка. У ссылки и выпадашки есть блок-родитель. Выпадашка отпозиционирован absolute ом относительно родителя. Внутри выпашдашки 3 пункта. В каждом пункте-ссылке есть теги i и spam для FA иконки и текста. Проблема в том, что при позиционирование блока смещением на право, после left: 154px текст автоматически переноситься на следующую строку. Вот фиддл. Никак не могу отловить в чем моя ошибка и как решить его. Спасибо заранее!

Уважаемые форумчане! помогите начинающему верстальщику разобраться в следующей ситуации... ... мне нужно привязать лейбл "реклама" к правому верхнему углу соседнего div-а, тут я справился используя позиционирование, но как удержать этот лейбл в углу, при условии что размеры данного div-а будут меняться и родительский div тоже может меняться. Сюда выложил пример http://jsfiddle.net/s9xd66r1/1/ Помогите, плз, не пойму куда копать.

Здраствуйте у не могу сверстать один блок, нужно сделать бирку о скидках, у меня бок виден за рамками родителя, как быть? вот код: HTML - <div class="coll"> <div class="salesban">sales</div> <img src="img/sell3.png" alt="img"> <h3 class="sal">$30.00</h3> <div class="hov"> <h3>new STELLA MCCARTNEY</h3> <ul class="star"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> <h3><a href="#">add To Cart</a></h3> <ul class="add"> <li><a href="#"><span class="red"> + </span>add To Compare</a></li> <li><a href="#"><span class="red"> + </span>add To Wishlist</a></li> </ul> </div> </div> CSS /*Стиль блока родителя*/ .sale .coll { position: relative; width: 25%; margin-right: 0px; box-sizing: border-box;}/*Стиль блока которого поместить во ливый угол*/.salesban { position: absolute; background: #fe5252; -moz-transform: rotate(-36deg); -ms-transform: rotate(-36deg); -webkit-transform: rotate(-36deg); -o-transform: rotate(-36deg); transform: rotate(-36deg); top: -20px; left: -50px; width: 134px; text-align: center; color: white; z-index: 0; padding: 30px 0px 10px; }

Всем привет! Никак не получается решить такую вот задачу: блок position:absolute внутри блока position:relative. Как сделать так, чтобы блок position:relative растягивался на всю высоту блока position:absolute? Сначала думал clearfix поможет, но он не помог(

Со вчерашнего дня пытаюсь найти решение. Нужно кнопку придвинуть к правому краю формы(родителя) не прибегая ко float Это возможно? Вот мои эксперименты. для кнопки установлены такие спили (рамочку и т.д. упустил) input[type="submit"] { width: auto; position: absolute; right: 0px;} Для формы form { padding: 2em 3em 0em 4em; position: relative;}Кнопка позиционируется по правому краю контейнера, в котором находится форма. Если кнопку поместить в контейнер <span style="display:block;position:relative"><input type="submit"></span>Все в порядке, но его высота = 0px и ревизор фаерфокса показывает, что она отображается за пределами формы, что вполне согласуется с абсолютной позицией. Вот http://jsbin.com/gowela/11/edit Возможно ли сдвинуть эту кнопку к правому краю не помещая её в другой контейнер? И естественно, чтобы она не выходила за границы формы. — ПС. эксперименты с её position:reative тоже ни к чему не привели.

На странице есть шапка с позицией fixed: .top_menu_p { position: fixed; left: 0; top: 0; padding: 0px; background: #ffffff; width: 100%;}Так же есть слайдер контента (jcarousel) с позицией relative: .jcarousel ul { position: relative; width: 20000em; list-style: none; margin: 0; padding: 0;}При пролистывании станицы, когда шапка подходит к слайдеру, он отображается поверх шапки. Как это исправить? У слайдера позицию relative не заменить, иначе не будет работать. КТо-нибудь сталкивался с такой проблемой?

Всем привет! Вот хотел бы поинтересоваться как правильно сделать эту штуковину, на ум конечно приходит много идей, в том числе и разбиение логотипа на 2 части, но пока остановился на таком варианте, так как он мне кажется самым нормальным. http://jsfiddle.net/K7UV3/2/ З.Ы. - header и opol полностью статичны, в них ничего не тянется и текстом дополняться скорее всего не будет. В диве logo будет еще 2 дива. 1 для текста - имей дело с лучшими 2ой для названия компании. Хотя можно обойтись и без 2ух дивов, не столь важно. Opol - это див с бэкграундом-картинкой, внутри которого будут находиться еще 2 рекламных дива размеров 486х60 с низу. Вот для наглядности что планирую:

Здравствуйте! Столкнулся со следующей проблемой. Есть строка таблицы, в последней ячейке которой появляется крестик, для удаления строки. Все выглядит вот так: Этот скрин сделан в хроме, где все отображается хорошо. Но в фф появляется проблема - все эти крестики складываются "стопкой" в верхнем правом углу страницы. У последней ячейки позиционирование относительное, у крестика - абсолютное. Вот пример разметки таблицы: <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;}Подскажите, пожалуйста, с чем такое может быть связано? (Что в фф все крестики складываются в верхнем правом углу страницы, хотя блок с ними находится внутри относительно спозиционированной ячейки?)

Помогите, пожалуйста, сверстать без JS следующую конструкцию: Всё, что я перепробовал, давало различные проблемы: выталкивание зелёного блока за пределы таблицы, растягивание цветных блоков на всю высоту экрана или скучивание в центре ячейки в одном из браузеров. UPD. Вот пример, как всё должно быть (двигаем границу окошка и смотрим на растягивание красного блока) В примере использован JavaScript, а я ищу возможность обойтись без него.