Home/ Questions/Q 6361563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T23:47:37+00:00

I want to optimize my code. I think I am correct in saying that

  • 0

I want to optimize my code. I think I am correct in saying that if I combine multiple images into one file then I can’t use the position attribute unless the images are part of a background image. But I am not sure how to set up my DIV. Do I need to set the width and height of the DIV? Do I need to do display: block or something like that?

Here’s the code that I have so far:

<ul>
<li><a class='disabled' ><img width='16' height='16' src='../../Content/Icons/home.png' />Home</a></li>
<li><a href='xx'  title='xx'><img width='16' height='16' src='../../Content/Icons/xx.png' />xx</a></li>
<li><a href='yy'  title='yy'><img width='16' height='16' src='../../Content/Icons/yy.png' />yy</a></li>
</ul>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    if you have multiple images in one file, I’d recommend you to add some classes, as @pduersteler said.

    ul li a { display: inline-block; position: relative; width: 16px; height: 16px; }
ul li a.one { background: url('../../Content/Icons/home.png') left top no-repeat; }
ul li a.two { background: url('../../Content/Icons/home.png') -16px top no-repeat; }
ul li a.three { background: url('../../Content/Icons/home.png') -32px top no-repeat; }

    Something like this…

    • 0