>
Категории вопросов
Задать вопрос +

Основное

Контент-модули

Продвижение сайта

Управление сайтом

Доп. модули

Вебмастеру

Похожие вопросы



Почему стиль выполняется на одной странице и не выполняется на другой?

голоса: 0
Решил перенести новости с главной страницы на другую ("Наша жизнь"). Но почему-то стили прописанные в строчках 75 и 84 не работают на этой странице? Например строчка 84 задаёт максимальный размер фото в новостях (так у меня подписано). Но на главной они действительно уменьшены, а на 24-й странице ("Наша жизнь") в натуральную величину..?
Адрес сайта http://kanschool26.ucoz.net/
| Автор: | Категория: Дизайн сайта
Изменение категории | | Автор: Yuri_Geruk

Ответов: 1

голоса: 0
 
Лучший ответ

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

<div class="mess-img">здесь ваши фото</div>

и далее в стилях задавать к этому классу свои стили:

.mess-img img {}

после все будет работать.

| Автор:
Выбор ответа лучшим | | Автор: Yuri_Geruk
Поставил в стилях строкой 98:  .mess-img img {max-width:250px!important;}   А вот куда поставить <div class="mess-img">здесь ваши фото</div> не знаю. Вероятно в "Страницы сайта", но в какое место? И ещё не понял - это теперь каждое фото надо будет здесь прописывать? А ведь это сильно раздует код, с учётом того, что здесь будет много, несколько сотен новостей и почти все с фотографиями?
| Автор:
Владимир Шкода,
Как вариант, завернуть в шаблоне страницы сайта код $CONTENT$ в данный код и далее изображениям задавать размеры с помощью стилей выше.
| Автор:
Yuri_Geruk,
То есть вот так ?:    <td valign="top" style="padding:70px;"><table border="0" cellpadding="5" cellspacing="0" width="100%"><tr><td style=""><!-- <body> --><div class="mess-img">$CONTENT$</div><!-- </body> --></td></tr></table></td>  Это строка 26.
| Автор:
Владимир Шкода,
Да, именно так, стоит попробовать.
| Автор:
Yuri_Geruk,
Сделал. Фотки действительно уменьшились по горизонтали до 250px, как я задал в стилях, но при этом остались прежними по вертикали, т.е. вытянулись вертикально.
| Автор:

туда же в стили добавьте

height: auto !important;

 И вобще, суть проблемы в том, что вы принудительно прописываете размеры фото там, где не нужно (Скорее всего это последствия работы с визуальным редактором). Вот так сейчас выглядит выше фото:

<img alt="" src="/Img/News/konkurs-smotr_stroja_i_pesni-1.jpg" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; margin-left: 3px; margin-right: 3px; margin-top: 5px; margin-bottom: 5px; width: 1024px; height: 577px; ">

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

Чтобы фото коректно отображались, в css достаточно одной строчки

img {max-width: 100%}

при условии, что размеры не перезаписываются в аттрибуте style.

И насчет этого пункта:

А ведь это сильно раздует код

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

.mess-img img {
border: 1px solid #FB3D00;

margin: 5px 3px;
}

И остальной мусор в коде каждого фото будет не нужен.

| Автор:
Guest_143344550441,

Спасибо за подробный совет! Для начала я сделал то, что попроще - добавил в стилях height: auto !important;

Потом в HTML-редакторе убрал два переноса, чтобы фотки выстроились по 2 в ряд.

Дальше вопросы... Вы пишите:  

Чтобы фото коректно отображались, в css достаточно одной строчки  img {max-width: 100%}, но в том то и дело, что задача состоит в следующем. Человек не очень разбирающийся в HTML коде будет выкладывать сюда (страница "Наша жизнь") новости. И надо, чтобы фотки автоматически уменьшались до 250-300 px по горизонтали, а при клике по фотке они должны увеличиваться до реальных размеров, как я сделал сейчас. В визуальном редакторе я действительно каждый раз выставляю окантовку и отступы фоток. Но если окантовку можно прописать, как вы пишите, в стилях, то отступы, я полагаю, делаются каждый раз индивидуально, потому что пропорции фоток разные. Я пока поставил .mess-img img {border: 1px solid #FB3D00; margin: 0px 0px;}

Кстати, для проверки убрал у первой фотки окантовку и она исчезла, несмотря на условие в стилях!

Вы пишите:  вы сначала принудительно указываете не правильные размеры фото, а потом в таблицу стилей добавляете код, который их перезапишет.  Тут я не понял, где я указываю размеры? Когда вставляю фотку, её реальный размер показывается сам и я оставляю, как есть, а в стилях прописал  .mess-img img {max-width:250px!important;height: auto !important;}

Растолкуйте, где я не правильно понимаю..!

| Автор:
Редактирование | | Автор: Владимир Шкода
...