css breadcrumbs, используя изображение спрайт

У меня есть изображение, и мне нужно использовать это как фоновое изображение на палитре. Я пробовал, но, похоже, не идет правильно. Я создал для этого скрипку. Может кто-нибудь, пожалуйста, помогите мне, что я делаю неправильно. Я не должен менять html, так как тот же файл используется и в других приложениях. Только css, я могу изменить.css breadcrumbs, используя изображение спрайт

HTML

<div id="itemDisplay"> 
    <a href="www.abc.com" class="step1only"><span id="step1" class="step_on" title="Home">Home</span></a> 
    <span id="step2" class="step_off" title="Vehicle">Vehicle</span> 
    <span id="step3" class="step_off" title="Vans &amp; Trucks">Vans &amp; Trucks</span> 
    <span id="step4" class="step_off" title="Vanagon">Vanagon</span> 
</div>

Я приложил изображение, как фактическая крошка должна выглядеть enter image description here

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

http://jsfiddle.net/Dbudt/5/

Пожалуйста, советы

источник

2014-02-19 user1049057

* первый текст сундука должен быть полужирным, когда он переходит на вторую страницу, только второй должен быть полужирным * Вы не можете сделать это только с помощью CSS, поскольку выравнивание идет, у вас есть дополнительное количество 'width 'http://jsfiddle.net/Dbudt/6/ –

@ Mr.Alien: спасибо от ответа .. в последнем ящике не должно быть треугольника. – user1049057

Вам нужно будет изменить изображение –

Updated demo

Я добавил .active класс, чтобы вы могли использовать его в поле на требуемой странице. Я также установил отступы для span.step_off

UPDATE

Я исправить background-position для последнего элемента.

источник

2014-02-19 13:28:07

@ Mihey..Thanks для ответа .. Проблема в том, что я не должен вносить какие-либо изменения в html, так как тот же файл используется и в других приложениях. Значит, только с помощью css это возможно? А также в последнем ящике не должно быть конца треугольника ... Любая помощь? – user1049057

См. Обновленный ответ. –

@ Mihey..Спасибо за решение .. Это помогло ... – user1049057

css breadcrumbs, используя изображение спрайт

ответ

Смежные вопросы