0

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 }
casperOne
  • 70,959
  • 17
  • 175
  • 239
Sarah
  • 139
  • 1
  • 4
  • 14

1 Answers1

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:

enter image description here

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

casperOne
  • 70,959
  • 17
  • 175
  • 239
Frostyfrog
  • 36
  • 3
  • I'm re-designing [Unihost](http://www.unihost.co.za) - have a look at the sidebar – Sarah Dec 03 '11 at 07:47
  • clear:both is not the issue, I'm trying to get the next piece of the image to show up in the next block - hence background-position and spry – Sarah Dec 03 '11 at 07:51
  • 1
    I just found out that the reason why it isn't working, is because you can't have the first character of a classname be a number. I renamed them to a1, a2, a3, and a4 and all of a sudden, I started getting results and the forth one works. Try that and see if it works for you. :) **Edit**: Here is the link of where I got this info: http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names – Frostyfrog Dec 03 '11 at 07:59
  • Awesome, thanks Frostyfrog - that work... I knew it shouldve worked, but didnt really know that rule - but thanks - have a great day – Sarah Dec 03 '11 at 08:09