Jump to content
  • Sign Up

Search the Community

Showing results for tags 'margin'.

  • 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 24 results

  1. Всем привет) Самостоятельно обучаюсь верстке. Сейчас изучаю Bootstrap и столкнулась с такой проблемой: <header> <nav> <div class="container"> <ul class="menu"> <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li> ... <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li> </ul> </div> </nav> </header> Использую в верстке стандартный контейнер из Bootstrap'а. Его стили не трогаю. Сейчас корплю над адаптивностью сайта и при изменении размера устройства (в консоли разработчика) на 768px шапка вылезает за пределы экрана. Как удалось выяснить header принимает требуемое значение width: 768px, а вот nav упорно занимает 993px и они тянутся от container'а (он согласно стилям Bootstrap'а имеет max-width: 720px, но его margin-left и margin-right почему-то принимают значение 136,50px. Дополнение: тегу nav в стилях задан width: 100%. Вопрос: 1. Правильно ли я понимаю, что cтандартный контейнер из Bootstrap'а должен был в данном примере рассчитаться так: width=max-width=720px, margin-left=margin-right=(768px-720px-12pxpadding-left-12pxpadding-right)/2=12px? 2. Почему margin'ы работают не так как я ожидаю?) Если я что-то неясно или не совсем корректно изложила прошу понять и простить :))) Спасибо за ответы.
  2. Ребят всем привет! Я только начал изучать верстку по видео урокам на ютубе. У меня есть свой макет который я купил у дизайнера. Решил с него поучиться верстать. Подскажите как правильно сделать шапку сайта. У меня все выравнивания происходят с помощь отрицательных "margin". Судя по урокам, везде делают это с помощью flex и тому подобное. Дизайн очень оказался сложным и там много проблем с фонами. Дайте пару советов и подсказок как продолжать дальше. Заранее спасибо ? Вот: макет: Мой сайт
  3. Вот кот. Предполагается, что элемент не выводится из потока (по крайней мере, нужно чтоб он взаимодействовал в "строке" с другими элементами, предполагается, что за block-center могут также находится элементы). Загвоздка следующая: левый блок (block-1) имеет минимальный размер в пикселях(150px) и натуральный размер в rem (15rem, при том, что 1rem = 10px). Хочется оставить пользователю возможность менять в браузере размер шрифта, при этом положение левого края второго элемента (block-center) должно оставаться посередине (или в ином заданном месте). Для второго элемента указано свойство: padding-left: calc(50% - 15rem); /* тут может быть и 150px*/ При использовании rem во-второй части выражения, элемент уходит вправо, при маленьком шрифте (отнимается меньше - отступ больше), если в выражении использовать пиксели, то элемент уйдёт вправо при большом шрифте (просто левый элемент увеличится). И в том, и в другом случае, для компенсации сдвига вправо, нужно сдвинуть элемент ВЛЕВО. Но сдвинуть не абсолютно, а при условии. Основные инструменты для сдвигов: марджины паддиги и бордеры прилежащих сторон элементов block-1 и block-center... Можно было бы как-то изловчится с паддингами (что-то вроде 15rem - 150px, положительное значение будет только при значении браузерного шрифта большего, чем по-умолчанию, значит только тогда он и начнёт работать), но паддинг может сдвинуть только вправо. Марджин может сдвинуть и туда и туда, но он безусловен, то есть, не может в одном случае сдвигать, а в другом - не сдвигать. Была идея как-то сделать, чтоб паддинг и марджин взаимно компенсировали друг друга, когда нам надо, а когда не нужно паддинг, стал меньше нуля, и исчез, но на практике мне не удалось это реализовать. В случае, когда отнимаем rem (в указанном выше коде), при нулевом font-size отступ максимален. Соответственно, сдвиг влево должен быть максимален и равняться ширине элемента block-1 в пикселях. Допустим ставим элементу block-center отрицательный левый марджин (или отрицательный правый марджин ставим block-1), сдвигая block-center на нужную величину, а, чтоб при увеличении шрифта отступ уменьшался, пишем block-1 {margin-right: calc(15rem - 150px)}, что при маленьких шрифтах будет сдвигать блок block-center влево, но при больших будет сдвигать вправо и как это компенсировать - не понятно. В случае, когда отнимаем px, при маленьких шрифтах всё хорошо, поскольку и block-1, и отступ - нужных размеров, но когда шрифт увеличивается, элемент block-1 увеличивается, а расстояние между блоками block-1 и block-center остаётся таким же, и опять-таки нужно каким-то образом компенсировать, а любой марджин - будет действовать в обе стороны, а паддинг - в одну, но только вправо, а мне нужно налево. В общем, не оставляют меня мысли, что тут можно применить какую-то хитрость и скомпенсировать увеличение отступа, при изменении шрифта, но что-то, как не изгаляюсь, паддинг сдвигает не туда, марджин сдвигает не только туда, но и не туда, при этом паддинг это "не туда" скомпенсировать не может, поскольку сам вылезает туда же, в "не туда"... Каким образом приручить эти элементы?
  4. Здравствуйте, я новичок в сайтостроении и у меня возникла одна проблема при адаптации страницы, она состоит в том ,что в max-width ,при заданной ширине, не хочет работать изменение отступов (padding и margin), хотя flex-direction: column; работает. Жуткое ощущение глупой ошибки ,которую не могу найти. Заранее спасибо за помощь. Ниже HTML и CSS код: <header> <div class="header"> <div class="wrap"> <div class="logo header_left"> <a href="#"> <img src="images/logo.png" alt="Логотип"> </a> </div> <div class="header_right"> <div id="topmenu"> <p> <a href="#">About</a> <span>/</span> <a href="#">Blog</a> <span>/</span> <a href="#">Contact</a> <span>/</span> </p> </div> <div id="social"> <a class="twitter" href="#"></a> <a class="vimeo" href="#"></a> <a class="facebook" href="#"></a> <a class="instagram" href="#"></a> <a class="dribbble" href="#"></a> <a class="reddit" href="#"></a> </div> </div> </div> </div> </header> ——————————————————————————————————————————————————-- #container { margin: 0 auto; } #container .header { border-bottom: 1px solid #bfbfbf; box-shadow: 0 0 3px #dbdbdb; padding-top: 6px; } #container .header .wrap { display: flex; justify-content: space-between; padding: 0; } @media (max-width: 650px) { .header .wrap { flex-direction: column; padding: 0 3px; margin-bottom: 5px; } .header #socials { margin-left: 5px; } .header #socials a:last-child { margin-right: 2px;; } } #container .header .header_left { align-self: center; } #container .header .header_right { display: flex; justify-content: space-between; } #container #topmenu { color: #8e8e8e; padding-top: 6px; } #container #topmenu a { color: #8e8e8e; text-decoration: none; } #container #topmenu a:hover { color: #dd5555; } #container #social { display: flex; margin-left: 20px; margin-right: 50px; } #social a { margin-top: 9px; margin: 8px 10px; } .twitter { background: url("../images/twitter_un.png") no-repeat; height: 11px; width: 13px; cursor: pointer; } .twitter:hover { background: url("../images/twitter.png") no-repeat; height: 11px; width: 13px; } .dribbble { background: url("../images/dribbble_un.png") no-repeat; height: 13px; width: 13px; cursor: pointer; } .dribbble:hover { background: url("../images/dribbble.png") no-repeat; height: 13px; width: 13px; } .vimeo { background: url("../images/vimeo_un.png") no-repeat; height: 12px; width: 13px; cursor: pointer; } .vimeo:hover { background: url("../images/vimeo.png") no-repeat; height: 12px; width: 13px; } .facebook { background: url("../images/facebook_un.png") no-repeat; height: 13px; width: 7px; cursor: pointer; } .facebook:hover { background: url("../images/facebook.png") no-repeat; height: 13px; width: 7px; } .instagram { background: url("../images/instagram_un.png") no-repeat; height: 12px; width: 12px; cursor: pointer; } .instagram:hover { background: url("../images/instagram.png") no-repeat; height: 12px; width: 12px; } .reddit { background: url("../images/reddit_un.png") no-repeat; height: 11px; width: 13px; cursor: pointer; } .reddit:hover { background: url("../images/reddit.png") no-repeat; height: 11px; width: 13px; }
  5. В общем почти сделал я такой сайт на вордпресс на monstroid2, и когда принялся проверять с помощью инструмента Screenfly на сервисе quirktools.com вёрстку на всех экранах выяснилось, что 15" и 19" вообще не обращают внимание на установки. Использовал power builder в котором можно выставлять margin и bottom по 4 категориям, Desctop, laptop, tablet, phone. На два последних я вообще сделал отдельные упрощённые версии сайта. Десктоп показывается безукоризненно(широкие экраны), лаптоп(квадратные как у меня) тоже всё настроено как надо. Но вот 15 и 19 дюймов почему то игнорируют всё. Вставлял через siteOrigin Custom CSS свои @media правила, но опять же, на них реагирует всё кроме этих двух разрешений. Извиняюсь за то, что плохо объясняю. Но как могу, Я пока мало что понимаю в вёрстке) На снимке поехавший по одной оси текст. Не получается вернуть его в нужное положение на этих разрешениях.
  6. Почему margin не отодвигает h2 от верха родительского элемента, как положено, а добавляет ему отступ, как показано на картинке?
  7. Доброго времени суток, столкнулся с такой проблемой, искал решение, нашел на вашем форуме похожую тему но рекомендации оттуда мне не помогли, проблема в том что я не могу отцентрировать блок div .mobnamaz{ padding:31px 3px 3px 90px; width:100%; } @media only screen and (max-width : 767px) { .mobnamaz { position: relative; width:100%; padding:0; margin:0 auto !important; } } собственно блок должен центрироваться только на мобильных устройствах, на данный момент в результате экспериментов у меня получился вот такой код, но это не работает. Вот собственно и сам div <div class="mobnamaz"> <iframe></iframe> </div> если этих данных недостаточно, предоставлю еще, вот адрес сайта i-took.ru, заранее благодарю за помощь
  8. kattiperk

    margin в %

    Здравствуйте. Я что-то потерялась и не пойму, почему задав margin в % блок с меню перекидывает последний пункт на новую строку. В примере сейчас в px, поставьте в % и оно съедет. Что не так? http://kattiperk.github.io/mps/index.html
  9. Привет камрады! Не работает выравнивание блока по центру. Не могу понять без позиционирования работает а с ним нет! В чем причина? HTML <!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="css/style.css" /><title></title></head><body><div id="header">12345</div></body> </html>CSS body { position: relative; background-color: yellow; border: 10px solid red; width: 750; height: 750;}#header { position: absolute; background-color: blue; width: 100; height: 100; border: 3px solid black; margin: 0 auto;}
  10. http://cs540104.vk.me/c540107/v540107236/279e9/SWeHuGPdagk.jpg Почему когда задаешь отступы сбоку margin или padding, то отступ появляется только у первой строки? как сделать чтобы отступ был для всех строк <style>.wrapper{ width: 960px; margin: auto;}header{ background: url(../images/header.png) no-repeat;}.logo{ width: 307px; height: 100px; border-radius: 20px; background: #e7e7e8 url(../images/header.png) no-repeat; background-size: 100% auto; overflow: hidden; float: left;}.logo h1{ position: relative; top: 26px; left: 15px; height: 65px; width: 275px; font-size: 35px; text-align: center; color: #fff; padding-top: 14px; font-weight: bold; background: url(../images/logo.png) no-repeat;}.link{ float: left; margin-top: 61px; width: 215px;}.link a{ padding: 0 20px; text-decoration: none; font-size: 12px; text-transform: uppercase; font-weight: bold; color: #000; float: left; background: url(../images/a.png) no-repeat;}</style><div class="wrapper"><header><div class="logo"><h1>Logo</h1></div><div class="link"><a href="">Lorem ipsum dolor sit</a><a href="">Lorem ipsum</a></div><div class="link"><a href="">Lorem ipsum dolor</a><a href="">Lorem ipsum dolor sit amet, consectetur adipiscing</a></div><div class="link"><a href="">Lorem ipsum dolor</a><a href="">Lorem ipsum dolor</a></div></header></div>
  11. Доброго дня, друзья у Вас абсолютно замечательный форум, и сайт, надеюсь на Вашу помощь. Статью уже почитал. http://htmlbook.ru/faq/theme/margin можете мне обьяснить более популярно? Был на курсах html css 0 уровень, вот задача сверстать меню windows 8 как сделать так, чтобы квадратики были не 4 подряд, а чтобы было 2 строчки первая строчка - 2 квадрата вторая строчка - 2 следующих квадрата ? Как управлять квадратами? Как Стать Властелином Квадратов? С уважением. Ларин Иван css такой https://yadi.sk/d/t_he7WNNhaWXX
  12. Здравствуйте. Я что-то потерялась. Давно фиксированный сайт не верстала) http://kates.cc.ua/ Посмотрите, пожалуйста, на мониторах больше 1280 пкс или в девтулс. Не по центру у нас.
  13. Здравствуйте. Вот пример того, как должно быть: Т.е. при наведении на блок, он должен увеличиваться вместе с изображением товара. Как это получилось у меня http://codepen.io/anon/pen/bNQOKa Я сделал это следующим образом: При наведении на блок, он увеличивается, а его марджины уменьшаются. В обычном состоянии я задал в .item-slider li margin:25px 15px 30px 15px; А при наведении: .item-slider li:hover margin:20px 5px 20px 5px; Но проблема в том что другие блоки начинают отскакивать. Что с этим делать? И также интересует следующее: При наведении на блок всплывает круг "SHOP IT". Как сделать чтобы он всплывал плавно. Пробовал как-то сделать через opacity и transition но не получалось, может не так делал?
  14. У меня баг (скрин под спойлером): Как видите, красное выделение съезжает до первой линии. Как это лечится? Код: HTML: CSS:
  15. Собственно сабж в чем разница между margin-top и top margin-left и left и так далее...
  16. Здравствуйте. Подскажите, пожалуйста, почему кнопка "Send" не центрируется внизу. http://cssdesk.com/V4hj4
  17. Проблема при разрешении 1024 блоки стоят по (им задан margin с левой стороны)центру но когда я увеличиваю масштаб то они становятся уже не по центру, можно ли сделать так чтобы когда увеличиваю разрешения margin с лева увеличивался ?
  18. К сайту подключен reset.css Для одного из элементов (например img) я хочу отменить margin, словно его и не было. Как это можно сделать? margin: none margin: auto Не работает
  19. Почему-то margin'ы работают, хоть они и не прописаны. http://cssdeck.com/labs/full/2xrdgmdq - код. Там, вроде все так, как задумывалось, а в браузере так: http://rghost.ru/53521698
  20. Делаю верстку с резиновыми колонками и фиксированными отступами между ними. .col {margin-left: 10px;margin-right: 10px;}Через float колонки находятся в одном ряду. Если задать margin, при ресайзе окна колонки не обтекаются и переносятся. Подумал для этого использовать бордеры, вот так: border-left: solid 10px transparent;border-right: solid 10px transparent;Можно так?
  21. http://cssdeck.com/labs/zipwv5hq В блоке c текстом about_block находится img c отступами в 30px слева и снизу, чтобы текст не прилипал к картинке . Но вот проблема, если текста мало, и он не обтекает картинку снизу, то получается что до следующего блока снизу отступ увеличивается на 30px. Т.е. расстояние между блоками не задуманные изначально 40px, а 70. Так вот, может кто знает решение средствами css?
  22. Ребят при добавлении стилю DIVу элемента padding у этого DIVа увеличивается размер. Если на пальцах есть блок размеров 200 на 400. В его стиле прописываю padding:10px; и блок становится размером 220 на 420. Как этого избежать? Ведь padding должен просто делать отступы внутри блока а не менять его размер.
  23. много гуглил но так и не нашел годного ответа на свой вопрос подскажите пожалуйста. есть шапка <header> <a></a> <div></div> <nav></nav> </header> и css header { height:300px; } Нужно что бы шапка растягивалась по всей ширине, но контент в ней(a, div, nav) выравнивался по горизонтали по центру. Стандартный: margin: 0 auto; не действует, если не задано width. Как выровнять весь контент шапки по центру?
  24. Даже стыдно спрашивать, но никак не могу понять. Такой вот тривиальный пример. <div class="main"> <div class="block"></div> </div> body { margin: 0; padding: 0; } .main{ width: 400px; height: 400px; background-color: #272822; } .block{ background-color: #982722; width: 100px; height: 100px; margin: 40px; } почему в данном случае margin-left отображается корректно, а margin-top как бы вылазит и отодвигает родительский блок от области просмотра?
×
×
  • 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