Выравнивание "left-center" боковых кнопок.

Главные вкладки

Комментарии

Аватар пользователя AI AI 26 октября 2013 в 20:20

Кнопки фейсбука и прочих???
.pluso-001010100101-08 {
maging: 0 auto;
width: 200px;
}
.pluso {
width: 100%;
}
Добавить в любой css файл, подгружать этот css файл яваскриптом после полной прогрузкии страницы, ибо эти стили на Вашем сайте генерятся яваскриптом. Изменить эти стили надо после того, как скрипт определит их на странице.

Аватар пользователя AI AI 26 октября 2013 в 21:16

Судя по продолжительности Вашего присутствия в качестве зарегистрированного пользователя на этом сайте (6 недель на текущий момент), могу предположить, что Вы еще только в начале пути познания сайтостроения... Заданный Вами последний вопрос заставил усомниться в степени увлеченности. К изучению Друпала люди приходят (как правило) с багажом знаний по html, css, javascript и хотя бы поверхностным пониманием что такое php и mysql. Похоже, Вам удалось пропустить начальную школу подготовки по сайтостроению и приступить сразу к курсу лекций Высшего образования. Сочувствую, будет трудно.

Аватар пользователя wow0800 wow0800 10 ноября 2015 в 11:49

В файл pages.css добавил

".pluso-001010100101-08 {
maging: 0 auto;
width: 200px;
}
.pluso {
width: 100%;
}"

Изменений не произошло (прикрепил скрин)

Аватар пользователя AI AI 26 октября 2013 в 21:24

Если Вас смутила моя опечатка, поправлюсь:
margin: 0 auto;
(-: люблю оригинальность, понимаете ли...

Аватар пользователя AI AI 26 октября 2013 в 21:35

И потом, если все же Вам необходимо это втиснуть в 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 не всегда работает (вернее, работает, но иногда так, как не ожидаешь). Причиной тому может быть неадекватная верстка и/или работа яваскриптов, которые "на лету" модифицируют код страницы.

Аватар пользователя wow0800 wow0800 26 октября 2013 в 21:34

И правильное написание MARGIN не привело к изменениям.
Добавление text-align: left-center лишь выводит в центру под низом сайта кнопки.

Аватар пользователя AI AI 26 октября 2013 в 21:43

Учите матчасть....
htmlbook.ru Вам в помощь.
Простите за то, что не сообщаю Вам всех подробностей Вашей проблемы и методов ее лечения... Ибо это будет большое оскорбление в Ваш адрес.
В официальном css отсутствует значение text-align: left-center. Ознакомьтесь со спецификацией поподробнее здесь http://www.w3.org/TR/CSS21/text.html#propdef-text-align . Ваше значение есть отступление от правил, частный случай реализованный Вашим конкретным браузером. И я не удивлен, что это коряво работает. Тем более коряво, что много параметром надо учесть и в окружении исследуемого элемента (центрируемого Вами).

Аватар пользователя AI AI 26 октября 2013 в 21:49

Давайте так:
1. Поднимаете исходный код кнопок, который прикручен к сайту.
2. Делаете бэкап этого кода, чтобы при неудачной попытке можно было безболезненно откатиться.
3. Полностью изучаете те строчки, которые генерируют css для !всех! элементов (.pluso и .pluso-001010100101-08 в том числе). Удаляете из них места формирования css правил.
4. Пишите новый css для этих элементов в любом файле стилей Вашей темы.
Профит.

Аватар пользователя wow0800 wow0800 26 октября 2013 в 22:08

Внимательно проследовал вашей инструкции (за что благодарен вам, очень очень).
Вот исходный код:
(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,т.д.)
- результата нет.

Аватар пользователя AI AI 26 октября 2013 в 22:26

Читаем чуть подробнее в 6 строке кода: "share.pluso. ru/pluso-like.j s" (пробелы вставлены спецом, нафиг не нужен линк туда в моем комменте)
Можете эти букавы вставить в адресную строку браузера и открыть содержимое pluso-like.js - вот там будет тьма кода, рассчитываеющего координаты, длины, ширину, прочую ересь. Хватит знаний перековырять этот файл? Достаточно будет его сохранить себе на хостинг, изменить под себя, и в шестой строке кода выше сослаться именно на свой js.

Smile Что по мне - эти кнопки рисуются на раз. Создали регион в теме (если подходящего нет). Засунули туда блок, в котором текстом или с применением пхп все выводится...
Из плюсов: Вы отвязаны от чужого кода, грузящегося на Вашем сайте; избавлены от лишних тормозов (а они сейчас есть, уверяю); оптимизируете выдачу контента (добавить alt и title любой ссылке полезно, вас и люди полюбят, и поисковики плюсик поставят и в выдаче поднимут при определенном раскладе); и т.д. и т.п.

Аватар пользователя AI AI 26 октября 2013 в 22:47

"grob.82" wrote:
Да и css к друпалу тоже не относится!

Теорию относительности Эйнштейна в школе учат. Smile css к друпалу тоже относится, смотря как систему координат построить. Так что тут случай серьезный: Элемент грузится с внешнего стороннего сервиса социальных кнопок, позиционирование этого элемента за уши к движку друпала притянуто, все коряво и косо. Не удается внутренними отступами текст отцентрировать. Кто виноват? Dries Buytaert. Его детище неправильно интегрируется в сингулярное пространство реальности.
Простите, истерика ^-^

Аватар пользователя AI AI 10 ноября 2015 в 11:49

Походу топикстартер решил попробовать использовать другой сервис закладок odnaknopka... И кажется, что пока эксперимент идет удачно Smile
Только кажется мне, что эта одна_кнопка с плюсиком слева не особо вяжется с дизайном.
И в случае с экраном малого размера будет дико мешать просматривать сайт (см. вложение)
А еще есть такое понятие, как адаптивный дизайн. И об этом топикстартеру следовало бы почитать. Хотя нет, это будет вынос мозга.

Аватар пользователя wow0800 wow0800 26 октября 2013 в 23:29

Эксперимент действительно удался.
В ответ на скрин - проверка в трех браузерах (Опера, Гугл Хром, Мозилла файрофокс) не показала ужас, который на скрине. Однако Мозилла лишь отображает прозрачное меню и увеличенный третий блок из трех на главной.

Аватар пользователя AI AI 26 октября 2013 в 23:46

"sergeybelya" wrote:
margin:auto; - покороче будет:)

