ansaurus

Question

Answer 1

+1 A:

(If I'm understanding the question correctly:)

Think about using a different ID/class scheme. I don't know about the further specifics of your structure, but id="itemstable" class="item_type1" seems slightly redundant to me. Can itemstable be anything else than item_type1? Try to apply more generic class names and keep the specific cases for IDs.

Failing that, you can add another class that is responsible for adding the background image: class="item_type1 item_types".

EDIT

Since it seems sheer mass is the main problem (not applying the style as the title suggests) it's probably best to dynamically insert a style in the page header. Something along the lines of:

<head>
    ...
    <style type="text/css" media="screen">
        <?php echo "#$myelement"; ?> div { background: url(<?php echo $image; ?>) ...; }
    </style>
</head>

Inline styles can only apply to the element directly, not one of its children. I.e.:

<div style="background: ...;">

The background only applies to this one div.
You can't use selectors in inline styles like:

<div style="div { background: ...; }">

deceze 2009-08-02 04:42:08

The thing is I don't want to use the CSS file to tell it which background image to use, that way i can store the image info in my database and get it from there.

Hintswen 2009-08-02 06:39:22

Sorry, not getting it. Can you update your question and give a bit more context and details on what you're trying to achieve?

deceze 2009-08-02 06:43:33

added an example at the bottom of my question. Shows what I want my code to look like, if it's possible

Hintswen 2009-08-02 06:48:11

So you're saying the background image is pretty much dynamic and/or there are so many possibilities that you can't store them all in a static CSS file?

deceze 2009-08-02 06:49:47

something like that. There are probably around 50 different files it could be, I could put it in a CSS file and update it whenever there's a new file or changed name but I don't want to have an extra 50 lines in my css file just for that.

Hintswen 2009-08-02 06:52:04

see updated answer

deceze 2009-08-02 06:55:45

Just remembered css can be set in the <head /> section using the <style /> tag. Cant believe I forgot all about that. I could just put the style that sets the background image there then. I would prefer to have it as my example shows but if that's impossible I'll just set it in the <head /> section. Would it be possible to do it the way I show in my question or will I need to do it in the head?

Hintswen 2009-08-02 06:55:45

bahaha you said it just as I was typing it :) thanks! What do you mean by "Inline styles can only apply to the element directly, not one of its children." though? Do you mean I cant do .item_type1 div { background-image: url(images/type1.giff); }?

Hintswen 2009-08-02 06:58:06

again, see updated answer. :)

deceze 2009-08-02 07:01:41

oh right i'm having such a big mental blank today >.< Thanks for all the help. Now i've just gotta change all my code to get the background image URl before the head section ends, not a big change I guess. :)

Hintswen 2009-08-02 07:15:26

lol go me, doesn't work cause people with javascript turned on don't need to reload the page to get to the next group of items, therefore the head section stays the same, only my content div changes. Looks like I need to keep it in my CSS after all >.<

Hintswen 2009-08-02 07:25:02

You could add CSS dynamically, even though it seems slightly tricky: http://eightpence.com/creating-new-css-stylesheets-with-javascript/ http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

deceze 2009-08-02 08:07:57

Answer 2

+1 A:

I think including a little more of your HTML would make your question easier to understand.

You can certainly include multiple rules in a compound selector:

.item_type1 div.a, .item_type1 div.b, .item_type1 div.c {
  background-image: url(xyz.gif);
}

But since you are pulling images from the database dynamically, you will need to either include them in your dynamic code-- in the divs themselves, or dynamically create CSS as suggested above:

<style>
<% for $i in $images { echo "div.image$i div { background-image: url(/path/to/$i) }" %>
</style>

ndp 2009-08-02 22:25:49

ansaurus

tags:

views:

answers:

apply css to nested divs

related questions