Problem with CSS and Looking for your Help

[Pavan PHP]

Hi Barcampers,

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

[Raghavender Reddy]

Hi,

I would recommend CSS sprites for this use case.  Combine all images into a single image and map their positions to respective css class or define their positions dynamically with javascript, by doing this you can reduce http requests.

CSS Sprites: http://css-tricks.com/css-sprites/


Thanks,
Raghavender Reddy

--
You received this message because you are subscribed to the Google Groups "HTML5 Discussion Group, India" group.
To post to this group, send email to html...@googlegroups.com.
To unsubscribe from this group, send email to html5-in+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/html5-in?hl=en.

--
Thanks,
Raghavender Reddy

[Pavan PHP]

Hi Raghavender,

I know what you are talking about and that's a good solution but at this moment I am looking for a way to insert a variable in css so that a one single css declaration can work on n number of elements based on  the selector.

In the example, I have mentioned, I am trying css to take a id of element as the name of the background image so that I can reduce my css codes from 100 lines into one line.

Looking forward to some hints on how to achieve it.

Regards
Pavan PHP

[Abdul Munim Kazia]

You can also, of course, simply write the styles using a server side script like PHP. And put all the style rules in a loop.

You can also write a simple piece of JavaScript code which will set the backgrounds for each of the buttons.

On 2 Sep 2012 08:24, "Prateek Rungta" <run...@miranj.in> wrote:

The functionality you’re looking for is provided by the `attr()` function. CSS 2.1 limited its usage to the `content` property but CSS3 has made it usable in a lot more places, as well as made it slightly more capable. 

https://developer.mozilla.org/en-US/docs/CSS/attr

http://dev.w3.org/csswg/css3-values/#attr

The markup would be something to the effect of:

<button data-bg="i/b1.gif">Button 1</button>

<button data-bg="i/b2.gif">Button 2</button>

<button data-bg="i/b3.gif">Button 3</button>

<style>

button { background-image: attr(data-bg url); }

</style>

Unfortunately, browsers are yet to implement the CSS3 draft version of `attr` (as far as I’m aware).

Cheers,

-Prateek

--

You received this message because you are subscribed to the Google Groups "HTML5 Discussion Group, India" group.

To view this discussion on the web visit https://groups.google.com/d/msg/html5-in/-/Qd_RddUyeGUJ.