Problem with CSS and Looking for your Help

2 views
Skip to first unread message

Pavan PHP

unread,
Sep 1, 2012, 1:15:13 PM9/1/12
to htm...@googlegroups.com
Hi Group Members,

I have a problem with CSS and looking for your help. I can solve this problem with javascript very easily but trying to solve this with CSS.

I am looking for your inputs regarding this. Here is the problem:

I have 100 buttons in a page.

<div class='buttons'>
<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>
<button id='button4'>Button 4</button>
<button id='button5'>Button 5</button>
<button id='button6'>Button 6</button>
<button id='button7'>Button 7</button>
<button id='button8'>Button 8</button>
<button id='button9'>Button 9</button>
<button id='button10'>Button 10</button>
.
.
.
<button id='button100'>Button 100</button>
</div>

and I have following css definition for each button as below:

.buttons #button1 { background-image:url(images/button1.gif); }
.buttons #button2 { background-image:url(images/
button2.gif); }
.buttons #button3 { background-image:url(images/button3.gif); }
.buttons #button4 { background-image:url(images/button4.gif); }
.buttons #button5 { background-image:url(images/button5.gif); }
.buttons #button6 { background-image:url(images/button6.gif); }
.buttons #button7 { background-image:url(images/button7.gif); }
.buttons #button8 { background-image:url(images/button8.gif); }
.buttons #button9 { background-image:url(images/button9.gif); }
.buttons #button10 { background-image:url(images/button10.gif); }
.
.
.
.buttons #button100 { background-image:url(images/button100.gif); }


I am trying to define a single definition for each button as below:

.buttons button { background-image:url(images/buttonid.gif); }

where buttonid in "images/buttonid.gif" is the id attribute of the button element which is also the name of background image file for the respective button.

I am trying to define background image dynamically (assume adding a value of a variable) so that all the buttons in class ".buttons" have the respective background image.

Regards
Pavan PHP
Reply all
Reply to author
Forward
0 new messages