Search the Community

Всем привет! http://jsfiddle.net/U5r3c/ Пытаюсь поднять содержимое серого блока к верхней границе. Абсолютное позиционирование не помогает: если текст достаточно объемный и по высоте больше левой части, то он начинает выходить за рамки серого и даже зеленого блоков. Может к позиционированию чего-то не хватает?

Есть валидатор форм на Foundation http://foundation.zurb.com/docs/components/abide.html При отображении ошибки показівается поле <small> с текстом ошибки. Подскажите, какие стили нужно прописать чтобы при отображении этого элемента поля формы ре раздвигались. Указывал position:absolute. Оно-то работает, но красное поле по ширине сокращается до размера ошибки, а как сделать, чтобы на всю ширину было. Верхнее поле обернуто в div, нижнее — нет. <div style="position: absolute;"> <small class="error radius">Кто вы? Представьтесь.</small> </div>

Здравствуйте! Столкнулся со следующей проблемой. Есть строка таблицы, в последней ячейке которой появляется крестик, для удаления строки. Все выглядит вот так: Этот скрин сделан в хроме, где все отображается хорошо. Но в фф появляется проблема - все эти крестики складываются "стопкой" в верхнем правом углу страницы. У последней ячейки позиционирование относительное, у крестика - абсолютное. Вот пример разметки таблицы: <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: absolute; за блок с overflow:hidden; В моем случае, это внутри слайдер http://jsfiddle.net/npofopr/F22FQ/ Собственно при ховере на блок, должен всплывать доп. контент, из-за overflow: hidden; все режется. Как обойти? Нагуглить не получилось, вернее ничего не подошло (такое пробовал http://dabblet.com/gist/7729560 тоже), а как решить с помощью js, пока не нашел. В общем, может у кого есть в закладках, пути решения? Буду рад всему

Добрый день! Есть такая проблема: если поставить фиксированно позиционированный элемент (без значений позиции, авто) внутрь элемента, который лежит внутри относительно позиционированного элемента, то такой элемент в Chrome отображается на неверной позиции. Во всех других браузерах этот элемент отображается на нужной позиции: той, в которой бы он появился, если бы был статическим) Вот пример простой: http://cssdesk.com/Gvpvg Вот пример практический: http://cssdesk.com/mnMxs Если кто сталкивался или знает, как это решить без применения js-костылей, то помогите пожалуйста. Судя по гуглу, с такой проблемой ещё никто не сталкивался.

Приветствую. Изучаю горизонтальное позиционирование и столкнулся с непонятным мне поведением элемента, поясните пожалуйста ситуацию. Собственно ссылка на пример. С 1-м и 2-м элементом все понятно, но как высчитывается отрицательный margin у 3-го элемента, относительно чего от высчитывается? Спасибо!

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

Здравствуйте! Есть страница сайта: http://gorenje.desig...u/produkty.html На ней есть внизу две (красные) плашки. В общем надо, чтоб при прокрутке в окне браузера они по оси Y оставались на одном месте (как сейчас и есть), а по оси X сдвигались вместе с серой рамкой (если меняем ширину окна). Тоесть чтоб они были прикреплены к серой рамке статьи (по оси X) и при резайзе окна браузера никуда не убегали (по оси X). Возможно ли это сделать с помощью CSS ?

Добрый день, необходимо сделать меню, которое плавает вдоль левого края контейнера, все бы ничего, но сайт адаптивный и когда окно браузера становится меньше основной ширины контейнера - с этим справляются @media, а как сделать чтобы позиция отсчитывалась от центра страницы или от контейнера, чтобы при больших и разных экранах меню оставалось на своем месте, возле контейнера? Буду благодарен за любую информацию. Нашел решение при помощи calc(); но, судя по заявленным данным о поддержке браузерами - не так много поддерживают эту функцию, может есть более правильное решение?

