Search the Community

Showing results for tags 'position'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML и CSS
    • Для начинающих
    • Препроцессоры, постпроцессоры и шаблонизаторы
    • Методологии
    • Фреймворки и библиотеки
  • JavaScript
    • Для начинающих
    • Фреймворки и библиотеки
    • Скрипты и плагины
  • Разработка сайтов
    • Для начинающих
    • Инструменты разработки, сборки и автоматизации
    • Аудит и анализ кода
    • Программное обеспечение разработчика
    • Веб-дизайн
    • Мобильные платформы
    • Open Source
  • Серверное программирование
    • Для начинающих
    • PHP
    • Платформы и языки программирования
    • Базы данных
    • Скрипты, готовые движки, CMS, конструкторы
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Сервер
    • Техническая поддержка
    • Веб-сервер
    • Базы данных
    • Хостинг
    • Домены
  • Интернет-маркетинг, SEO
    • Поисковая оптимизация
    • Поисковые системы
    • Продвижение и монетизация веб-сайта
    • Сервисы статистики и аналитики
    • Услуги и сервис
    • Покупка и продажа
  • Коммерческие услуги
    • Freelance
    • Работа
    • Услуги и сервис
  • Давайте поговорим о ...
    • Общий
    • Хобби, отдых и развлечение
    • Человек и общество
    • Флейм
  • Наш форум
    • Конкурсы
    • Работа форума

Calendars

  • События в Украине
  • События в России
  • События форума
  • События партнёров
  • Все события

Blogs

  • CMS (Content Management System)
  • Руководство верстальщика
  • Блог HTMLforum.io

Marker Groups

  • Members
  • Front-end
  • Back-end
  • Education
  • Looking for job
  • Offering job

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Web site


ICQ


Jabber


Skype


From


Interests

