Question

Ive heard of combining multiple classes, which would help me alot in this situation. Ive got a sidebar with icons, so I combined the icons in 1 vertical image, now i want to display the next image in the next block and so on

I’ve got it set out like this and trying to save a lot of coding anf kb on the css, it’s easy to do it with normal classes for each one, but I want to combine the classes to save kb’s and coding time

Can someone help please, number 4 does what it should do in dreamweaver, but not in the browsers. Thanks hey

For those who want to know, Im trying to achieve the sidebar on the right. Im redeveloping the site – Unihost – to be in divs and not tables and trs and tds

The html

<div class="sidepanel">
 <div class="sidepanelleft 1"></div>
 <div class="sidepanelright">Content Goes Here</div>
</div>
<div class="sidepanel">
 <div class="sidepanelleft 2"></div>
 <div class="sidepanelright">Content Goes Here</div>
</div>
<div class="sidepanel">
 <div class="sidepanelleft 3"></div>
 <div class="sidepanelright">Content Goes Here</div>
</div>

The css

.sidepanelleft { display:block; width:45px; height:45px; float:left; background:url(../images/webhostingfeatures.jpg); background-repeat:none}
.1 { top: 0 -55px }
.2 { position: 0 -55px }
.3 { background: 0 -55px }
.4 { background-position: 0 -55px }

Answer 1

I don’t know what you are trying to achieve (as you haven’t really specified) but it looks like it works to me:

(I sure wasn’t expecting those results with the background-position)