В опере иногда сьезжает #wrapper{ margin:50px auto 0px auto; width:960px; height:auto; } aside{ width:309px; padding:10px; float:left; height:auto; border-collapse: collapse; } article{ width:609px; padding:10px; float:left; height:auto; border-left:1px solid #B9E3F3; border-collapse: collapse; } .clear{clear:both;} footer{ border-top:1px solid #B9E3F3; width:940px; padding:10px; height:auto; } nav{ position:fixed; top:0; left:0; padding:0px; margin:0px; width:100%; height:50px; background:black; } <!DOCTYPE HTML> <head> <meta http-equiv="content-type" content="text/html" /> <title>Sign in Mysite</title> </head> <body> <nav> </nav> <div id="wrapper"> <aside> Блок </aside> <article> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nisl non justo feugiat viverra. Donec eu quam sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus, velit vel auctor porta, nunc metus venenatis velit, vel vestibulum libero sapien in mi. Aliquam erat volutpat. Sed nibh lacus, bibendum vitae aliquam sit amet, lacinia non justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel enim nec velit pellentesque porttitor. Mauris quis tincidunt dui. Cras lacinia dapibus dolor ac aliquet. Aliquam malesuada orci vel lacus malesuada in consectetur dui malesuada. Integer suscipit libero a erat fringilla fermentum. Sed ligula leo, sollicitudin tristique molestie ut, fermentum et nunc. Praesent tristique mauris eget sem ullamcorper a posuere urna eleifend. Maecenas tincidunt bibendum leo et aliquet. Sed et leo odio. Proin eget justo libero, eu viverra mi. Ut dapibus, lorem sed molestie placerat, nibh est pretium ligula, ornare vestibulum felis lectus ut metus. Mauris tellus risus, laoreet placerat consequat et, porta in mi. Aliquam rhoncus, eros sit amet tincidunt venenatis, elit ipsum feugiat leo, eu ornare ante arcu quis orci. Duis turpis nibh, egestas a elementum sit amet, elementum ac tortor. Mauris et elit mauris. Fusce pretium congue nunc vitae interdum. Vivamus ut sem at nibh feugiat vehicula. Nullam et facilisis eros. Sed aliquam, dui sit amet porttitor tempus, tellus augue pharetra orci, sed tincidunt erat erat nec ante. Pellentesque venenatis lacinia varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eget elit diam. Sed sed felis quam. Sed condimentum commodo dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean mattis metus porta orci consequat aliquet. Maecenas vulputate dictum tempor. Sed rhoncus velit non odio vestibulum lacinia. Integer felis diam, venenatis et feugiat sed, pellentesque at diam. Suspendisse et varius velit. Proin ligula augue, ultrices vitae auctor eget, fringilla non nulla. Sed eu velit nec ligula cursus pellentesque ut eu ante. Nullam ullamcorper urna sed nunc auctor aliquam. Sed suscipit mi quis enim ornare sed congue odio mattis. Integer volutpat justo faucibus eros scelerisque rhoncus. Donec elementum, urna ut sodales sodales, dui sapien tempus erat, et dignissim tortor arcu vel augue. Aenean pretium volutpat tellus ultricies vestibulum. Etiam pretium tellus id arcu dictum convallis. Nulla a orci turpis, tristique fermentum sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nisl non justo feugiat viverra. Donec eu quam sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus, velit vel auctor porta, nunc metus venenatis velit, vel vestibulum libero sapien in mi. Aliquam erat volutpat. Sed nibh lacus, bibendum vitae aliquam sit amet, lacinia non justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel enim nec velit pellentesque porttitor. Mauris quis tincidunt dui. Cras lacinia dapibus dolor ac aliquet. Aliquam malesuada orci vel lacus malesuada in consectetur dui malesuada. Integer suscipit libero a erat fringilla fermentum. Sed ligula leo, sollicitudin tristique molestie ut, fermentum et nunc. Praesent tristique mauris eget sem ullamcorper a posuere urna eleifend. Maecenas tincidunt bibendum leo et aliquet. Sed et leo odio. Proin eget justo libero, eu viverra mi. Ut dapibus, lorem sed molestie placerat, nibh est pretium ligula, ornare vestibulum felis lectus ut metus. Mauris tellus risus, laoreet placerat consequat et, porta in mi. Aliquam rhoncus, eros sit amet tincidunt venenatis, elit ipsum feugiat leo, eu ornare ante arcu quis orci. Duis turpis nibh, egestas a elementum sit amet, elementum ac tortor. Mauris et elit mauris. Fusce pretium congue nunc vitae interdum. Vivamus ut sem at nibh feugiat vehicula. Nullam et facilisis eros. Sed aliquam, dui sit amet porttitor tempus, tellus augue pharetra orci, sed tincidunt erat erat nec ante. Pellentesque venenatis lacinia varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eget elit diam. Sed sed felis quam. Sed condimentum commodo dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean mattis metus porta orci consequat aliquet. Maecenas vulputate dictum tempor. Sed rhoncus velit non odio vestibulum lacinia. Integer felis diam, venenatis et feugiat sed, pellentesque at diam. Suspendisse et varius velit. Proin ligula augue, ultrices vitae auctor eget, fringilla non nulla. Sed eu velit nec ligula cursus pellentesque ut eu ante. Nullam ullamcorper urna sed nunc auctor aliquam. Sed suscipit mi quis enim ornare sed congue odio mattis. Integer volutpat justo faucibus eros scelerisque rhoncus. Donec elementum, urna ut sodales sodales, dui sapien tempus erat, et dignissim tortor arcu vel augue. Aenean pretium volutpat tellus ultricies vestibulum. Etiam pretium tellus id arcu dictum convallis. Nulla a orci turpis, tristique fermentum sapien. </article> <div class="clear"></div> <footer> Футер </footer> </div> </body> </html>