Вопрос про img

[Анна]

А можно ли в img отобразить часть изображения? Или он всегда старается впихнуть в доступное пространство весь файл(в соответствии с указанными высотой и шириной)?

А еще конкретнее, можно ли использовать спрайты в таблице?

[SelenIT]

Можно, с помощью clip. Но неудобно, имхо...

[psywalker]

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

[sigma77]

AnnaP,

А можешь показать картинку того, что тебе нужно?

Смотря что за изображения и для чего спрайты, задачу можно решать по-разному.

[Анна]

AnnaP,

А можешь показать картинку того, что тебе нужно?

Смотря что за изображения и для чего спрайты, задачу можно решать по-разному.

Да нет, ничего особенного, хотела разместить флажки(переход по языкам) в таблице, но с помощью одного спрайта.

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

Вариант запомню, но для моих флажков это вроде слишком громоздко.

Сделаю, видимо, через ul, просто уже на сайте применила два списка, не хотелось опять повторяться.

Edited August 18, 2011 by AnnaP

[Nekromancer]

<style>
div {overflow: hidden;}
#langs span {float: left; width: 20px; height: 20px; margin: 5px;}
.ru {background: url('flags_sprite.png') 0 0 no-repeat;}
.en {background: url('flags_sprite.png') 20px 0 no-repeat;}
.fr {background: url('flags_sprite.png') 40px 0 no-repeat;}
</style>
<div id="langs">
<span class="ru"></span>
<span class="en"></span>
<span class="fr"></span>
</div>

Приблизительно так. Спрайт есть спрайт, фоном и делать

[sigma77]

Если есть рядом с иконкой поясняющий текст, то можно сделать и спрайтом, даже нужно.

Если такого текста нет, то делать отдельными картинками либо как предложил psywalker и в alt писать соответствующий язык. Иначе при отключенных картинок пользователь мало того что не увидит куда ведет эта картинка, так и вообще, что там она есть и кликнув по ней можно куда-то перейти.

Edited August 18, 2011 by sigma77

[Анна]

Если есть рядом с иконкой поясняющий текст, то можно сделать и спрайтом, даже нужно.

Если такого текста нет, то делать отдельными картинками либо как предложил psywalker и в alt писать соответствующий язык. Иначе при отключенных картинок пользователь мало того что не увидит куда ведет эта картинка, так и вообще, что там она есть и кликнув по ней можно куда-то перейти.

Да, вы правы, сделаю поясняющий текст и, наверное, применю вариант от Nekromancer.

Вопрос вдогонку где-то на сайтах встретила такое:

ul#menu{margin:0; padding:0; list-style:none; clear:both;}
#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; 
margin-right:10px;}
#menu li a{background:url('images/menu-sprite.jpg') no-repeat; width:100%; 
height:100%; display:block;}

Семантически неправильно вставлять в строчные элементы блочные, а так правильно?

[Nekromancer]

Ну вот тут получается блочные в блочных ибо стиль

display:inline;

перекрывается через

float:left;

который в свою очередь так же делает элемент блочным.

[SelenIT]

Семантика тут ни при чем — смена display через CSS на модель содержимого не влияет, логически li остается блочным даже при фактическом display:inline. Другое дело, что при отрисовке, когда браузер заставляют рисовать блочные боксы внутри строчных (опять же — независимо от участвующих в этом безобразии элементов), ему приходится выкручиваться через неуправляемые анонимные боксы-обертки, поэтому возможны сюрпризы. Общее правило "в строках — только инлайны, в блоках — либо инлайны, либо блоки" в идеале должно соблюдаться и в разметке, и в стилях, но причины чуть разные (в первом случае — семантика, во втором — логика отображения).

А display:inline в сочетании с float — скорее всего, лекарство для IE6 (от его давнего бага — удвоения маргинов), больше оно ни на что не влияет.

[Nekromancer]

А display:inline в сочетании с float — скорее всего, лекарство для IE6 (от его давнего бага — удвоения маргинов), больше оно ни на что не влияет.

Наверно, не помню уже к сожалению.

[Анна]

SelenIT, спасибо понятно объяснили.