26 октября 2013 в 19:38
-----------------
Выравнивание "left-center" боковых кнопок.
Главные вкладки
26 октября 2013 в 19:38
Содержимое сайта публикуется на условиях CreativeCommons Attribution-ShareAlike 3.0 или более поздней версии. Программные коды в тексте статей — на условиях GNU GPL v2 или более поздней версии.
Документация по совместной работе с репозиторием drupal.ru – https://docs.drupal.ru/code
Drupal – торговая марка Дриса Бёйтарта
12+
Поддерживать инфраструктуру Drupal.ru нам помогает компания ДАЛЕЕ
Комментарии
Кнопки фейсбука и прочих???
.pluso-001010100101-08 {
maging: 0 auto;
width: 200px;
}
.pluso {
width: 100%;
}
Добавить в любой css файл, подгружать этот css файл яваскриптом после полной прогрузкии страницы, ибо эти стили на Вашем сайте генерятся яваскриптом. Изменить эти стили надо после того, как скрипт определит их на странице.
В вашем предложении не могу найти параметр центрирования, который и необходим.
maging: 0 auto;
Вы вообще с css знакомы? Простите за сарказм.
margin:auto; - покороче будет:)
Судя по продолжительности Вашего присутствия в качестве зарегистрированного пользователя на этом сайте (6 недель на текущий момент), могу предположить, что Вы еще только в начале пути познания сайтостроения... Заданный Вами последний вопрос заставил усомниться в степени увлеченности. К изучению Друпала люди приходят (как правило) с багажом знаний по html, css, javascript и хотя бы поверхностным пониманием что такое php и mysql. Похоже, Вам удалось пропустить начальную школу подготовки по сайтостроению и приступить сразу к курсу лекций Высшего образования. Сочувствую, будет трудно.
В файл pages.css добавил
".pluso-001010100101-08 {
maging: 0 auto;
width: 200px;
}
.pluso {
width: 100%;
}"
Изменений не произошло (прикрепил скрин)
Если Вас смутила моя опечатка, поправлюсь:
margin: 0 auto;
(-: люблю оригинальность, понимаете ли...
И потом, если все же Вам необходимо это втиснуть в css, который подгружается в файлах стилей темы (судя по всему это http://www.wordado.ru/sites/all/themes/zen/zen-internals/css/pages.css), то не забудьте добавить конструкцию !important.
.pluso {
width: 100% !important;
}
.pluso-001010100101-08 {
margin: 0 auto !important;
width: 200px !important;
}
Почему? Потому что Ваши кнопки генерятся ява-скриптом на стороне клиента после того, как содержимое полностью получено от сайта в браузер. И все css правила, которые Вы подгрузите пользователю будут заменены (точнее: переопределены) новыми правилами, которые сгенерит яваскрипт. Поэтому или css с изменениями грузить в самом конце (читайте мой первый коммент), или конструкция !important, или ломать скрипт и переписывать его с правильными стилями под Ваши нужды.
З.Ы. !important не всегда работает (вернее, работает, но иногда так, как не ожидаешь). Причиной тому может быть неадекватная верстка и/или работа яваскриптов, которые "на лету" модифицируют код страницы.
И правильное написание MARGIN не привело к изменениям.
Добавление text-align: left-center лишь выводит в центру под низом сайта кнопки.
В том числе и important.
Учите матчасть....
htmlbook.ru Вам в помощь.
Простите за то, что не сообщаю Вам всех подробностей Вашей проблемы и методов ее лечения... Ибо это будет большое оскорбление в Ваш адрес.
В официальном css отсутствует значение text-align: left-center. Ознакомьтесь со спецификацией поподробнее здесь http://www.w3.org/TR/CSS21/text.html#propdef-text-align . Ваше значение есть отступление от правил, частный случай реализованный Вашим конкретным браузером. И я не удивлен, что это коряво работает. Тем более коряво, что много параметром надо учесть и в окружении исследуемого элемента (центрируемого Вами).
Давайте так:
1. Поднимаете исходный код кнопок, который прикручен к сайту.
2. Делаете бэкап этого кода, чтобы при неудачной попытке можно было безболезненно откатиться.
3. Полностью изучаете те строчки, которые генерируют css для !всех! элементов (.pluso и .pluso-001010100101-08 в том числе). Удаляете из них места формирования css правил.
4. Пишите новый css для этих элементов в любом файле стилей Вашей темы.
Профит.
Внимательно проследовал вашей инструкции (за что благодарен вам, очень очень).
Вот исходный код:
(function() {
if (window.pluso)if (typeof window.pluso.start == "function") return;
if (window.ifpluso==undefined) { window.ifpluso = 1;
var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js';
var h=d[g]('body')[0];
h.appendChild(s);
}})();
class="pluso" data-background="#ebebeb" data-options="big,square,line,vertical,nocounter,theme=08" data-services="vkontakte,facebook,twitter"> - эта строка единственная с параметрами CSS.
- ее я удалил, пропали кнопки вообще.
- добавил удаленную строчку в дополнении к тем параметрам, о которых вы говорили выше (margin,т.д.)
- результата нет.
Читаем чуть подробнее в 6 строке кода: "share.pluso. ru/pluso-like.j s" (пробелы вставлены спецом, нафиг не нужен линк туда в моем комменте)
Можете эти букавы вставить в адресную строку браузера и открыть содержимое pluso-like.js - вот там будет тьма кода, рассчитываеющего координаты, длины, ширину, прочую ересь. Хватит знаний перековырять этот файл? Достаточно будет его сохранить себе на хостинг, изменить под себя, и в шестой строке кода выше сослаться именно на свой js.
Из плюсов: Вы отвязаны от чужого кода, грузящегося на Вашем сайте; избавлены от лишних тормозов (а они сейчас есть, уверяю); оптимизируете выдачу контента (добавить alt и title любой ссылке полезно, вас и люди полюбят, и поисковики плюсик поставят и в выдаче поднимут при определенном раскладе); и т.д. и т.п.
Да и css к друпалу тоже не относится!
Теорию относительности Эйнштейна в школе учат.
Простите, истерика ^-^
Походу топикстартер решил попробовать использовать другой сервис закладок odnaknopka... И кажется, что пока эксперимент идет удачно
Только кажется мне, что эта одна_кнопка с плюсиком слева не особо вяжется с дизайном.
И в случае с экраном малого размера будет дико мешать просматривать сайт (см. вложение)
А еще есть такое понятие, как адаптивный дизайн. И об этом топикстартеру следовало бы почитать. Хотя нет, это будет вынос мозга.
Эксперимент действительно удался.
В ответ на скрин - проверка в трех браузерах (Опера, Гугл Хром, Мозилла файрофокс) не показала ужас, который на скрине. Однако Мозилла лишь отображает прозрачное меню и увеличенный третий блок из трех на главной.
Не надо заблуждаться. В случае с определенной заранее (фиксированной) высотой контейнера margin:auto; постарается отцентрировать содержимое по высоте. Но не во всех браузерах (в т.ч. современных) этот процесс произойдет одинаково безболезненно. Особый случай - ресайз окна, когда содержимое изменяет высоту элемента - результат не предсказуем. По горизонтали - да, все будет одинаково во всех браузерах. Почитайте тему про вертикальное центрирование - нет однозначного решения.
Так что укорачивание записи на 2 байта до "margin:auto;" скорее станет проблемой, нежели...
Конечно, в частном случае, когда заведомо известно поведение элементов и вероятность их "проскальзывания" равна нулю - тогда можно и сэкономить 2 байта css файла и получить профит
При грамотной верстке крайне редко приходится задавать фиксированную высоту, особенно когда речь идет о контейнере для содержимого страницы.
Вот что тут можно сказать? Только одно: Кроссбраузерность страдает. Прозрачность только в одном их трех браузеров. Увеличенный блок. Это косяки. Этого не должно быть. Что касаемо ужаса на скрине - уменьшите размеры окна браузера вчетверо, в восемь раз, в шестнадцать - посмотрите поведение Вашего сайта. Увидите что да как. А теперь представьте, что я смотрю Ваш сайт с мобилки-смартфона. Китайского такого... На котором Опера-мини не установлена. Посмотрите скрин - так нагляднее. Сколько раз я должен буду прошоркать пальцем экран, пока найду нужную информацию? А закладки?
Юзабельность - супер!
За подобные консультации и указания слабых мест на своих сайтах люди обычно деньги не малые платят.
Считаю, что дизайн Ваш требует переработки на 98%. Два процента отдам менюхе, которая в адаптивке меня порадовала - преобразовалась в выпадающий список. Хотя это не Ваша заслуга, полагаю, а кого-то, чье решение применено на Вашем сайте в режиме "бездумный копи-паст". И этот кто-то написал тему ZEN, базовую для Вас.
Вы даете действительно ценную информацию и с учетом того, что вам за это не заплачено, это никак не принижает ваши достоинства.
98% требует переработки - иными словами, сверстать по новой?
Именно поэтому возникает такое поведение, как изменяемая в произвольном порядке высота элементов при ресайзе окна. Это сложное поведение присуще сайтам с резиновой и/или адаптивной версткой, особо тяжелый случай - когда подопытный элемент до кучи завязан горизонтальным отношением с другими элементами. Контроль за вертикальным положением не удается адекватно отследить. Именно поэтому приходится делать дизайн с вертикальными отступами в 0, а не auto. И довольствоваться положением элемента "приклеенного" максимально вверх, нежели находящегося псевдо-посередине.
Я Ваше мнение на счет margin:auto; ни в коем случае не хочу искоренить. Имеет право на существование. Оговорки я внес.
Вот никогда не знаешь где найдешь, где потеряешь
В свое время чистая вода из Европы не пошла продаваться у нас, поскольку название было весьма созвучно шокирующему слову: BlueWater... А всего-то желали сказать "лазурная вода".
блювота
Ну если хотите - то можно и такими словами это сказать.
Тема ZEN сама по себе тяжеловата, поскольку предусматривает ответ на каждую хотелку. Считаю, что это излишне. Вы не все хотелки захотите, и функционал темы не сможете реализовать на 100%, потому что не знаете возможности темы. Говорю так - потому что уверен в своих словах, потому что вижу, что возможности темы к адаптивке Вы реализовали на 2%. Глубина познания - залог успеха.
Не знаю как Вы делаете темы к сайтам, а я для себя выработал следующий алгоритм:
1. Отрисовка в GIMP (подойдет любой графический редактор) дизайна 2-5 страниц будущего сайта с утверждением у заказчика, если требуется.
2. Создание шаблона страницы на голом html и css. Требуется для рихтовки положения элементов, поведения при разном содержимом, в разных браузерах.
3. Включение медиа-запросов css -> рисую адаптивный дизайн.
4. Отдельная процедура по альфа-тестированию в разных браузерах и устройствах. Устранение недочетов.
5. Натягивание на движок, подгонка css тегов под стандартные друпаловские, если возможно.
6. Отдельная процедура по бета-тестированию в разных браузерах и устройствах. Устранение недочетов.
7. Вывод на продакшн сайт, получение замечаний от пользователей и заказчика.
Что касаемо этого модного слова - адаптивный дизайн... Почитайте обзорную литературу. Неплохо изложено не Хабре. Если заинтересует - углубляйтесь в тему. Это перспективно с любой точки зрения. И затроньте смежные темы юзабельности, цветового решения, информативности первого экрана и прочее...
Более консультировать не буду. Итак сказал слишком много. Удачи.