|
| |
|
|
| |
для: kanifas
(03.05.2009 в 20:43)
| | | с пнг вам стоит разобраться :) сам посебе пнг работал и работает во всех браузерах без исключения. есть проблема с отображением полупрозрачности для ie>7, но это решается в 3строки в CSS или через фильтр непосредственно у img. на том же cssing есть интересная статья о PNG-8 (http://cssing.org.ua/2008/11/07/png-8-alpha/)
относительно доступности - смею предположить что ваши изыскания про нестандартные способы вывода сайта чисто теоретические. Я текстовых браузеров никогда не видел, как и устройств воспоизведения для слепых, глухих пользователей. но я уверен, что там есть множество других ограничений и проблем помимо показа картинок/текста. Теоретические изыскания вешь очень полезная, поскольку тренерует ум, однако в реальном проекте я не заморачиваюсь на таких моментах. для спец-устройств нужны свои отдельные версии сайтов, одними css и html выполнить универсальный качественный продукт вам не удастся.
насчет отключения css/javascript - поищите в гугле. однако я убежден, что если человек отключает эти настройки, он делает это сознательно и сам ограничевает себя. подстраиваться под таких индивидов не целесообразно. | |
| |
|
|
| |
|
|
| |
для: AlexSol
(02.05.2009 в 12:48)
| | | На сайте бывал.
Сначала, спасибо, что отозвались. Вы третий, кто хоть глазом моргнул за неделю.
________________________________
png IE в любом случае не поддерживает. Либо джиф, либо фикс.(Кстати с фиксом не пробовал. Запросто может не работать)
Вот на сайте cssing.. о методах замены
о первых трёх
"Все три разумеется при отключенных картинках не покажут ничего. Следует это помнить. Доступность страдает, но иногда бывают ситуации в которых эти методы могут сильно выручить."
ещё замечательный метод с наложением, но под картинкой текст. -> полупрозрач быть не может.
и ещё JavaScript вместе с флешь.
У меня при отключ css лишь избыточность. т.е. текст и графика с такм же текстом. В текстовых браузерах работает. Для слепых, глухих пользователей спец. браузеры найдут и прочитают текст.
При отключ. изоб. есть текст. (да, как много подключаются к сети без поддержки CSS? )
Ещё я поэкспериментировал и навинтил меню с такой же заменой. Только это уж слишком. Много суеты вокруг дивана. Для меню так делать не надо. И текст графикой.. | |
| |
|
|
| |
|
|
| |
для: kanifas
(02.05.2009 в 12:23)
| | | 1 - избыточная информация. вы в html прописываете и текст и картинку, уже на этом этапе можно определиться и использовать что-то одно.
Вы ставите в "+" что работает при выключенных изображениях. а при выключенных стилях?
2 - в стилях вы используете фиксированные парамерты для шири и отступов - значит их каждый раз придется подбирать.
кстати полупрозрачность можно использовать абсолютно в любом из методов вывода изображения. задается это через фильтры. В вашем примере полупрозрачность не работает в IEниже7
вот хорошая подборка на эту тему http://cssing.org.ua/2006/02/23/image-replacement/
статье три года, есть вероятность что появились и другие способы :) | |
| |
|
|
| |
|
|
| | Я уже писал об этом здесь и не здесь. И никому не было интересно. Были слова, был код без комментариев не форматированный... И всё. мне посоветовали дать ссылки, привести пример. Значит вот:
Первым делом ссылка, где посмотреть Пример замены текста изображением
Или адрес http://www.kanifas.h18.ru/
Вторым делом плюсы:
— метод не требует JavaScript
— картинка может быть полупрозрачной.
— IE не подводит.
— При отключении изображений есть текст.
— Работает даже с Doctype XHTML 1.1
— Работает в IE, Safari(win), Opera, FF (в остальных не проверял. Должно и в них работать)
Минус — картинка не фоном, а тегом <img>. Очень плохо ли это? Думаю, нет.
Работают HTML и CSS.
! Замечание. В других методах либо картинка не может быть прозрачной, либо текста нет при отключ. графики или ещё чего.
Суть: при включённом режиме отображения графики картинка выталкивает текст, в противном
случае — сворачивается, освобождая место для текста.
Какая структура:
- один внешний DIV
- внутри него картинка, обёрнутая DIV-ом
- следом за этой оберткой с картинкой то, что необходимо заменить, например, заголовок.
HTML:
<div id="out">
<div><img alt="" src="w.gif"></div>
<h1>друг-программист</h1>
</div>
|
CSS:
#out {
overflow: hidden; /*скрываю текст выходящий за границы*/
width: 300px; /*ширина, высота*/
height: 100px;
}
div div {
margin: 0; /*внутренний div плывёт влево*/
float: left; /*и уходит влево на расстояние такое, как его ширина, за счёт отрицат. поля*/
margin-left: -300px;
}
h1 {
margin: 0; /*здесь всё прозрачно*/
float: left;
}
img {
display: block; /*div ушёл вместе с картинкой. Теперь возвращаю картинку на место*/
margin-left: 300px; /*с пом.положит. левого поля. Чтобы она выталкивала текст, её display: block*/
}
|
Да, для Opera и подобных в атрибуте alt - пустая строка! Т.е. alt="".
Смотрите по направлению ссылки. Там можно скачать пример, или посмотреть онлайн.
Либо скопировать этот код(см. выше) и использовать свою картинку 300 на 100.
Важно! Если кто-нибудь уже сталкивался с таким методом, прошу, напишите где. Дайте ссылку.
И если у вас есть замечания, обязательно пишите. Я не профессионал, большая вероят. что что-нибудь упустил.. | |
| |
|
|
|