Не надо заблуждаться. В случае с определенной заранее (фиксированной) высотой контейнера margin:auto; постарается отцентрировать содержимое по высоте. Но не во всех браузерах (в т.ч. современных) этот процесс произойдет одинаково безболезненно. Особый случай - ресайз окна, когда содержимое изменяет высоту элемента - результат не предсказуем. По горизонтали - да, все будет одинаково во всех браузерах. Почитайте тему про вертикальное центрирование - нет однозначного решения.
Так что укорачивание записи на 2 байта до "margin:auto;" скорее станет проблемой, нежели... Smile Ну Вы поняли.
Конечно, в частном случае, когда заведомо известно поведение элементов и вероятность их "проскальзывания" равна нулю - тогда можно и сэкономить 2 байта css файла и получить профит Smile

Аватар пользователя sergeybelya sergeybelya 27 октября 2013 в 0:02

AI wrote:
"sergeybelya" wrote:
margin:auto; - покороче будет:)

Не надо заблуждаться. В случае с определенной заранее (фиксированной) высотой контейнера margin:auto; постарается отцентрировать содержимое по высоте. Но не во всех браузерах (в т.ч. современных) этот процесс произойдет одинаково безболезненно. Особый случай - ресайз окна, когда содержимое изменяет высоту элемента - результат не предсказуем. По горизонтали - да, все будет одинаково во всех браузерах. Почитайте тему про вертикальное центрирование - нет однозначного решения.
Так что укорачивание записи на 2 байта до "margin:auto;" скорее станет проблемой, нежели... Smile Ну Вы поняли.
Конечно, в частном случае, когда заведомо известно поведение элементов и вероятность их "проскальзывания" равна нулю - тогда можно и сэкономить 2 байта css файла и получить профит :-)

При грамотной верстке крайне редко приходится задавать фиксированную высоту, особенно когда речь идет о контейнере для содержимого страницы.

Аватар пользователя AI AI 10 ноября 2015 в 11:49

"wow0800" wrote:
В ответ на скрин - проверка в трех браузерах (Опера, Гугл Хром, Мозилла файрофокс) не показала ужас, который на скрине. Однако Мозилла лишь отображает прозрачное меню и увеличенный третий блок из трех на главной.

Вот что тут можно сказать? Только одно: Кроссбраузерность страдает. Прозрачность только в одном их трех браузеров. Увеличенный блок. Это косяки. Этого не должно быть. Что касаемо ужаса на скрине - уменьшите размеры окна браузера вчетверо, в восемь раз, в шестнадцать - посмотрите поведение Вашего сайта. Увидите что да как. А теперь представьте, что я смотрю Ваш сайт с мобилки-смартфона. Китайского такого... На котором Опера-мини не установлена. Посмотрите скрин - так нагляднее. Сколько раз я должен буду прошоркать пальцем экран, пока найду нужную информацию? А закладки?
Юзабельность - супер!

За подобные консультации и указания слабых мест на своих сайтах люди обычно деньги не малые платят.
Считаю, что дизайн Ваш требует переработки на 98%. Два процента отдам менюхе, которая в адаптивке меня порадовала - преобразовалась в выпадающий список. Хотя это не Ваша заслуга, полагаю, а кого-то, чье решение применено на Вашем сайте в режиме "бездумный копи-паст". И этот кто-то написал тему ZEN, базовую для Вас.

Аватар пользователя wow0800 wow0800 27 октября 2013 в 0:42

AI wrote:
"wow0800" wrote:
В ответ на скрин - проверка в трех браузерах (Опера, Гугл Хром, Мозилла файрофокс) не показала ужас, который на скрине. Однако Мозилла лишь отображает прозрачное меню и увеличенный третий блок из трех на главной.

Вот что тут можно сказать? Только одно: Кроссбраузерность страдает. Прозрачность только в одном их трех браузеров. Увеличенный блок. Это косяки. Этого не должно быть. Что касаемо ужаса на скрине - уменьшите размеры окна браузера вчетверо, в восемь раз, в шестнадцать - посмотрите поведение Вашего сайта. Увидите что да как. А теперь представьте, что я смотрю Ваш сайт с мобилки-смартфона. Китайского такого... На котором Опера-мини не установлена. Посмотрите скрин - так нагляднее. Сколько раз я должен буду прошоркать пальцем экран, пока найду нужную информацию? А закладки?
Юзабельность - супер!

За подобные консультации и указания слабых мест на своих сайтах люди обычно деньги не малые платят.
Считаю, что дизайн Ваш требует переработки на 98%. Два процента отдам менюхе, которая в адаптивке меня порадовала - преобразовалась в выпадающий список. Хотя это не Ваша заслуга, полагаю, а кого-то, чье решение применено на Вашем сайте в режиме "бездумный копи-паст". И этот кто-то написал тему ZEN, базовую для Вас.

Вы даете действительно ценную информацию и с учетом того, что вам за это не заплачено, это никак не принижает ваши достоинства.

98% требует переработки - иными словами, сверстать по новой?

Аватар пользователя AI AI 27 октября 2013 в 0:32

"sergeybelya" wrote:
При грамотной верстке крайне редко приходится задавать фиксированную высоту, особенно когда речь идет о контейнере для содержимого страницы.

Именно поэтому возникает такое поведение, как изменяемая в произвольном порядке высота элементов при ресайзе окна. Это сложное поведение присуще сайтам с резиновой и/или адаптивной версткой, особо тяжелый случай - когда подопытный элемент до кучи завязан горизонтальным отношением с другими элементами. Контроль за вертикальным положением не удается адекватно отследить. Именно поэтому приходится делать дизайн с вертикальными отступами в 0, а не auto. И довольствоваться положением элемента "приклеенного" максимально вверх, нежели находящегося псевдо-посередине.

Я Ваше мнение на счет margin:auto; ни в коем случае не хочу искоренить. Имеет право на существование. Оговорки я внес.

Аватар пользователя AI AI 27 октября 2013 в 0:34

"kosHta" wrote:
имени Дадо

Вот никогда не знаешь где найдешь, где потеряешь Smile
В свое время чистая вода из Европы не пошла продаваться у нас, поскольку название было весьма созвучно шокирующему слову: BlueWater... А всего-то желали сказать "лазурная вода".

Аватар пользователя AI AI 27 октября 2013 в 9:45

"wow0800" wrote:
98% требует переработки - иными словами, сверстать по новой?

Ну если хотите - то можно и такими словами это сказать.
Тема ZEN сама по себе тяжеловата, поскольку предусматривает ответ на каждую хотелку. Считаю, что это излишне. Вы не все хотелки захотите, и функционал темы не сможете реализовать на 100%, потому что не знаете возможности темы. Говорю так - потому что уверен в своих словах, потому что вижу, что возможности темы к адаптивке Вы реализовали на 2%. Глубина познания - залог успеха.

Не знаю как Вы делаете темы к сайтам, а я для себя выработал следующий алгоритм:
1. Отрисовка в GIMP (подойдет любой графический редактор) дизайна 2-5 страниц будущего сайта с утверждением у заказчика, если требуется.
2. Создание шаблона страницы на голом html и css. Требуется для рихтовки положения элементов, поведения при разном содержимом, в разных браузерах.
3. Включение медиа-запросов css -> рисую адаптивный дизайн.
4. Отдельная процедура по альфа-тестированию в разных браузерах и устройствах. Устранение недочетов.
5. Натягивание на движок, подгонка css тегов под стандартные друпаловские, если возможно.
6. Отдельная процедура по бета-тестированию в разных браузерах и устройствах. Устранение недочетов.
7. Вывод на продакшн сайт, получение замечаний от пользователей и заказчика.

Что касаемо этого модного слова - адаптивный дизайн... Почитайте обзорную литературу. Неплохо изложено не Хабре. Если заинтересует - углубляйтесь в тему. Это перспективно с любой точки зрения. И затроньте смежные темы юзабельности, цветового решения, информативности первого экрана и прочее...

Более консультировать не буду. Итак сказал слишком много. Удачи.