Перейти к содержанию
Windakolit

Помогите с проблемой по верстке на моем сайте

Рекомендуемые сообщения

Помогите с проблемой по верстке на моем сайте

Ситуация следующая - на моем сайте решил создать новую услугу обучение SEO, которая будет отображаться в разделе Услуги здесь http://windakolit.com/uslugy 

Никак не могу понять проблему - иконка услуги частично не отображается, почему то в обычном состоянии улазит наверх, см. http://prntscr.com/je2mgh При наведении курсора мышки отображение нормальное, см. http://prntscr.com/je2moj Сразу говорю такой нюанс - сама картинка иконки выполнена в двух вариантах, которые отображаются друг на другом - без hover и с hover, см. http://prntscr.com/je2nbb

Вопрос - где и что мне надо подправить в верстке, чтобы в обычном состоянии иконка отображалась нормально? В верстке я разбираюсь слабовато:)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
.service-ico {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    height: 62px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

Удалите /* background-position: 50% 50%; */

  • Повысить репутацию 3

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Удалил, сохранил http://prntscr.com/jebvuy

Сбросил кэш в админке несколько раз, несколько раз обновил кэш в 2 браузерах, вроде бы все без изменений

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

Странно...
Давайте разбираться.
Вот посмотрите, удалил правило и иконка развернулась.

%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA.JPG

 

Есть ещё вопросы. Зачем в стилях дублировать правила? Вот что вижу я.
Несколько раз объявлен display: block; width: 100%; margin-bottom: 5px; height: 62px; background-repeat: no-repeat; 

И (  background-position: 50% 50%; ) присутствует. )) Похоже, что это правило объявлено дважды. Ищите.

.service-ico {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    height: 62px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.service-ico7 {
    background-image: url(/themes/seotheme/images/service7.png);
    display: block;
    width: 100%;
    margin-bottom: 5px;
    height: 62px;
    background-position: center top;
    background-repeat: no-repeat;
}
.service-ico {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    height: 62px;
    background-repeat: no-repeat;
}


 

  • Повысить репутацию 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
7 минут назад, submaster сказал:

И (  background-position: 50% 50%; ) присутствует. )) Похоже, что это правило объявлено дважды. Ищите.

Действительно, в файле в 2 местах были продублены правила. Не понял, зачем. Только вчера заинтересовался вопросом и первый раз глянул именно этот кусок CSS, так мне видимо изначально сделал разработчик сайта:)

Убрал вторую директиву и помогло, большое мое благодарю!:)

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А вы не удаляйте, а комментируйте. В CSS комментирование кода делается так:
 

/* код CSS */

:)

  • Спасибо 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@Windakolit сделать свой файл стилей, прописать обращение к нему после всех остальных и в нем переопределять то, что нужно.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@submaster да я боюсь что закомментирую чего нибудь не того, где то что то отвалится, а потом не буду знать, где

@vold57 боюсь я таких файлов наделаю с такими обращениями, что потом без нормально весртальщика в прежний рабочий вид не вернуть:D Пока для меня это все далёко

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Все не так страшно.
Вот допустим в head прописаны файлы стилей (у тебя названия и пути к файлам будут свои):

<head>
...
<link href="/assets/templates/css/bootstrap.min.css" rel="stylesheet" />
<link href="/assets/templates/css/style.css" rel="stylesheet" />
<link href="/assets/templates/css/cackle.css" rel="stylesheet" />
...
</head>

Создаешь файл, например, custom.css заливаешь его на сервер, в head прописываешь к нему путь и эту строчку располагаешь в самом низу. Получится примерно так:

<head>
...
<link href="/assets/templates/css/bootstrap.min.css" rel="stylesheet" />
<link href="/assets/templates/css/style.css" rel="stylesheet" />
<link href="/assets/templates/css/cackle.css" rel="stylesheet" />
...
<link href="/assets/templates/css/custom.css" rel="stylesheet" />
</head>

Допустим, у тебя в стилях прописано:

.service-ico {
     display: block;
     width: 100%;
     margin-bottom: 5px;
     height: 62px;
     background-position: 50% 50%;
     background-repeat: no-repeat;
}


Тогда ты в созданном файле custom.css переопределяешь нужный стиль. Для этого в нем нужно прописать:

.service-ico {
     background-position: X% Y%;
}

Вместо X и Y ставишь нужные значения.
Бояться нечего. В любой момент может подкорректировать свой файл или убить его.

  • Повысить репутацию 3

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@vold57 то есть насколько я понимаю это один из вариантов решения вопросов, чтобы не редактировать исходный CSS файл - создание отдельного своего с переопределениями?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Именно. Так обычно работают с CSS-библиотеками, например, bootstrap. Чтобы не править саму библиотеку переопределяют стили в своём файле стилей, объявленному позже самой библиотеки.

  • Повысить репутацию 3

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Все верно. Не уверен, что он работает всегда на все 100%. Если стиль нужно переопределить, то в своем файле это можешь сделать. Но иногда нужно покапаться, чтобы выяснить какой именно стиль нужно в своем файле прописать. Учитывая, что в стилях есть своя иерархия вложенностей, возможно придется указать цепочку стилей. Например так:
.stil1 .stil2 .stil3 {
...
}
Это нужно уже смотреть в инспекторе объектов. В нем же можно пробовать что-то менять и тут же смотреть результат. Кроме этого, в своем (не только в своем) файле стилей можно создавать новые при необходимости.

К примеру, у тебя есть какой-то текст <div>какой-то текст</div>. Ты хочешь изменить его оформление. Тогда назначаешь этому участку свой стиль, для которого придумываешь название и прописываешь его в файле стилей.
В документе теперь будет так: <div class="stil_name">какой-то текст</div> а в файле стилей: .stil_name { тут прописываешь значения свойств }.

15 минут назад купил шаблон на themeforest.net и там уже был пустой custom.css. :). Соответственно и в head он уже был прописан.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


О проекте

Web@district это проект, который объединил специалистов из разных областей сайтостроения и интернет-маркетинга для того, чтобы пользователи этого ресурса могли удовлетворять свои потребности в знаниях, находить исполнителей, заказчиков или просто приятно пообщаться.

info@webdistrict.pro

Тут может оказаться каждый из вас.:)

логотип в футрере

Copyright © Web@District 2018      При копировании материалов с сайта активная гиперссылка ссылка на источник обязательна
×