Фоновая картинка, атрибут alt и валидация

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем chilly_bang, 07.08.2007.

  1. chilly_bang
    Offline

    chilly_bang Недавно здесь => Cпециалист <=

    Регистрация:
    30.04.2006
    Сообщения:
    1 541
    Симпатии:
    38
    Пол:
    Мужской
    приветствую

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

    спасибо
     
  2.  
  3. boston
    Offline

    boston Группа локализации

    Регистрация:
    10.10.2005
    Сообщения:
    524
    Симпатии:
    12
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    chilly_bang, странноватая ситуация, на что назначен клас с прописанной фоновой картинкой? Покажи участок кода и ошику валигатора.
     
  4. chilly_bang
    Offline

    chilly_bang Недавно здесь => Cпециалист <=

    Регистрация:
    30.04.2006
    Сообщения:
    1 541
    Симпатии:
    38
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    например, на строку
    Код (CODE):
    1. <img src="http://web176.srv6.sysproserver.de/templates/egov/images/usertools.gif" />&nbsp;&nbsp;TOOLS :&nbsp;&nbsp;


    валидатор выдаёт:
    Код (CODE):
    1. Line 78, Column 86: required attribute "alt" not specified.


    картинка прописана в css.

    pageurl: _http://web176.srv6.sysproserver.de
     
  5. boston
    Offline

    boston Группа локализации

    Регистрация:
    10.10.2005
    Сообщения:
    524
    Симпатии:
    12
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    Валигатор HTML не провряет css, в показаном примере на самом деле нет alt тега, вот валигатор и ругается. картинка в css - это одно, стиль можно назначить на слой или кнопку, для них alt не нужен. А вот тег img без alt - это уже ошибка. Допиши тег и всё. :)
     
  6. chilly_bang
    Offline

    chilly_bang Недавно здесь => Cпециалист <=

    Регистрация:
    30.04.2006
    Сообщения:
    1 541
    Симпатии:
    38
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    так вот я и парюсь - дописать не найду куда...
    место в индекс.пхп помечено как <div id="blabla"></div>, а в css прописано, что #блабла имеет фоновую картинку с именем таким-то. и места для alt как бы нету. тег img без alt -> img приходит из css, без alt.что-то я туплю...
     
  7. Offline

    sanya Недавно здесь

    Регистрация:
    10.12.2005
    Сообщения:
    9
    Симпатии:
    0
    Ответ: Фоновая картинка, атрибут alt и валидация

    Помойму нереально тупите : )

    Если валидатор "ругается" на эту строку (вы так написали в примере) :
    <img src="http://web176.srv6.sysproserver.de/templates/egov/images/usertools.gif" />

    То вставьте alt :
    <img src="http://web176.srv6.sysproserver.de/templates/egov/images/usertools.gif" alt="" />



    Какая связь с фоновым изображением ? Нету alt-а у background-ов
     
  8. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    629
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    Код (CODE):
    1. <span id="usertools">
    2.             <img src="http://web176.srv6.sysproserver.de/templates/egov/images/usertools.gif" [COLOR="YellowGreen"]alt=""[/COLOR] />&nbsp;&nbsp;TOOLS :&nbsp;&nbsp;
    3.             <a href="javascript:;" onmousedown="slidedown('usertools');"><img src="http://web176.srv6.sysproserver.de/templates/egov/images/icon-show-default.gif" [COLOR="YellowGreen"]alt=""[/COLOR] /></a>&nbsp;&nbsp;
    4.             <a href="javascript:;" onmousedown="slideup('usertools');"><img src="http://web176.srv6.sysproserver.de/templates/egov/images/icon-hide-default.gif" [COLOR="YellowGreen"]alt=""[/COLOR] /></a>
    5.  
    6.         </span>

    Вот так, в соответствии со спецификацией W3C должны выглядеть в коде твои изображения. Т.е. ты можешь оставить пустым значение атрибута 'alt', но вот сам атрибут в теге <img /> присутствовать обязан: <img src="" alt="" />. Атрибут 'alt' - это подпись к картинке, которая хорошо индексируется поисковыми машинами и отображается на странице, когда картинка отсутствует или пользователем была отключена загрузка графики.

    Атрибут 'alt' в CSS не прописывается, как не прописываются непосредственно и сами картинки. Идея CSS заключается в описании свойств, принадлежащих объекту кода страницы, которому для связи в таблицей стилей присваивается селектор 'class' или идентификатор 'id'. В файлах каскадных таблиц стилей картинки используются лишь для заливки контейнеров. Объект <span id="usertools"></span> как раз относится к контейнерному типу, свойства идентификатора 'usertools' в файле .css описывают лишь его отображение и никак не связаны с подписью.
     
  9. Jkr
    Offline

    Jkr Группа поддержки

    Регистрация:
    04.08.2006
    Сообщения:
    464
    Симпатии:
    27
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    Line 78, Column 86: required attribute "alt" not specified. - откройте не ваш index.php, а просмотрите код страницы через браузер и в нем найдите 78 строку и 86 символ в ней. Дело в том, что вместо одной строчки пхп (обозначающей позицию модуля) на реальном сайте туда вставляется n-ное количество строк кода самого модуля => строка на которую ругается валидатор не совпадает со строкой в файле index.php.
    Проще говоря, найдите все теги <img> в вашем index.php и добавте туда alt="".
     
  10. chilly_bang
    Offline

    chilly_bang Недавно здесь => Cпециалист <=

    Регистрация:
    30.04.2006
    Сообщения:
    1 541
    Симпатии:
    38
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    я именно это пытаюсь объяснить всю дорогу: нету в index.php ни одного <img> кроме лого, все остальные приходят, будучи обозначенными в css. куда <alt>-то писать?
     
  11. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    629
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    Соответственно, говорить о том, что что-либо из перечисленного выше ('alt' или <img />) обозначаются в .css абсолютно бессмысленно. Нет в 'index.php', ищи в страницах используемого тобой модуля или компонента. Там и правляй теги <img />.
     
    Последнее редактирование: 10.08.2007
  12. Jkr
    Offline

    Jkr Группа поддержки

    Регистрация:
    04.08.2006
    Сообщения:
    464
    Симпатии:
    27
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    Вот тут у тебя у img нет alt'ов:
    Код (CODE):
    1. <span id="usertools">
    2. <img src="http://web176.srv6.sysproserver.de/templates/egov/images/usertools.gif"/>
    3.   TOOLS :  
    4. <a onmousedown="slidedown('usertools');" href="javascript:;">
    5. <img src="http://web176.srv6.sysproserver.de/templates/egov/images/icon-show-default.gif"/>
    6. </a>
    7. <a onmousedown="slideup('usertools');" href="javascript:;">
    8. </a>
    9. </span>

    Это код маленького модуля, который позволяет менять шрифт на сайте (верхний правый угол) и т.п. Ищи в коде шаблона по комменту <!-- BEGIN: LOGO SEARCH & TOOLS -->. Смотри какая там позиция модуля (как вариант - посмотри позиции модулей в админке j!). Смотри какой модуль у тебя в этой позиции, ищи его в папке ../modules/ и там правь <img>.
    Альтернатива: открой все модули и шаблон в программе типа дрима (dreamweaver) и сделай поиск по всем открытым документам на предмет названия дефектных картинок (тех, которые без альта.... обычно в валидаторе конец src как раз попадает). Заодно поменяй все <br> на <br /> и <hr> на <hr />.
     
    Последнее редактирование: 10.08.2007
  13. chilly_bang
    Offline

    chilly_bang Недавно здесь => Cпециалист <=

    Регистрация:
    30.04.2006
    Сообщения:
    1 541
    Симпатии:
    38
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    я наверно дурака свалял, дав источник сгенерированной страницы. индекс шаблона подвесил к сообщению - клянусь плешью - ни одного <img> там нету. а модули используют для зачитывания картинок те же css-форматы из шаблона - поетому искать там места для alt не поможет.
     
    Последнее редактирование: 10.01.2008
  14. Offline

    Sunder Модератор

    Регистрация:
    23.04.2007
    Сообщения:
    152
    Симпатии:
    16
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    Открываешь файл tool-search.php (находится в папке /templates). На 9 строчке, а именно:
    Код (CODE):
    1. <img src="<?php echo $template_path;?>/images/usertools.gif" />&nbsp;&nbsp;TOOLS :&nbsp;&nbsp;

    И в эту строчку добавляешь тэг alt.
     
  15. chilly_bang
    Offline

    chilly_bang Недавно здесь => Cпециалист <=

    Регистрация:
    30.04.2006
    Сообщения:
    1 541
    Симпатии:
    38
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    это разумно и понятно. исходя из этого, можно побороть валидатор только в тех случаях, когда картинки зачитываются путём img тэга (ушёл бороть валидатор...).

    если картинки из файла стилей: переносить картинки в индекс с alt или мириться с ошибками при валидации?
     
  16. Jkr
    Offline

    Jkr Группа поддержки

    Регистрация:
    04.08.2006
    Сообщения:
    464
    Симпатии:
    27
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    В CSS нельзя написать "картинку"!
    css - cascade STYLE sheet - это документ в котором проводится описание внешнего вида объектов, а сами обьекты могут быть только в страницах типа htm(l), php, asp и т.п. На память мне приходит только 2 способа "вставить картинку" через css: это указать background-image какого-то объекта типа ячейки таблицы (<td>) или слоя (<div>), либо указать list-image для строки списка (<li>). Ни то, ни другое не имеет отношения к тэгу <img> в принципе.

    Они всегда так "зачитываются". Точнее, есть другие способы добавить изображение на страничку (в частности, см. абзацем выше), но в тех случаях не требуется атрибут alt, так как у объектов типа <td>, <div> и <li> он не предусмотрен как обязательный! Из всего вышеописанного, alt нужен только для <img> (по правилам валидатора).
     
  17. chilly_bang
    Offline

    chilly_bang Недавно здесь => Cпециалист <=

    Регистрация:
    30.04.2006
    Сообщения:
    1 541
    Симпатии:
    38
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    может у меня с терминологией и русским языком проблемы, но я пытаюсь узнать, где описывается alt тэг, относительно картинок, которые попадают на страницу, будучи имплементированными через css-файл методом
    Код (html):
    1. body{
    2. background-image: (url: images/image.jpg); repeat-x;
    3. }

    а если нигде, то как избежать соответствующей ошибки валидатора о отсутствующем alt-тэге?
     
  18. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    629
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    Не знаю, куда смотрит администрация форума и модераторы в частности - исписанный вдоль и поперек топик с советами знающих посетителей и пользователей CMS Joomla!, разбирающихся в каких-либо особенностях ее устройства, в одном лице товарищу chilly_bang, "как слону дробина". Ситуация, описанная им в первых двух постах была детально проанализирована, причем не одним человеком, были предложены соответствующие решения возникшей проблемы и дана краткая справка по основным особенностям технологий CSS и HTML (что и где прописывается, откуда в дальнейшем берется для формирования страницы в браузере). Как по-другому объяснить chilly_bang, что в решении возникших проблем нужно внимательнее читать не только свои посты, но и мессаджи "потенциальных помощников", если ему действительно нужна их помощь. Выбирать цитаты из собственных же сообщений у меня желания не возникает, но и смотреть, как человек мучается и мучает других, тоже не могу.
     
  19. Offline

    Sunder Модератор

    Регистрация:
    23.04.2007
    Сообщения:
    152
    Симпатии:
    16
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    chilly_bang, изображениям, заданным через CSS как фон какого-либо элемента, не требуется указывать/задавать параметр "alt". Этот параметр прописывается только у тэга <img> соответственно. Советую тебе изучить HTML & CSS: http:/htmlbook.ru.
    Может у нас, "потенциальных помощников", что-нибудь не так с терминалогией и русским языком? :)
     
  20. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 311
    Симпатии:
    375
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    Забей пока на валидатор и учи CSS и HTML. Не хочется учить - просто забей ;)

    Что предлагаешь сделать? :)
     
  21. Gryphan
    Offline

    Gryphan Недавно здесь

    Регистрация:
    17.08.2007
    Сообщения:
    95
    Симпатии:
    1
    Пол:
    Мужской
    Ответ: Фоновая картинка, атрибут alt и валидация

    у меня та же ситуация валидацию не проходит из за прописанного в css картинки

    это единственное место где есть read.png
    Код (CODE):
    1. a.readon:hover {
    2.     color: #CC0000; text-decoration: underline;
    3.     font-weight: normal;
    4.     font-family:  Tahoma, Verdana, Arial, Helvetica, sans-serif;
    5.     font-size: 11px;
    6.     list-style: inside url(../images/read.png);
    7.     list-style-type: disc;
    8.     display: list-item;
    9.     white-space: normal;
    10.     }


    валидатор выдает :

    Line 40, Column 110: required attribute "alt" not specified.
    …es/read.png" width="14" height="13" />✉

    The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

    Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

    что же делать ?
     

Поделиться этой страницей

Загрузка...