Jump to content

Search the Community

Showing results for tags 'position'.

  • Search By Tags

    Type tags separated by commas.

  • Search By Author

Content Type


Forums

  • Development
    • HTML Coding
    • JavaScript
    • PHP
    • CMS
    • Database
    • Web Server
    • Web-site Development
    • Internet Marketing, SEO
  • Library
    • Tricks and solutions
    • Books
  • Commercial services
    • Freelance
    • Job
    • Goods and Services
  • Our Forum
    • Flame
    • Contests
    • Feedback and Ideas

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

Telegram

Signal

Viber

Skype

From

Interests

Found 35 results

  1. Алеся
    Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает. <div class="banner"> <div class="container background-image"> <div class="banner_text"></div> </div> </div> CSS: .background-image { background-image: url('/img/new_oranges.jpg'); background-size: cover; height: 200px; }
  2. gumuch
    Добрый день. Нуждаюсь в помощи/совете! В корне сайта (html) создал блок с позиционированием, написал в нем номер телефона и почту. На большом мониторе блок отображается нормально, а вот если зайти через смартфон то данный блок налазит на картинку и я никак не могу это изменить..., игрался с позиционированием (absolute, fixed, relativ и т.д.) но получаю на выходе либо прикрепленный блок к верхнему левому краю либо он налазит на картинку. Подскажите, что я делаю не так? Сам сайт: http://2metra.com/ Вот код который я прописал:
  3. мурамаса
    Добрый день, столкнулся с такой проблемой. Верстая страницу заключал изображения в тег <div> с определенным класом и в css, задаю им позицию какую хочу видеть у себя в браузере. например .content-bar2 { float: right; position: absolute; top: 300px; right: 50px; } Так вот когда я несколько элементов так размещаю, один над одним, то у меня в браузере все отоброжается нормально. Но открыв с другого компьтера, получилос так что одно изображение наезжает на другое, что это и с чем связано и как это вылечить. И если не сложно обьясните пожалуйста особенности position: absolute. Как я понимаю float и absolute вместе не работают ? Как я понимаю float и absolute вместе не работают ? При том еще есть проблема, когда я уменьшаю окно браузера, контент как бы сжимается в непонятную хурму, друг на друга, как это исправить ?
  4. mr.relax
    Есть страница, c: body { max-width: 1200px; margin: auto; } т.е. контент посередине. Вопрос: есть блок <footer>, как средствами CSS сделать его "привязанным" к низу страницы так, чтобы он был одного размера с body? И соответственно менял размеры, если у body меняется. Ну например: окно браузера уменьшили... footer { position: fixed; bottom: 0; } "привязывает" <footer> к низу, но растягивает по ширине экрана.
  5. serzh82saratov
    Всем привет! Я тут новичок, не пинайте сразу если что. Требуется аналог position sticky для IE (в режиме совместимости с 7). Надо чтобы в одну строку текст с кнопками и с пунктирной линией проходящей под ними посередине в любой ситуации прилипал к левой и правой границе окна, то есть чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально. Также при растягивании окна, текст за которым следуют кнопки находились слева на 20%. То есть если сдвинуть скролл, строка с красной полоской должна остатся на месте, если растянуть окно, то красная полоса растягивается, "( Title )" немного сдвигается вправо. Надеюсь более менее объяснил, заранее спасибо. Забыл сказать, таких линий на форме 10 - 20 штук.
  6. iBars
    На сайте есть главное меню (где полоса поиска по сайту) и оно должно прилипать к экрану при прокрутке страницы. В 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; }
  7. toliboff
    Позиционирование подпункта задан относительно родителя. Свойство "left" подпункта задан 100%-ная ширина родителья, но свойство меняется относительно главного окна браузера. Также ведет себя и свойство "top" . В чём ошибка? Вот ссылка https://jsfiddle.net/ttoliboff/kbb6rybz/
  8. toliboff
    Внутри блока с фиксированной шириной и высотой должны располагаться четыре блока в один ряд. Между ними не должно быть пустое пространство. (margin:0; padding:0; не помогло). Почему блок с классом 'col-4-2' позиционируется относительно нижней границы текста блока с классом 'col-4-1'? Что я делаю неправильно. Вот ссылка на файл: https://jsfiddle.net/ttoliboff/81oL39y3/
  9. parnas
    Всем привет. При верстке возникла проблема. В header е есть ссылка при ховере на котором появляется выпадашка. У ссылки и выпадашки есть блок-родитель. Выпадашка отпозиционирован absolute ом относительно родителя. Внутри выпашдашки 3 пункта. В каждом пункте-ссылке есть теги i и spam для FA иконки и текста. Проблема в том, что при позиционирование блока смещением на право, после left: 154px текст автоматически переноситься на следующую строку. Вот фиддл. Никак не могу отловить в чем моя ошибка и как решить его. Спасибо заранее!
  10. diargon345
    При абсолютном позиционировании не отображается блок? Почему? Где ошибка? http://codepen.io/Diargon345/pen/xVJdeR
  11. BPOTHOCOK
    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. Но всё-же интересуют все соображения по вопросам.
  12. rtl_one
    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 мы можем выровнять столько, сколько нам нужно, но в целом как правильно оступать-то ?
  13. rtl_one
    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 мы можем выровнять столько, сколько нам нужно, но в целом как правильно оступать-то ?
  14. Launder
    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; }
  15. Klaus
    Доброго времени суток! Помогите пожалуйста с позиционированием формы через 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%;}
  16. fes777
    Уважаемые форумчане! помогите начинающему верстальщику разобраться в следующей ситуации... ... мне нужно привязать лейбл "реклама" к правому верхнему углу соседнего div-а, тут я справился используя позиционирование, но как удержать этот лейбл в углу, при условии что размеры данного div-а будут меняться и родительский div тоже может меняться. Сюда выложил пример http://jsfiddle.net/s9xd66r1/1/ Помогите, плз, не пойму куда копать.
  17. Launder
    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-и, как и должны, выстроились по базовой линии самой нижней строчки текста в них. Значит, всё же, они "чувствуют" вложенный список. Как объяснить такое двойное поведение?
  18. Velidan
    Доброго дня уважаемые коллеги, подскажите пожалуйста, можно ли как-то отменить смещение текста при переносе строки под маркер списка при позиции inside? (Можно только при позиции inside). буду благодарен за любую помощь. https://jsfiddle.net/shaoau5z/
  19. samogray
    Здраствуйте у не могу сверстать один блок, нужно сделать бирку о скидках, у меня бок виден за рамками родителя, как быть? вот код: 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; }
  20. gleensande
    Не очень получается сделать меню. Был использован тег <nav>, параметру position было присвоено значение fixed. После чего было получено меню, отлично плавающее по вертикали, НО не могу избавиться от проблемы: как только появляется полоса прокрутки (вследствие увеличения масштаба, например), меню начинает покрывать другие блоки. Не подскажете, как можно бы от этого избавиться? Сделать так, чтобы меню двигалось только по вертикали, а по горизонтали было зафиксировано? Заранее благодарю.
  21. mrfrunze
    Добрый день на сайте http://lotos-seeds.com.ua/product-category/catalog/semena/morkov/добавил текст, пытаюсь его разместить внизу под товарами - не получается. Пытался через позиционирование - текст опускается, но как сделать так чтобы блок по высоте расширился при перемещении текста вниз. В противном случае текст налазит на товар! Спасибо. ссылка
  22. Kenshi24
    Добрый вечер, у меня возникла проблема при верстке сайта. Сделал fixed top меню, но оно не корректно отображается относительно основной части сайта, в частности сайт имеет минимальную ширину 760px, и если окно браузера уменьшать по ширине до появления полос прокрутки, то сам сайт становится по ширине 760px, но вот верхнее меню продолжает уменьшаться из-за того, что у него position: fixed по понятным причинам. Если же самому меню тоже поставить минимальную ширину 760px, то в отличие от всего сайта полосами прокрутки его прокрутить не получится, он просто частично выпадет за край окна. Можно ли как-то решить это проблему? Желательно без вмешательства скриптов? Спасибо) http://jsfiddle.net/m29nn87s/
  23. mrfrunze
    Добрый вечер, возникла проблема с кнопкой "предложить свою цену" - правил через позиционирование, в чем может быть ошибка? при клике прыгает блок. Спасибо.
  24. ekkl
    Со вчерашнего дня пытаюсь найти решение. Нужно кнопку придвинуть к правому краю формы(родителя) не прибегая ко 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 тоже ни к чему не привели.
  25. Uncle Fox
    #logo { position: absolute; top: 15px; left: 55px; width: 220px; } #menu { position:absolute; top: 25px; right: 0px; } Вот такая конструкция. Логотип слева зафиксирован и с ним проблем нет. А вот меню относительно правого края страницы зафиксированно, но левый край меню "играет" туда сюда на несколько пиксел в зависимости от того, каким браузером смотреть Так и должно быть или я чего-то не дописал? С ув. Uncle Fox
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept