• »

Часть 7. Борьба с приподнимающимся подвалом в DLE. И красивое оформление надписей в окне ввода текста.

При просмотре статических страниц поднимается подвал сайта в DLE

 

Всем привет! Недавно столкнулся с несколькими проблемами при доработке шаблонов под DLE:

 

Первая проблема: Требовалось вставить текст в окно для ввода текста. К примеру текст в окошке поиска "Найти" при нажатии на него текст должен был пропадать. 

Вторая проблема: Заключалась в приподымании подвал сайта при просмотре статических страниц.

 

При чем, замечено это всё было только при просмотре статических страниц. При просмотре обычных страниц с контентом этого не наблюдалось.

А вся задумка была в том, что бы главной страницей была статическая страница. И вот такой вот баг дискредитировал бы сайт сразу.

Проблемы разрешал следующим образом:

1. Надписи в окне для ввода текста. 

Нашел тег который вообще отвечает за эти надписи, им оказался тег "placeholder" - он отвечает за вывод текста в поля формы, который при фокусировке или грубо говоря активации исчезает.

А вот и пример заполнения: <input type=search placeholder="Введите текст для поиска">.

После оформления такой структуры все начало работать. Так же немного поискав, нашел что можно задавать даже стили. К примеру: placeholder color. И делается это с помощью CSS. Стандартный цвет надписи серый и иногда сливается и получается мрачным, поэтому решил это исправить. Но пока это работает не во всех браузерах: Google Chrome, Safari и Firefox умеют различать стили, а вот в Opera это пока не работает. А задаются стили следующим образом:

	/* стили для webkit */
	 #field1::-webkit-input-placeholder {
	 color:#090;
	 background:lightgreen;
	 text-transform:uppercase;
	 }
	 
	 /* стили для mozilla */
	 #field1:-moz-placeholder {
	 color:#090; background:lightgreen;
	 text-transform:uppercase;
	 }
	
 

И первая проблема была решена.
 
Пошли ко второй проблеме:
Подпрыгивание подвала при просмотре статических страниц в DLE:

 

1. Изначально полез в шаблон main.tpl и нашел там строку которая справлялась с этим багом, но ломала кое что другое.

Вот эта строка: <a id="txtselect_marker" href="#"></a> - она отвечает за вывод маркера при выделении текста статьи, при помощи которого пользователи могли делится текстом в соц сетях и т.д.

В итоге когда удалял эту строку все становилось по местам. Но пропадал маркер. Тот кто не слишком избалован такими фишками от ДЛЕ может смело удалять эту строку и подвал перестанет прыгать но и перестанет работать марке.

2. В чём я разобрался. Это откуда берутся стили для идентификатора "txtselect_marker" - берутся они с engine.css

Нашел код в CSS который отвечал за вывод этого маркера и обратил внимание на несколько строк, в частности

	#txtselect_marker {
	    cursor: pointer;
	    width: 32px;
	    height: 32px;
	    background:url(../dleimages/marker.png) -0px -0px no-repeat;
	}
	

При удалении этих строк  width: 32px; и height: 32px; всё красиво равняется. Но опять пропадает маркер.

Тогда попробовал поставить width: auto; и height: auto; все сравнялось и начало работать красиво. Но я всё равно не приверженец данной фишки, тем более что она иногда просто мешает. Да и не все знают о ней. Поэтому было принято решение просто убрать её.

.Советуем ознакомиться:

Комментарии

.
  • Гости
  • 22 октября 2015 17:08
Дмитрий
Я добавил
#txtselect_marker {
display: none;
cursor: pointer;
width: 32px;
height: 32px;
background:url(../dleimages/marker.png) -0px -0px no-repeat;
}
и футер встал как положенно winked

Добавить комментарий

Полужирный Наклонный текст Подчёркнутый текст Зачёркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера