I have some PHP which spits out the following HTML Markup:

My question is this, can I apply different CSS styles to this code (somehow) as it is spat out, or do I need to re-engineer my PHP (and probably shift this to a PHP forum)? All the HTML looks the same (exactly as above), it’s just what is contained within it that chnages…

Why not?  If you I understand you correctly…style away.  The HTML is not really correct but it can be styled.  I would put each one of your items within a <li></li> instead of using only one list item. 

span.address-line1 {}
.notes {}
.addressbook-list ol {}
.addressbook-item li {}

I’m trying to apply a unique image to each of the <LI> references… is that do-able??

Yeah…just give each of your <li> items there own class. 

<li class=“listOne”>
<li class=“listTwo”>

li.listOne {background: url(path.png) no-repeat}
li.listTwo {background: url(path2.png) no-repeat}

I see, how could I get PHP to do this automatically though, the HTML is “construted” from the details it retrieves from a database…

Well someplace in the php code it’s building it’s list of stuff to output, you’ll have to find some help with php if you don’t know what you are doing.  It’s just a matter of adding some text to the right places in the php code.

shadowdesigner - 17 December 2007 03:48 PM

Why not?  If you I understand you correctly…style away.  The HTML is not really correct but it can be styled.  I would put each one of your items within a <li></li> instead of using only one list item. 

span.address-line1 {}
.notes {}
.addressbook-list ol {}
.addressbook-item li {}

Actually, you could use just the one class for all your lis and simply use a local override for the background image.  The code goes something like this

<li class=“mylistitem” style=“background-image:url(im1.png)>...</li>

The advantage with this is that if you are building your list in PHP in a loop - as I imagine you might well be doing - then you could simply build the name of each image file using a common stub name (im in my example) followed by a number and then the image file type.

b.t.w - strikes me that if you are pushing out address book entries you could potentially have 100s of them. Having nice class names like “street” and “zipcode” (I can’t see your post as I type this so just by way of example) then in the long run you will end up pushing out 10s of Kb more than needed. Just a suggestion - why not use something shorter? I am sure there are purists out there who will object strongly.

I would if at all possible alter the php to output something that makes a little more sense and will scale better in the long run.
Put your loop within “addressbook-list” for each of the users. There is no need for all those spans, and divs. Lose as many classes as you can, as you’re going to have a nightmare of a css file. Access the lists as follows:

ol#addressbook-list {
}

ol#addressbook-list li {
}

ol#addressbook-list li ul {
}

ol#addressbook-list li ul li {
}

ol#addressbook-list li ul li.userName {
}

...and so on