Search the Community
Showing results for tags 'padding'.
-
Здравствуйте. padding подгоняется не четко, при изменении масштаба видно изъяны (подсветка кнопки не на всю высоту или на оборот больше чем нужно) Код: https://jsfiddle.net/aemjkhp9/
-
Вот кот. Предполагается, что элемент не выводится из потока (по крайней мере, нужно чтоб он взаимодействовал в "строке" с другими элементами, предполагается, что за 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 остаётся таким же, и опять-таки нужно каким-то образом компенсировать, а любой марджин - будет действовать в обе стороны, а паддинг - в одну, но только вправо, а мне нужно налево. В общем, не оставляют меня мысли, что тут можно применить какую-то хитрость и скомпенсировать увеличение отступа, при изменении шрифта, но что-то, как не изгаляюсь, паддинг сдвигает не туда, марджин сдвигает не только туда, но и не туда, при этом паддинг это "не туда" скомпенсировать не может, поскольку сам вылезает туда же, в "не туда"... Каким образом приручить эти элементы?
-
Здравствуйте, я новичок в сайтостроении и у меня возникла одна проблема при адаптации страницы, она состоит в том ,что в 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; }
-
медиа 15" и 19" экраны не реагируют на @media правила css
GorodSka3ka posted a question in HTML Coding
В общем почти сделал я такой сайт на вордпресс на monstroid2, и когда принялся проверять с помощью инструмента Screenfly на сервисе quirktools.com вёрстку на всех экранах выяснилось, что 15" и 19" вообще не обращают внимание на установки. Использовал power builder в котором можно выставлять margin и bottom по 4 категориям, Desctop, laptop, tablet, phone. На два последних я вообще сделал отдельные упрощённые версии сайта. Десктоп показывается безукоризненно(широкие экраны), лаптоп(квадратные как у меня) тоже всё настроено как надо. Но вот 15 и 19 дюймов почему то игнорируют всё. Вставлял через siteOrigin Custom CSS свои @media правила, но опять же, на них реагирует всё кроме этих двух разрешений. Извиняюсь за то, что плохо объясняю. Но как могу, Я пока мало что понимаю в вёрстке) На снимке поехавший по одной оси текст. Не получается вернуть его в нужное положение на этих разрешениях. -
Добрый день! Помогите, у меня в css вот такая байда: #content p{margin-top:10px;text-align:justify;padding-left:20px;padding-right:20px;} В связи с эти, не могу уменьшить паддинг текста в дивах. Как это сделать! Я не асс в css. На всякий случай вот тут всплывающее окно.
-
Html код <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Axit</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="bg_h"> <header> <a href="index.html" > <img src="img/logo.png"></a> <ul class="sidebar_head"> <li><a href="">Features</a></li> <li><a href="">About</a></li> <li><a href="">Pricing</a></li> <li><a href="">Reviews</a></li> <li><a href="">Contact</a></li> </ul> </header> </div> <div class="wrapper"> <div class="block_1 "> <div class=" modern"> <div class="form"> <ul> <li><button class="but_1">Try Your FREE Trial Today</li> <li><input type="text" placeholder="Name"></li> <li><input type="email" placeholder="Email"></li> <li><input type="password" placeholder="Password"></li> <li><button class="but_2">Get Started</button></li> </ul> </div> <span>MODERN AXURE TEMPLATE <br> FOR BEAUTIFUL PROTOTYPES</span> <img src="img/modern_line.png" alt=""> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean <br> euismod bibendum laoreet. Proin gravida dolor sit amet lacus <br> accumsan et viverra justo commodo. </p> <button>Download</button> </div> </div> <div class="social_media"> <ul> <li><a href="" class="icon rss"></a></li> <li><a href="" class="icon znak"></a></li> <li><a href="" class="icon inst"></a></li> <li><a href="" class="icon pi"></a></li> <li><a href="" class="icon goog"></a></li> <li><a href="" class="icon twit"></a></li> <li><a href="" class="icon fb"></a></li> </ul> <h2>Social Media</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean euismod bibendum laoreet.</p> </div> <!--social_media END --> <div class="tab_soft"> <p>dasdawsdaw</p> </div> </div> </body> </html> CSS код html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } li{ list-style: none; } a{ text-decoration: none; } body{ font-family: 'Times New Roman'; background-color: #282828; } .wrapper{ width: 1400px; margin: 0 auto; padding: 100px; } /* header */ .bg_h{ background-color:#000; } header{ max-width:1400px; margin: 0 auto; height: 70px; } header>a{ display: inline-block; margin:20px 0 20px 150px; } header li{ display:inline-block; } .sidebar_head{ float:right; margin-top: 25px; margin-right: 150px; } .sidebar_head a{ color:#c9c9c9; font-size: 14px; font-family: 'Times New Roman'; margin-left: 43px; } /*header end*/ .block_1{ height: 640px; background-color: #9a9a9a; } .modern{ height: 640px; background-image: url(img/Logo_modern.png); background-repeat: no-repeat; background-position: 140px 110px; /* padding-left: 140px;*/ padding-right: 140px; } .block_1 span{ display: block; color: #fff; font-size: 36px; font-weight: normal; font-family: 'Times New Roman'; padding-top: 200px; } .block_1 img{ margin-top:40px; } .block_1 p{ font-size: 16px; line-height: 23px; color:#c6c6c6; margin-top: 40px; } .modern>button{ font-size: 15px; line-height: 15px; color:#fff; padding: 13px 28px; border:2px solid #f5f5f5; margin-top: 45px; background-color: #9a9a9a; } .form{ float: right; width: 362px; height: 362px; margin-top: 140px; background-color: #fff; border-radius: 5px 5px 5px 5px; } .but_1{ width: 362px; font-size: 20px; line-height: 60px; background-color: #f5f5f5; border:none; border-radius: 5px 5px 0 0; } .but_2{ color:#fff; font-size: 15px; background-color: #ff9b51; height: 53px; width: 362px; border: none; margin-top: 44px; border-radius:0 0 5px 5px ; } .form input{ margin:0 40px; margin-top: 35px; width:275px; height: 30px; border:none; border-bottom: 1px solid #d6d6d6; border-left: 1px solid #fbfbfb; border-right: 1px solid #fbfbfb; } .social_media{ border-bottom: 1px solid #b7b7b7; outline-bottom: solid 1px #d6d6d6; padding:22px 83px 20px 140px; background-color:#fff; } .social_media h2{ margin-bottom: 10px; font-size: 20px; color:#282828; font-weight: bold; } .social_media p{ font-size: 15px; line-height: 20px; color:#a9aaac; } .icon{ height: 50px; width: 54px; float:right; margin:7px 45px auto 0; } .rss{ background: url(img/social-media-icons.png) no-repeat -591px center; } .znak{ background: url(img/social-media-icons.png) no-repeat -483px center; } .inst{ background: url(img/social-media-icons.png) no-repeat -376px center; } .pi{ background: url(img/social-media-icons.png) no-repeat -272px center; } .goog{ background: url(img/social-media-icons.png) no-repeat -183px center; } .twit{ background: url(img/social-media-icons.png) no-repeat -76px center; } .fb{ background: url(img/social-media-icons.png) no-repeat 20px center; } .tab_soft{ height: 590px; background-color: #f5f5f5; } не понимаю почему padding в классе wrapper действуют как маргины, хочу сделать отступы с левой и правой стороны внутри блока , а отступы появляются вокруг . Вроде бы вложено все правильно, в верстке новичек прошу строго не судить)
-
Всем здравствуйте! Столкнулся с проблемой и никак не могу найти рабочее решение. Помогите неучу, пожалуйста! Вот ссылка на JSFiddle и пример кода: HTML: <div class="lineHeight"> HELLO // line-height method </div> <div class="padding"> HELLO // padding method </div> CSS: @import url('https://fonts.googleapis.com/css?family=Open+Sans'); div { font-family: 'Open Sans', sans-serif; font-size: 14px; height: 100px; background: lightgreen; margin: 5px; padding-left: 10px; box-sizing: border-box; } .lineHeight { line-height: 100px; } .padding { padding-top: 42px; /* (100px - 14px) / 2 - 1px */ } Ситуация следующая: В случаях с line-height и padding текст ровно по центру, отступы по 45px сверху и снизу: - Google Chrome (v. 55.0.2883.87 m); - Mozilla Firefox (v. 50.1.0); - Opera (v. 42.0.2393.94); - Safari (macOS, v. 10.0 12602.1.32.7); Для line-height отступы по 45px, для padding 46px сверху и 44px снизу: - Safari (Windows, v. 5.1.7 7534.57.2); В случаях с line-height и padding текст ровно по центру, отступы 46px сверху и 44px снизу: - Internet Explorer 11 (v. 11.576.14393.0); - Microsoft EDGE (v. 38.14393.0.0); Я понимаю, что в ряде случаев это не принципиально, но что делать если блок с текстом это, например, меню, а сбоку от текста расположена ровная иконка, положение которой задано через background-position. Выравниваешь иконку для одного браузера - плывёт в другом. Выглядит весьма заметно и некрасиво. И Бог бы с этим эксплорером, но дело вот в чём, на Android 6.0.1 (device pixel ratio 4.0) стандартный интернет браузер, а также скаченный Google Chrome центруют неровно, также наблюдается расхождение в 1 пиксель, а вот на это уже закрывать глаза не хочется (большой скрин с Android): Что примичательно, высота первой буквы на настольных компьютерах 10px, а на андроиде чуть больше. Разумеется добиться идеальной картинки, да ещё и во всех браузерах одновременно, невозможно, но ведь это не какой-то частный случай, а вполне закономерное желание разместить текст по центру меню-бара. Я буду очень признателен за Вашу помощь и пояснения на предмет "best-practices". Что я пробовал для решения данной проблемы: - Использовал разные шрифты, а также разные методы подключения внешних шрифтов: link через html / @import в CSS для Google Fonts, а также @font-face url для скаченных шрифтов; - Задавал размеры шрифта, отступы, line-height в em / rem / px; - Пробовал различные комбинации line-height + padding; - Для создания иконок меню пробовал псевдо элементы, это конечно же решает проблему расположения иконок относительно текста, но не решает проблему центровки по вертикали. P.S. CSS сброшен. Meta viewport задан. Доп. вопрос от новичка: Почему, задавая размер шрифта 14px, заглавная буква по факту занимает 10px? При этом если я использую буквы типа "Й" и "р", высота занимаемая текстом будет уже 16px, но никак не 14px. Что-же задают тогда эти пиксели в размере шрифта?
-
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>
-
Всем привет! Подскажите, опытные верстальщики, откуда в некоторых ячейках таблицы появляются padding'и: http://joxi.ru/n2YY0kKc5Y1Z26 Я не так давно в вашей сфере, может эта банальная ошибка, но я не понимаю. Chrome говорит, что у ячейки они отсутствуют, но все равно их выделяет при наведении на слово padding внутри этого окошка: http://joxi.ru/Y2L8DXguL3W126 margin'ы у внутренних блоков убраны и при рассмотрении через html отладчик, если его можно так назвать, никакого влияния на эту область не дают. У таблицы стоит свойство cellpadding="0" Свойства для всех ячеек одинаковы, но у каких-то таких проблем нет, а у каких-то есть? С чем это может быть связано? Спасибо всем, кто имеет какие-нибудь предположения по этому поводу!
-
Есть форма: http://jsfiddle.net/6BU8r/ Когда: .form-contact input[type="text"] {padding: 0;}Все инпут поля вписываются в рамки "form-content", а когда устанавливаем: padding: 0 20px; То происходит увеличение длины инпута и выход его за пределы? И второй вопрос - как вписать эти инпут-поля в "form-content", чтобы они не вылезали? Спасибо!
-
Ребят при добавлении стилю DIVу элемента padding у этого DIVа увеличивается размер. Если на пальцах есть блок размеров 200 на 400. В его стиле прописываю padding:10px; и блок становится размером 220 на 420. Как этого избежать? Ведь padding должен просто делать отступы внутри блока а не менять его размер.
-
Думаю большинству знакомый баг в IE, когда при наборе длинного текста в input горизонтальный paddng не учитываться. И если в этом padding'е расположено фоновое изображение, то текст налазит на него. Обычно это решается дополнительным враппером/контейнером. Но как же не хочется для каждого такого поля добавляться дополнительный контейнер только, что бы исправить этот баг в IE. Существует ли решение этой задачи, без использования дополнительных тегов или js?