Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » CSS и класс img

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2

Открыть новую тему     Написать ответ в эту тему

Andrey574

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Достался мне в наcледство сайт с очень тяжелым кодом, сейчас выношу все повторяющиеся элементы в таблицу CSS. В коде часто встречается маленький рисунок-указатель, весом 50 байт, но в коде, повторяясь по 100 раз со всеми атрибутами он сильно увеличивает размер файла html. Вынес в CSS все атрибуты, такие как width, height и т.д.  
 
Попробовал создать такой класс: .img1 { src: url(/img/pick1.gig); height: 10 px; width: 10px;  ....и т.д.}. Т.е вінестии в стили и путь к имилжу. А коде html писать так: <img class="img1">, у меня рисунок не отображается, пробовал на локальном веб-сервере - то же самое.  
 
Подскажите, что неправильно?

Всего записей: 59 | Зарегистр. 17-11-2003 | Отправлено: 16:10 16-09-2004
c0r0ner



злобный доктор
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
 .img1 { src: url(/img/pick1.gig); height: 10 px; width: 10px;  ....и т.д.}

Естественно в CSS нет такого, можно сделать что-то вроди

Код:
.img1 { background-image:url(/img/pick1.gig);width:10px;height:10px;  ....и т.д.}
<div class="img1" />

 
Добавлено
Да, в стиле добавь,
Код:
background-repeat:no-repeat
на всяк случай

----------
Я - сущий ангел. Только крылья в стирке, а нимб на подзарядке.

Всего записей: 742 | Зарегистр. 09-12-2001 | Отправлено: 16:50 16-09-2004
Andrey574

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
c0r0ner
спасибо, помогло.
 
Вопрос: если в html-странице есть 100-200 тэгов <img class="i_1">, где класс .i_1 заданный во внешней таблице стилей и содержит перечень тэгов для рисунка. Будет ли такая страница грузится медленней у пользователя, чем та, страница, которая была до такого преобразования. Размер страницы сократился на 20% )

Всего записей: 59 | Зарегистр. 17-11-2003 | Отправлено: 15:45 20-09-2004
bredonosec



Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Будет ли такая страница грузится медленней у пользователя, чем та, страница, которая была до такого преобразования.  
- По идее, не должна, бо таблица стилей грузится в UA еще до рендеринга, а далее работа идет как с таблицей по умолчанию.
А если
Цитата:
Размер страницы сократился на 20%  
- то и быстрее ))
 
 У меня вот интересный глюк с отображением картинок после указания свойств через CSS:
При клике на картинку-линк она схлопывается, и не возвращается даже после рефреша, пока не кликнешь на поле - снимешь фокус (active). В чём прикол может быть?  
 
 В принципе, убрать это не есть особая проблема, но интересно, как это вызывается, может, это можно использовать где-нить? Нечто вроде выпадающего-схлопывающегося меню.. Без JS.. Вот только раскрытие чем-то другим придется обеспечивать! ))))))
 
 
 
Добавлено
Забыл указать, пример тут

Всего записей: 16257 | Зарегистр. 13-02-2003 | Отправлено: 00:55 12-10-2004
vladmir

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
bredonosec
Что-то ни фига не схлопывается и прикола не наблюдаю - обидно даже.
Объясни по-подробнее.

Всего записей: 2232 | Зарегистр. 22-01-2003 | Отправлено: 15:39 12-10-2004
TsvIlya



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
bredonosec

Цитата:
Что-то ни фига не схлопывается и прикола не наблюдаю - обидно даже.

У меня анологично. Смотрел в IE 6.0 и NN 7.1. Не понимаю, почему картинки могут "схлопываться"? Что за CSS для IMG писал??? А в чем смотрел? Странно все это...

Всего записей: 175 | Зарегистр. 15-12-2002 | Отправлено: 16:20 12-10-2004
bredonosec



Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
А в чем смотрел?  
IE 5.0
Ща еще раз проверил - схлопываются. Даже если на подпись кликнуть, а не на имг. Причем, переход по ссылке происходит только если курсор кликает на том месте, куда после схлопывания перемещается подпись (чуть ниже центра).  