Found 32 results

  1. Добрый день. Нуждаюсь в помощи/совете! В корне сайта (html) создал блок с позиционированием, написал в нем номер телефона и почту. На большом мониторе блок отображается нормально, а вот если зайти через смартфон то данный блок налазит на картинку и я никак не могу это изменить..., игрался с позиционированием (absolute, fixed, relativ и т.д.) но получаю на выходе либо прикрепленный блок к верхнему левому краю либо он налазит на картинку. Подскажите, что я делаю не так? Сам сайт: http://2metra.com/ Вот код который я прописал:
  2. Всем привет! Я тут новичок, не пинайте сразу если что. Требуется аналог position sticky для IE (в режиме совместимости с 7). Надо чтобы в одну строку текст с кнопками и с пунктирной линией проходящей под ними посередине в любой ситуации прилипал к левой и правой границе окна, то есть чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально. Также при растягивании окна, текст за которым следуют кнопки находились слева на 20%. То есть если сдвинуть скролл, строка с красной полоской должна остатся на месте, если растянуть окно, то красная полоса растягивается, "( Title )" немного сдвигается вправо. Надеюсь более менее объяснил, заранее спасибо. Забыл сказать, таких линий на форме 10 - 20 штук.
  3. На сайте есть главное меню (где полоса поиска по сайту) и оно должно прилипать к экрану при прокрутке страницы. В HTML-файле на компьютере это работает, но на хостинге перестает, хотя это просто вёрстка. HTML: ... <body> <div class="box box-top sticky"> <div class="container"> <div class="menu_main"> ... </div> </div> </div> </body> ... CSS: .sticky { position: sticky; top: 0; z-index: 11000; }
  4. Позиционирование подпункта задан относительно родителя. Свойство "left" подпункта задан 100%-ная ширина родителья, но свойство меняется относительно главного окна браузера. Также ведет себя и свойство "top" . В чём ошибка? Вот ссылка https://jsfiddle.net/ttoliboff/kbb6rybz/
  5. Внутри блока с фиксированной шириной и высотой должны располагаться четыре блока в один ряд. Между ними не должно быть пустое пространство. (margin:0; padding:0; не помогло). Почему блок с классом 'col-4-2' позиционируется относительно нижней границы текста блока с классом 'col-4-1'? Что я делаю неправильно. Вот ссылка на файл: https://jsfiddle.net/ttoliboff/81oL39y3/
  6. Всем привет. При верстке возникла проблема. В header е есть ссылка при ховере на котором появляется выпадашка. У ссылки и выпадашки есть блок-родитель. Выпадашка отпозиционирован absolute ом относительно родителя. Внутри выпашдашки 3 пункта. В каждом пункте-ссылке есть теги i и spam для FA иконки и текста. Проблема в том, что при позиционирование блока смещением на право, после left: 154px текст автоматически переноситься на следующую строку. Вот фиддл. Никак не могу отловить в чем моя ошибка и как решить его. Спасибо заранее!
  7. При абсолютном позиционировании не отображается блок? Почему? Где ошибка? http://codepen.io/Diargon345/pen/xVJdeR
  8. http://jsfiddle.net/ogb7kbLw/ <!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title></title><STYLE>.button-master {border: 1px solid #000;padding: 2px; /* вопрос б *///float: left; /* вопрос в */} .button-slave {padding: 2px;background: #aaa;font-size: 13px;font-weight: bold;border: 1px dashed #fff;color: #fff;}.canvas {display: inline;} canvas {//position: absolute; /* вопрос г *///float: left;}</STYLE></head><body><HEADER></HEADER><SECTION><NAV></NAV><ARTICLE><span class="button-master"><span class="button-slave">Элемент</span></span><div class="canvas"><canvas id="icon01" width="16" height="16" style="border:1px solid red;"></canvas></div><div class="canvas"><canvas id="icon02" width="16" height="16" style="border:1px solid green;"></canvas></div><div class="canvas"><canvas id="icon03" width="16" height="16" style="border:1px solid blue;"></canvas></div></ARTICLE></SECTION><FOOTER></FOOTER></body></html>Несколько вопросов вызывает данный код. а. Почему элементы изначально позиционированы не ровно, здесь какой тип элементов canvas или span не ровный по высоте? На jsfiddle они ровные, что странно, проверьте всё-же в IE. Далее по порядку, каждый вопрос это закомментированный в коде стиль, применяется только отдельно, но не все сразу. б. Для .button-master padding два пикселя. Почему если его закомментировать .button-slave по высоте выходит за границы родительского элемента .button-master? в. Почему если раскомментировать float для button-master тогда элементы все ровняются, но по верхнему краю? г. Почему если раскомментировать position для canvas, эти элементы ровняются по центру, что мне и нужнее всего. Но при этом они создают коллапс, все позиционируются в одно место, один в другой. Какое решение здесь можно применить? UPD. Определил способ позиционировать canvas. Установить для canvas position: relative; и далее позиционировать по высоте top; относительно родительского div. Но всё-же интересуют все соображения по вопросам.
  9. live: https://jsfiddle.net/5fL1xn9q/ Дублирую: div.wrapper { position: absolute; top: 0px; height: 500px; width: 600px; border: 4px outset grey; } div.title { position: absolute; top: 0px; height: 28px; width: 590px; border-bottom: groove 2px #aaa; padding: 5px 5px 5px 5px; line-height: 125%; background-color: green; } div.content1 { position: absolute; top: 40px; height: 455px; width: 590px; padding: 5px; overflow: auto; /* background-color: #ffffff; */ background-color: red; opacity: 10% } Тестовое окно Это еще одно окно. Значение атрибута z-index этого окна заставляет его расположиться поверх другого. За счет CSS-стилей содержимое этого окна будет выглядеть полупрозрачным в броузерах, поддерживаемых такую возможность множество строк для демонстрации прокрутки 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 По wrapper вопросов нет. Мы просто создаем объект высотой 500px и шириной 600px и делаем border 4px. Вопросы возникают далее. div.title: значит мы создаем хидер "окна", его размеры 28px + 2px border. Далее, т.к у нас width == 590px, то нам надо сделать padding-left: 5px, padding-right: 5px;. Ок, по ширине мы div.title растянули. Далее мы смотрим, сколько нам делать padding-top. А вот тут вопрос. По идее, div.wrapper border == 4px. Значит мы должны отступить...4px или 5px ? Далее div.content1: по ширине всё ясно. Мы делаем width 590px, и padding-left: 5px, padding-right:5px растягиваем объект до ширины 600px. Но по вертикали опять вопрос: мы смотрим, что у нас div.title равно 28px(height) + 2px(border) + 5px(padding-top) + 5px(padding-bottom) == 40px. Ок, сколько мы должны отступить top? 40px или 41px ? Я понимаю, что padding'om мы можем выровнять столько, сколько нам нужно, но в целом как правильно оступать-то ?
  10. live: https://jsfiddle.net/5fL1xn9q/ Дублирую: div.wrapper { position: absolute; top: 0px; height: 500px; width: 600px; border: 4px outset grey; } div.title { position: absolute; top: 0px; height: 28px; width: 590px; border-bottom: groove 2px #aaa; padding: 5px 5px 5px 5px; line-height: 125%; background-color: green; } div.content1 { position: absolute; top: 40px; height: 455px; width: 590px; padding: 5px; overflow: auto; /* background-color: #ffffff; */ background-color: red; opacity: 10% } Тестовое окно Это еще одно окно. Значение атрибута z-index этого окна заставляет его расположиться поверх другого. За счет CSS-стилей содержимое этого окна будет выглядеть полупрозрачным в броузерах, поддерживаемых такую возможность множество строк для демонстрации прокрутки 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 По wrapper вопросов нет. Мы просто создаем объект высотой 500px и шириной 600px и делаем border 4px. Вопросы возникают далее. div.title: значит мы создаем хидер "окна", его размеры 28px + 2px border. Далее, т.к у нас width == 590px, то нам надо сделать padding-left: 5px, padding-right: 5px;. Ок, по ширине мы div.title растянули. Далее мы смотрим, сколько нам делать padding-top. А вот тут вопрос. По идее, div.wrapper border == 4px. Значит мы должны отступить...4px или 5px ? Далее div.content1: по ширине всё ясно. Мы делаем width 590px, и padding-left: 5px, padding-right:5px растягиваем объект до ширины 600px. Но по вертикали опять вопрос: мы смотрим, что у нас div.title равно 28px(height) + 2px(border) + 5px(padding-top) + 5px(padding-bottom) == 40px. Ок, сколько мы должны отступить top? 40px или 41px ? Я понимаю, что padding'om мы можем выровнять столько, сколько нам нужно, но в целом как правильно оступать-то ?
  11. http://jsfiddle.net/tr0zurq1/ Предполагается, что тень будет именно для каждого элемента: либо для <li>, либо для <a>, а не для <ul>. По-идее, между элементами тень не должна быть видна, поскольку, z-index псевдоэлемента, для которого сделана тень, меньше z-index'a элемента, для которого сделан псевдоэлемент. Но тень всё равно есть. Почему? Как расположить тень "дальше" пунктов меню? <ul> <li><a href="#">Борщ украинский с пампушками</a></li> <li><a href="#">Вареники с печенью в луке с салом</a></li> <li><a href="#">Курица, тушенная с галушками</a></li></ul>ul { position: absolute; list-style: none; margin: 0; padding: 0; word-wrap: break-word; /*перенос слов*/ z-index: 0; }ul a { display: block; position: relative; z-index: 1; background: #ffe5e5; color: #ca575b; padding: 5px 10px; text-decoration: none; }ul a:hover { background: #8bc6ee; color: #fffcfc; }ul a::after { content: ''; display: block; position: absolute; top: 0; bottom: 0; left:0; right:0; box-shadow: 0 0 4px #dd9a9a; z-index: -1; }
  12. Доброго времени суток! Помогите пожалуйста с позиционированием формы через css. Мне нужно, чтобы форма была по центру окна. Чего не хватает в коде css? HTML: <!DOCTYPE html><html lang="ru"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="style.css" /> </head> <body> <form action="" method="post"> <input name="name" type="text" /> <p><textarea name="comment" cols="40" rows="10"></textarea></p> <input name="button" type="submit" /> </form> </body></html>CSS: body { margin: 0; padding: 0; width: 100%; height: 100%; background: #000;}form { position: absolute; left: 50%; top: 50%;}
  13. Уважаемые форумчане! помогите начинающему верстальщику разобраться в следующей ситуации... ... мне нужно привязать лейбл "реклама" к правому верхнему углу соседнего div-а, тут я справился используя позиционирование, но как удержать этот лейбл в углу, при условии что размеры данного div-а будут меняться и родительский div тоже может меняться. Сюда выложил пример http://jsfiddle.net/s9xd66r1/1/ Помогите, плз, не пойму куда копать.
  14. http://jsfiddle.net/Launder/d70c2kg1/4/ <ul class="menu"> <li><a href="#">Разные вкусности</a> <ul> <li><a href="#">Суп с клёцками</a></li> <li><a href="#">Пироги с капустой и яйцом</a></li> <li><a href="#">Торт Медовый</a></li> </ul> </li> <li><a href="#">Узбекская кухня</a> <ul> <li><a href="#">Плов по-бухарски с изюмом</a></li> <li><a href="#">Плов с бараниной и нутом</a></li> <li><a href="#">Халва из ядрышек урюка</a></li> <li><a href="#">Лагман по-хорезмски</a></li> </ul> </li> <li><a href="#">Итальянская кухня</a> <ul> <li><a href="#">Феттучини с ветчиной и грибами в сливочном соусе</a></li> <li><a href="#">Пицца по-тоскански с индейкой и грейпфрутом</a></li> <li><a href="#">Кролик по-лигурийски с красным вином</a></li> <li><a href="#">Миндальные бискотти с медом</a></li> </ul> </li></ul>.menu { background: -moz-linear-gradient(to top, #ecc, #fff8f8); background: -webkit-linear-gradient(to top, #ecc, #fff8f8); background: -o-linear-gradient(to top, #ecc, #fff8f8); background: -ms-linear-gradient(to top, #ecc, #fff8f8); background: linear-gradient(to top, #ecc, #fff8f8); border: 1px solid #888; border-top: 0; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0; }.menu > li { display: inline-block; width: 200px; height: 75px; border: 1px solid #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; position: relative; }.menu a { text-decoration: none; display: block; }.menu ul { list-style: none; }.menu > li:hover::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-box-shadow: inset 0 0 10px #777; -moz-box-shadow: inset 0 0 10px #777; box-shadow: inset 0 0 10px #777; }Почему элемент ul, который является составной частью inline-block элемента li, выходит за его границы, а не растягивает его? Я это говорю, потому что вижу, что выделяет тень (при наведении на блок). С другой стороны, inline-block-и, как и должны, выстроились по базовой линии самой нижней строчки текста в них. Значит, всё же, они "чувствуют" вложенный список. Как объяснить такое двойное поведение?
  15. Доброго дня уважаемые коллеги, подскажите пожалуйста, можно ли как-то отменить смещение текста при переносе строки под маркер списка при позиции inside? (Можно только при позиции inside). буду благодарен за любую помощь. https://jsfiddle.net/shaoau5z/
  16. Здраствуйте у не могу сверстать один блок, нужно сделать бирку о скидках, у меня бок виден за рамками родителя, как быть? вот код: 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; }
  17. Не очень получается сделать меню. Был использован тег <nav>, параметру position было присвоено значение fixed. После чего было получено меню, отлично плавающее по вертикали, НО не могу избавиться от проблемы: как только появляется полоса прокрутки (вследствие увеличения масштаба, например), меню начинает покрывать другие блоки. Не подскажете, как можно бы от этого избавиться? Сделать так, чтобы меню двигалось только по вертикали, а по горизонтали было зафиксировано? Заранее благодарю.
  18. Добрый день на сайте http://lotos-seeds.com.ua/product-category/catalog/semena/morkov/добавил текст, пытаюсь его разместить внизу под товарами - не получается. Пытался через позиционирование - текст опускается, но как сделать так чтобы блок по высоте расширился при перемещении текста вниз. В противном случае текст налазит на товар! Спасибо. ссылка
  19. Добрый вечер, у меня возникла проблема при верстке сайта. Сделал fixed top меню, но оно не корректно отображается относительно основной части сайта, в частности сайт имеет минимальную ширину 760px, и если окно браузера уменьшать по ширине до появления полос прокрутки, то сам сайт становится по ширине 760px, но вот верхнее меню продолжает уменьшаться из-за того, что у него position: fixed по понятным причинам. Если же самому меню тоже поставить минимальную ширину 760px, то в отличие от всего сайта полосами прокрутки его прокрутить не получится, он просто частично выпадет за край окна. Можно ли как-то решить это проблему? Желательно без вмешательства скриптов? Спасибо) http://jsfiddle.net/m29nn87s/
  20. Добрый вечер, возникла проблема с кнопкой "предложить свою цену" - правил через позиционирование, в чем может быть ошибка? при клике прыгает блок. Спасибо.
  21. Со вчерашнего дня пытаюсь найти решение. Нужно кнопку придвинуть к правому краю формы(родителя) не прибегая ко 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 тоже ни к чему не привели.
  22. #logo { position: absolute; top: 15px; left: 55px; width: 220px; } #menu { position:absolute; top: 25px; right: 0px; } Вот такая конструкция. Логотип слева зафиксирован и с ним проблем нет. А вот меню относительно правого края страницы зафиксированно, но левый край меню "играет" туда сюда на несколько пиксел в зависимости от того, каким браузером смотреть Так и должно быть или я чего-то не дописал? С ув. Uncle Fox
  23. Всем привет! http://jsfiddle.net/U5r3c/ Пытаюсь поднять содержимое серого блока к верхней границе. Абсолютное позиционирование не помогает: если текст достаточно объемный и по высоте больше левой части, то он начинает выходить за рамки серого и даже зеленого блоков. Может к позиционированию чего-то не хватает?
  24. Есть валидатор форм на Foundation http://foundation.zurb.com/docs/components/abide.html При отображении ошибки показівается поле <small> с текстом ошибки. Подскажите, какие стили нужно прописать чтобы при отображении этого элемента поля формы ре раздвигались. Указывал position:absolute. Оно-то работает, но красное поле по ширине сокращается до размера ошибки, а как сделать, чтобы на всю ширину было. Верхнее поле обернуто в div, нижнее — нет. <div style="position: absolute;"> <small class="error radius">Кто вы? Представьтесь.</small> </div>
  25. Здравствуйте! Столкнулся со следующей проблемой. Есть строка таблицы, в последней ячейке которой появляется крестик, для удаления строки. Все выглядит вот так: Этот скрин сделан в хроме, где все отображается хорошо. Но в фф появляется проблема - все эти крестики складываются "стопкой" в верхнем правом углу страницы. У последней ячейки позиционирование относительное, у крестика - абсолютное. Вот пример разметки таблицы: <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;}Подскажите, пожалуйста, с чем такое может быть связано? (Что в фф все крестики складываются в верхнем правом углу страницы, хотя блок с ними находится внутри относительно спозиционированной ячейки?)