-
Posts
262 -
Joined
-
Last visited
-
Days Won
2
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Arinden
-
Кроссбраузерность line-height или как правильно центровать текст по вертикали
Arinden replied to Arinden's question in HTML Coding
Не только Safari. Safari и Internet Explorer и EDGE выводят результат иначе чем Google Chrome для Вашего примера. В Chrome 45px - 40px оба значения. Мне понравилось решение, спасибо. Но, к сожалению, аналогичная проблема, ниже браузеры и расстояние в пикселях до единицы и до двойки: Internet Explorer: 35px 44px; EDGE: 35px 45px; Google Chrome: 35px 44px; Mozilla Firefox: 34px 44px; Safari: 34px 44px; -
Кроссбраузерность line-height или как правильно центровать текст по вертикали
Arinden replied to Arinden's question in HTML Coding
Согласен, спасибо. Но шрифт для замеров импортирован в CSS с Google Fonts, получается рендер одного и того же шрифта на разных устройствах - разный? Как-то можно на это повлиять? Спасибо за Ваш пример на JSFiddle, но вот пример отображения в Safari на Windows: , а вот в Internet Explorer 11: Сам жёлтый блок по прежднему отцентрован по разному. При этом, высота жёлтого блока одинаковая, а вот его положение - нет, как бы я не производил замеры... =( Спасибо за совет, попробую. Если у Вас есть несколько минут свободного времени, был бы очень рад получить пример с моим кодом на JSFiddle. -
Всем здравствуйте! Столкнулся с проблемой и никак не могу найти рабочее решение. Помогите неучу, пожалуйста! Вот ссылка на 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://jsfiddle.net/u6xcf/1/
-
http://jsfiddle.net/u6xcf/
-
К решению от: Добавьте: a:hover { background: green; /* Заменить на желаемый цвет */}JSFiddle
-
Предлагаю в jquery.jqzoom-core.js после if (e.pageX > smallimage.pos.r || e.pageX < smallimage.pos.l || e.pageY < smallimage.pos.t || e.pageY > smallimage.pos. { lens.setcenter();добавить obj.deactivate();перед return false;}У меня работает.
-
НЕ РЕКЛАМА Запрос в гугл дал мне несколько результатов, может быть, ссылки будут Вам полезны: http://rugraphics.ru/photoshop/shrifty-ieroglify http://photoshop-sklad.ru/368-russkie-shrifty-v-yaponskom-stile.html http://narod.ru/disk/18121198000/China.rar.html http://serblog.ru/russkij-shrift-v-yaponskom-stile
-
Предлагаю вот так (JSFiddle): HTML: <div class="header"> <span></span> <img src="http://www.google.com/images/srpr/logo11w.png" /></div>CSS: .header { height: 20vh; background: #cecece; margin: 0px; text-align: center;}.header span { display: inline-block; height: 100%; vertical-align: middle;}.header img { max-height: 80%; max-width: 100%; vertical-align: middle;}
-
Пример с Александра Дюмы берут
-
Понять-то можно, это не такие уж и сложные вещи, но не нужно. То о чём рассказывается в статье есть самый настоящий интеллектуальный анонизм. Вещи настолько бесполезные, что не несут даже самоценности для математики. Существует масса намного более интересных задач на которые стоит обратить внимание. Типа "что вижу, то пою", научный абстракционизм не имеющий конца и смысла. С одной стороны, если это высокоинтеллектуально, это может и развивает личность. С другой стороны - вот уж действительно есть более ценные задачи, теории над которыми можно поломать голову, да и применить по жизни. А вот по поводу "индусского кода", я не знаю, может у них тихий "стёб" просто над заказчиками или реально так получается от несовершенного знания языка? Я вот от каждого языка по чуть-чуть нахватался и ни один хорошо не знаю, а когда что-то пишу, получается 20 строк "кода", слепленного из простейших выражений и адаптированных сниппетов, аля "работает и ладно", вместо 1-й логичной.строки. Провести вот аналогию с иностранным языком: если не знаешь слова, будешь стоять объяснять, что "вот такая мол штука, которая применяется там-то и там-то, ещё такого цвета и есть в каждом офисе", как бы тебя поймут в конечном счёте, но знаний явно не хватает.
-
Офигеть... Я в математике не силён и на первый взгляд это "уму не постижимо"... Это вообще, понять, до уровня "написать фрагмент самостоятельно", возможно?
-
Ну не придирайтесь... Клондайк! Это же "учитаться"! Не видел такой сайт, но в принципе моя идея была похожей. Спасибо Я не осилил... Но, выглядит внушительно
-
На самом деле никаких понтов, я ничего не умею. JavaScript изучаю на самых азах. Тему разместил в Флейм, исключительно из-за её бесполезности. На идею навела статья на лурк касательно индусского кода. Не знаю как Вас, а вот меня данные примеры немного удивляют и веселят. Их интересно и, бывает, познавательно изучать, не могу сказать что мой пример мог бы быть кому-то полезен в этом плане, но я рассчитывал, что меня поддержат и будут публиковать свои примеры или копипастить коды с других мест. Не поддерживаете - удалите, пожалуйста, тему.
-
Только начал изучать индусский, первое упражнение, по устоявшейся мировой практике - Hello World! Встречайте: var b = -1;var c = ~(b * 2 + (b = 0));var b$1 = 65 % 33;var b$2 = c + 110;var b$3 = (b$1 * b$2) % 109;var d = String.fromCharCode(b$3*2-56,b$2-10,b$3+44,b$3+44,b$2);var e = String.fromCharCode((b$2/b$3^0)*87,b$2,b$3*2-14,b$3+44,b$2-11);var f = String.fromCharCode(b$1);var g = String.fromCharCode(b$1+1);!!!!!!!!!!!!!!!(b > ++c) && alert(d + f + e + g);JSFiddle
-
Месье хочет, чтобы по нажатию на кнопку "Добавить ещё вопрос" добавлялся блок Вопрос №++, поле "Ваш вопрос" и одно поле "Ответ". А вот по нажатию на "Добавить новый вариант ответа", чтобы добавлялось поле "Ответ" в соотствующий блок с вопросом. При этом id новых элементов должны быть уникальны. Дубль темы.
-
Спасибо!
-
Всем привет! Изучаю JavaScript на CodeCademy. При изучаении while циклов, мне было предложено написать код, который выводит три раза одну и туже надпись. Предполагается, что я напишу вот такой код и перейду к следующему уроку: counter = 0;var loop = function(){ while(counter < 3){ console.log("I'm looping!"); counter++; }};loop();Я вот думаю, это же получается бесконечный цикл. Результатом первых трёх циклов будет вывод надписи, а затем цикл будет повторяться в фоновом режиме, но безрезультатно. Это будет кушать ресурсы. Или я ошибаюсь? На мой взгляд логичнее сделать вот так: counter = 0;loop();var loop = function(){ while(counter < 3){ console.log("I'm looping!"); counter++; loop(); }};Т.е. вызываем функцию первый раз, тем самым запуская цикл. После третьего раза условие не будет выполнено и цикл остановится.
-
Вопрос снимается, прошу модераторов удалить тему. Извиняюсь.
-
Всем привет! Столкнулся с необходимость создать нечто подобное на большой оффлайн справочник, написанный на html с применнием таблиц стилей. Собственно не знаю с какой стороны подойди к созданию, в силу своего крайне скудного опыта. Суть такова, что будет основное меню и уйма разных страничек, которые однотипно подгружаются по нажатию на элементы меню. При этом справочник постоянно расширяется и в меню будут появляться новые элементы, группы и прочее. Первое, что приходит в голову, это использовать iframe, так как о серверном коде речи не идёт. Но всё как-то криво, косо, неудобно, чтоли. Буду рад услышать как бы вы это делали в сторону чего лучше посмотреть для успешной реализации? Без php, видимо, все страницы вручную делать надо, все теги проставлять, меню дополнять, соблюдать ряд последовательных действий. Т.е. обычный пользователь будет абсолютно не в состоянии добавить информацию в справочник?.. Это удручает. Запустить локальный сервер не вариант. Справка в формате chf тоже не подходит, и она должна быть кросс-платформенна между mac os, windows и linux... Как-то так.. =\
-
Проблема в неудобстве. Что если вы собираетесь "нарисовать" макет, перед тем как приступить к его вёрстке. На примере, который на изображениях выше, создан документ 1920 х 1080 px. Имея экран с таким разрешением, документ в него не влезет в 100% масштабе, т.к. часть съедается панелями и меню самого фотошопа. Вот провели вы, например, линию и нужно посмотреть как она выглядит на общем фоне. Отдаляем пока изображение не впишется в визуальную область. И оно, разумеется, будет меньше 100%. И что самое интересное, если приближать изображение, то визуально тоже всё не так здорово. Рисуем, например кнопку или блок с бордером 2 px. И начинаем его приближать. В результате на разных процентах разные части бордера могут быть то тоньше, то толще. Так например, при увеличении в почти два раза, бордер слева может стать 3 пикселя, а бордер справа 4 пискеля!.. Такие вещи возникают только на "не ровных" процентах приближения \ отдаления. И опять таки, другой вопрос, если бы оно так работало всегда и везде, но в Photoshop CS6 оно работает так, как надо. Я понимаю, что мне можно посоветовать использовать CS6, если он работает так, как мне нужно, но я бы хотел купить Photoshop Elements и работать в нём.
-
Я проделал аналогичную на проверку на множестве компьютеров, где установлен Photoshop. Встречались версии CS3, CS4. Принудительно установил Photoshop Elements на 3 чужие совершенно разные машины, моноблок, ноутбук и рабочий компьютер - абсолютно везде работает одинаково. Но я не понимаю, что я делаю не так и как можно так работать. Неужели вам это не мешает или у вас по другому?!... Шокирует, что в интернете почти никто не пишет о подобной проблеме. И что самое странное в CS6 такого бага нет! Пожалуйста, уделите этой проблеме немного своего времени, это реально важный для меня вопрос. Я чувствую, что ответ где-то на поверхности. =\
-
Это можно изменить только в CS, в PSE нет такой настройки, я посмотрел. А в CS4 изменение ресемплирования не исправило баг. Кто-то подал идею, что линию не видно, т.к. она при отдалее становится тоньше 1 пикселя. Но я ставлю эту теорию под сомнение, т.к. обе линии одинаковой толщины и одну видно, другую - нет. В Trial версии CS6 всё отображается как надо, я проверил. А что касается тех. поддержки Adobe, так они просят купить продукт, чтобы оказывать поддержку, а я не хочу покупать продукт пока он не заработает должным образом на моей машине.. =\
-
Это Photoshop Elements 12. Я в CS4 на компьютере знакомого видел точно такой же баг.