Цитата:
Не понимаю, почему картинки могут "схлопываться"?  
Дык и я тоже! Потому и написал об этом!    

Цитата:
Что за CSS для IMG писал???
- Да ничего такого, что могло бы..    Посмотри сам:

Код:
A:link IMG { border: #880088 2px solid;    }
A:active IMG { border: red 1px solid;  }
A:hover IMG { border: solid red 1px;   }
A:visited IMG { border: solid purple 1px; }

Просто тренировался группировать по-разному атрибуты..
 
 
 
 
Добавлено
Да, забыл сказать, к visited это не относится. Они также перестают реагировать на наведение курсора, а при клике дают нормальный переход.. Интересно, и вроде hover указал тоже..

Всего записей: 16257 | Зарегистр. 13-02-2003 | Отправлено: 18:14 12-10-2004
vladmir

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
bredonosec
Ура, вот и мне удалось - зашёл на ИЕ 5.01 - схлопываются. На ИЕ 6.0 - нет.
 
В общем, я бы для начала указал все размеры всех превьюшек и таблиц, а потом бы дальше прикидывал.
 
А там твои фотки?

Всего записей: 2232 | Зарегистр. 22-01-2003 | Отправлено: 21:44 12-10-2004
bredonosec



Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Ура, вот и мне удалось - зашёл на ИЕ 5.01 - схлопываются.  
- Теперь бы еще выяснить, почему! ))

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

Цитата:
А там твои фотки?
- старые. )) как материал для тренировки по цсс-ам, оч. удобно в качестве контента испытываемой страницы. ))

Всего записей: 16257 | Зарегистр. 13-02-2003 | Отправлено: 02:16 13-10-2004
vladmir

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
bredonosec

Цитата:
В смысле, чтоб не схлопывались?

Не уверен, но вполне возможно. Ты попробуй, а то мне лень.
 
Размеры картинок и таблиц обязательно нужно указывать, чтобы браузер сразу знал, что выводить на экран.

Цитата:
а понять его причину

Вообще-то интересно, конечно, только ИМХО это глюк, а не трюк. Срабатывает только в старых версиях ИЕ, а в 6.0 и в Мозилле не наблюдается.

Цитата:
генерирующий его код вычленить

Попробуй везде у превьюшек одну толщину рамки выставить
A:link IMG {border:1px
Скорее всего дело в кривом понимании CSS старыми ИЕ.

Цитата:
- старые. ))

Какие старые, 3 года всего.  
А ты летать умеешь ... завидываю.

Всего записей: 2232 | Зарегистр. 22-01-2003 | Отправлено: 13:40 13-10-2004
bredonosec



Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Размеры картинок и таблиц обязательно нужно указывать, чтобы браузер сразу знал, что выводить на экран.  
- Насколько помню спецификацию нтмл, это нужно лишь для того, чтоб броузер при загрузке страницы не ждал загрузки всех картинок, чтоб выяснить их внутренний размер, а сразу рендерил страницу, используя указанные значения, а картинки вставлял по мере загрузки. То есть, или убыстрение загрузки, или неразрушение страницы, если какая-то не слилась.  
(в этом случае обычно показывал стандартный квадратик 32*32 пиксела, но никак не схлопывал)

Всего записей: 16257 | Зарегистр. 13-02-2003 | Отправлено: 20:41 13-10-2004
vladmir

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
bredonosec

Цитата:
при загрузке страницы не ждал загрузки всех картинок

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

Цитата:
но никак не схлопывал

Ну да, я ж и написАл, что не уверен. Просто единственный способ выяснить - исправить, исправишь - будешь знать, где глючит.

Всего записей: 2232 | Зарегистр. 22-01-2003 | Отправлено: 16:04 14-10-2004
bredonosec



Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Просто единственный способ выяснить - исправить, исправишь - будешь знать, где глючит.
- Пересилил, наконец, свою лень, потыкал клаву.
Результат: "глюк" проявляется именно при установленной разной толщине границ псевдоклассов A:link IMG, A:active IMG, A:hover IMG
 Все варианты поведения описал в комментах.
 
 При указании размеров image заранее, действительно, пропадает.  

