Абсолютное позиционирование изображения рядом с заголовком страницы в MediaWiki

Как установить абсолютное положение (т.е. относительно окна браузера) элемента в статье MediaWiki с помощью wikicode и css?

Что мне нужно сделать, так это поместить несколько значков в пустое место в области заголовка. Например, в моей киновики, в статьях «Звездный путь», я хочу разместить логотип «Звездного пути», который будет действовать как второй логотип рядом с логотипом вики, создавая впечатление, что мы находимся на подсайте внутри wiki со ссылкой на домашнюю страницу этого дочернего сайта, портала Star Trek. И так далее; для каждой группы фильмов будет свой логотип (X-Files, Star Wars и т.д.). Так что это нужно сделать с помощью простого шаблона, не касаясь кожи (кстати, это Вектор).

я пробовал

<div style="
position: absolute;
top: 0px;
left: 0px;
z-index: 100;>{{logo}}</div>

но это абсолютное размещение логотипа в верхнем левом углу области содержимого, а не в окне браузера!

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

Итак, обходной путь, который я нашел, - это изменить top на -150px;, чтобы логотип попал в нужное место. Но поскольку на самом деле это относительно области содержимого, если заголовок статьи слишком большой и разбивается на две строки, то логотип появляется в более низком месте после области содержимого, которая также была перемещена.

Я предполагаю, что MediaWiki использует какой-то код, который заставляет область содержимого действовать как окно браузера или что-то в этом роде. Если это так, есть ли способ переопределить это? Возможно, с помощью переключателя LocalSettings.php?


person Protonotarios    schedule 26.01.2015    source источник
comment
Вы можете отредактировать разметку или что-то в этом роде, чтобы избежать абсолютного позиционирования элементов. Ваше решение не работает, потому что position: absolute будет абсолютным по отношению к следующему родителю с относительной позицией.   -  person    schedule 26.01.2015
comment
Спасибо за быстрый ответ! Это указывает мне правильное направление! Я понял, что должен искать цепочку родителей, чтобы найти относительное положение. Я нашел класс .mw-body-content, который затем установил на position: static; в MediaWiki:Common.css, и теперь абсолютное позиционирование логотипа работает как надо! Я надеюсь, что это изменение не нарушит целостность кожи. До сих пор я не заметил проблем со «статикой». Может быть, кто-то с опытом работы с Vector может сказать нам, все ли в порядке.   -  person Protonotarios    schedule 26.01.2015
comment
Попробуйте изменить размер окна, чтобы убедиться, что оно выглядит хорошо :) Я собираюсь превратить свой комментарий в ответ, чтобы вы могли пометить его как правильный.   -  person    schedule 26.01.2015
comment
Кажется, нет проблем с изменением размера (учитывая, конечно, что сам скин Vector не оптимизирован для мобильных устройств, поэтому вкладки заголовка все равно ломаются при ширине 800-900 пикселей ‹- что в зависимости от локали, например, Edit на греческом языке Επεξεργασία, почти в 3 раза шире , поэтому в греческом языке табы ломаются быстрее). Еще раз спасибо за помощь!   -  person Protonotarios    schedule 26.01.2015
comment
Ха-ха, это заставило меня смеяться. Я работаю в компании с локализованным веб-сайтом, и вещи на немецком ломаются очень быстро, может быть, даже быстрее, чем на греческом ;)   -  person    schedule 27.01.2015


Ответы (2)


В общем, старайтесь избегать position: absolute. In имеет тенденцию ломаться при изменении размера окна.

Ваши попытки, вероятно, не работают, потому что position: absolute будет абсолютным по отношению к следующему родителю с относительной позицией. Поднимитесь по дереву DOM для этого конкретного элемента, чтобы найти родителя, расположенного relative.

person Community    schedule 26.01.2015

В MediaWiki 1.25 и более поздних версиях следует использовать индикаторы страниц.

Викитекст, который вам нужен, это просто <indicator name="logo">{{logo}}</indicator> при условии, что {{logo}} содержит рассматриваемое изображение.

person Nemo    schedule 17.10.2015
comment
Спасибо @Немо! У меня все еще ниже 1.25, но я думаю, что индикаторы страниц — отличное дополнение к функциям, облегчающее жизнь тем, кто хочет добавить дополнительный логотип/изображение на свои сайты. И если вы хотите поместить его где-нибудь еще в заголовке, я думаю, что от позиции индикатора было бы намного проще позиционировать его абсолютно, потому что индикатор имеет фиксированное расстояние от вершины, независимо от того, будет ли заголовок страницы длиной в одну строку или в несколько. - person Protonotarios; 17.10.2015