sifilis
-
Posts
28 -
Joined
-
Last visited
sifilis's Achievements
Explorer (1/14)
0
Reputation
-
Перемещение родительского блока через transition
sifilis replied to sifilis's question in HTML Coding
Печалька. Спасибо за отклик на мою проблему. -
Здравствуйте. Вопрос. Есть структура вида: <section> <div> блаблабла </div> </section> Как на css записать уменьшение у section css-свойства left на 100 пикселей по клику на дочерний div через transition?
-
У кого есть опыт в этом деле, помогите с выбором. Есть ftp-сервак с сайтом, есть 5 человек, которые работают над сайтом: кто-то вёрстку правит, кто-то код. Понятное дело, что без контроля изменений файлов тут не обойтись. Вопрос: а что выбрать? Что-то такое, что в качестве центрального хранилища использует FTP, куда подгружает изменённые файлы с локального репозитория. Или хотя бы дайте что-нибудь почитать на эту тему. Гугл смотрел, там наркоманство сплошное.
-
Всем здрасьте. Решил сделать собственную карусель, с гейшами и нардами, в итоге родил вот такую небольшую кодовёрстку: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Фотон</title> <script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { $("div.children").each(function() { $(this).css("width", $(window).width()); }); $("div.parent").css("width", $("div.children").size() * $(window).width()); $(window).bind("resize", function() { $("div.children").each(function() { $(this).css("width", $(window).width()); }); $("div.parent").css("width", $("div.children").size() * $(window).width()); }); $("a.next").click(function() { $("div.children").eq(0).animate( { marginLeft: -1 * $(window).width() }, 500, function() { $(this).appendTo($("div.parent")); $(this).css("margin", 0); } ); }); $("a.prev").click(function() { $("div.children").eq($("div.children").size() - 1).css("visibility","hidden"); //на всякий случай скрываем элемент $("div.children").eq($("div.children").size() - 1).prependTo($("div.parent")); //перемещаем элемент в начало $("div.children").eq(0).css("marginLeft", -1 * $(window).width()); //отбрасываем элемент влево $("div.children").eq(0).css("visibility","visible"); //отображаем элемент обратно $("div.children").eq(0).animate( {marginLeft: 0}, 500 ); }); }); </script> <style type="text/css"> * { margin: 0; padding: 0; } .parent { height: 100px; overflow: hidden; } .children { float: left; height: 100px; } </style> </head> <body> <div style="" class="parent"> <div style="background: red;" class="children"></div> <div style="background: black;" class="children"></div> <div style="background: green;" class="children"></div> </div> <a href="#" title="" class="prev">Туда</a><br /><br /> <a href="#" title="" class="next">Сюда</a><br /><br /> </body> </html> Однако есть небольшая проблема: нижняя полоса прокрутки жиреет без стыда и совести на всю ширину блока с классом parent. Единственный вариант как убрать нижнюю полосу прокрутки вижу только в том, чтобы задать для overflow-x: hidden для body. Но тогда нижняя полоса прокрутки вообще никогда не будет показываться, а хотелось бы, чтобы она появлялась (естественно, что не во всю ширину блока с классом parent) при ширине браузера меньше 1000 пикселей. Какой выход можно найти из этой ситуации?
-
Ну вот представим ситуацию. Есть у нас горизонтальное меню, в котором для выделения активного раздела тегу li добавляется фоновый цвет (все остальные имеют background transparent). И тут каждый браузер начинает добавлять свои отступы к верху. То есть у меня по дизайну между верхней частью буквы "Т" и верхней частью бекграунда 5 пикселей, а браузер добавляет ещё 5 пикселей. И получается у нас вместо 5 пикселей 10. Лажа получается.
-
И что получим в итоге? Хотя, возможно, я чего-то не понимаю? Получим, что при значении 0.7 текст прижимается к верхней части. Я просто почему это спрашиваю, надоело, что при вёрстке меню каждый браузер постоянно добавляет свои отступы для текста сверху.
-
Создаём простенький html-документ следующего содержания: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Paddings</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin: 0; padding: 0; outline: 0; border: 0; } div.redBlock { margin: 100px; width: 300px; height: 50px; background: red; font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; font-size: 10pt; color: white; } </style> </head> <body> <div class="redBlock"> This is example. </div> </body> </html> В теории у нас текст должен примкнуть к левому верхнему углу блока с красным фоном. Но давайте откроем тестовую страницу, к примеру, в Firefox 14.0.1, сделаем скриншот и посмотрим что у нас на самом деле (прикрепляю скриншот к теме). А получается у нас, что от левого края у текста остаётся 1 пиксель, а от верхнего края аж 9 (ДЕВЯТЬ!!!) пикселей! Что это за пиксели? Я их не звал, так чего они пришли?
-
До какого момента? Должен быть предел, после которого разница в пунктах и пикселях становится явно заметной.
-
И как тогда быть с вёрсткой? Пункты не совпадают, пиксели не совпадают. Какое решение?
-
Так. Фотошоп исходит из 72 пикселей на дюйм (так было в 90-х на Маках). По стандарту CSS, в дюйме 72 пункта, но 96 пикселей (так чаще всего получалось в реальности, когда стандарт писали). Если в фотошопе выставить 96dpi, то и пиксели, и пункты будут соответствовать CSSным (но рендеринг шрифтов всё равно может отличаться). То есть если я вижу в макете размер в 12pt, то надо макет переделать в 96dpi? А как это сделать? Да. 1px = 3/4pt = 1/96in. По умолчанию (если не переопределять font-size для body) в соврем. браузерах 1em = 12pt = 16px = 1/6in. Не понял. 12 / 4 * 3 = 9, но не 16. Открыл ради интереса макет в закромах, в меню у текста выставлено 12pt. Измерил линейкой буквы: прописные в 7 пикселей, заглавные в 9. Получается, что 12pt - это 9px по заглавной букве?
-
Поддержу автора вопроса. Зачем использовать непонятные em, значения которых зависит от какой-то родительской величины, когда можно просто использовать пиксели, чтобы по максимуму соответствовать макету дизайна?
-
Тоже пробовал, не срабатывает. Не работает и $(this).is(":empty") О, вот это работает! if ($(this).text() == '\xa0') { alert("fsfdsdf"); }
-
Есть элемент следующего вида: Мне надо на jQuery выбрать все такие элементы и преобразовать у них css. Делаю вот так: $("p").each(function() { if ($(this).text() == " ") { $(this).css("lineHeight","10px"); } }); И ни фига. Но при этом код следующего вида работает: $("p").each(function() { $(this).css("lineHeight","10px"); }); ИЧЯДНТ?
-
С каких-то недавних пор стал замечать вот какую вещь. Тыкаю я на странице правой кнопкой на каком-нибудь элементе, жмякаю «Инспектировать элемент с помощью Firebug», в окошке Firebug происходит перекидывание на инспектируемый элемент. В общем вроде бы всё как обычно. Но недавно стала проявляться вот какая вещь. Если на странице есть повторяющийся Javascript (например слайдер, который автоматически показывает новый элемент через заданный промежуток времени), то в окошке Firebug происходит перебрасывание с инспектируемого элемента на элемент, в отношении которого исполняется Javascript. Можно ли как-то отключить эту багофичу, что-то типа опции «Сидеть вот здесь и никуда не перепрыгивать, пока хозяин не скажет»?
-
Вот оно как.