Всего записей: 16257 | Зарегистр. 13-02-2003 | Отправлено: 02:54 15-10-2004
ShafMAN

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А можно ли сделать что-бы рядом располагашиеся <img> не имели между собой отступа, без включения их в другие теги?

Код:
 
<img src="1.jpg" border="0">
<img src="2.jpg" border="0">
 

 
Добавлено:
Не знаю, может у меня редактор кривой, но поставил картинки один к одной (даже без ввода интера) и все встало как надо...

Код:
 
<img src="1.jpg" border="0"><img src="2.jpg" border="0">
 

Всего записей: 125 | Зарегистр. 09-01-2005 | Отправлено: 09:57 16-10-2006 | Исправлено: ShafMAN, 10:48 16-10-2006
tolyn77



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
подскажите пожалуйста как задать цвет border?
заранее благодарен

Всего записей: 1498 | Зарегистр. 07-09-2004 | Отправлено: 09:58 09-04-2009
Jokerjar79



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
border-color: red;
 
или
 
border: 1px solid red;

Всего записей: 710 | Зарегистр. 08-09-2007 | Отправлено: 11:09 09-04-2009
BVBRusse

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Приветствую экспертов и тех, кто в теме по css, html и так далее. Не могу решить проблему, суть которой в следующем. На своем сайте давно хотел сделать так, чтобы ссылки внутри постов отличились от общего стиля (иными словами, от остальных ссылок в блоге) ссылок, и вчера реализовал этот код. В таком виде.  
 
.post-body a:link{
text-decoration: none !important;
border-bottom: 1px dotted #000 !important;
}
 
.post-body a:hover{
color: #000000 !important;
font-weight: normal !important;
background: #ffe600 !important;
text-decoration: none !important;
border-bottom: none !important;
text-shadow: none !important;
}
 
НО так как картинки, вставляемые в статью, сами являются ссылками (они ведь загружаются через url-путь), то, соответственно, они тоже автоматически наследуют те же вышеуказанные свойства. Вот сам вопрос: как сделать так, чтобы изображения внутри статей не брали свойств ссылок?

Всего записей: 32 | Зарегистр. 17-11-2015 | Отправлено: 13:26 17-11-2015
K S

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
BVBRusse
В идеале, переписать CSS и HTML таким образом, чтобы избавиться от a:
 

Код:
.post-body-a...
.post-body-a:hover

 
А в HTML присваивать класс post-body-a для ссылок, которые не содержат картинки.
 
Но если следовать не очень хорошей практике использования !important, то ниже
Код:
.post-body a:hover{...}
добавить ещё один класс
Код:
.post-body-img, .post-body-img:hover {border:0 !important, backgroiund:none !important}
и присвоить вручную всем ссылкам с картинками, либо через обработку JS на фронтенде.

Всего записей: 236 | Зарегистр. 15-11-2015 | Отправлено: 13:39 17-11-2015 | Исправлено: K S, 13:40 17-11-2015
BVBRusse

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
K S, вы знаете, я хотя не умею этого делать, но чисто по своим базовым представлениям в css подумывал сделать отдельный class img, но в таком случае все картинки, вставляемые в статьи, пришлось бы всякий раз в режиме html подписывать, чтобы они обрели свойства этого класса, а это нудно делать всякий раз. Вот и хочется найти вариант, чтобы, как и при обычной вставке изображение в режиме "как есть", они автоматически имели вариант свойств, отличный от свойств для ссылок в тексте.
 

Всего записей: 32 | Зарегистр. 17-11-2015 | Отправлено: 13:46 17-11-2015
K S

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
BVBRusse
По стандарту CSS не может обращаться к родительскому элементу.
 
Поэтому применяйте второй вариант с отдельным классом. И присваивайте его автоматически через серверный язык в системе управления, либо через JS при выдачи страницы в браузер.
 
Пример на Jquery:
Код:
jQuery('.post-body img').parent('a').addClass('post-body-img');

Всего записей: 236 | Зарегистр. 15-11-2015 | Отправлено: 14:02 17-11-2015
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2

Компьютерный форум Ru.Board » Интернет » Web-программирование » CSS и класс img


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru