Yeah, I would recommend using some JS to do this, possibly JQuery because its small and easy to use. Ideally you could use some CSS child selectors but these probably wont work on every platform. On the other hand, since you mentioned your site is dynamic already then I presume you use PHP, Rails or whatever to generate these image blocks. If so, you could use something like the modulo function to figure out which block you need to add the class to. This solution applies equally of course to JS or whatever server side language you've got going on. Some might suggest that this is a presentational issue and therefore should pretty much be strictly handled by JS (i.e. don't put presentational code into the server side) but if its for a personal website than I think its up to you.
Jesse http://www.bluesponge.com http://www.cca.qc.ca On Sep 21, 7:19 am, Christian Montoya <[email protected]> wrote: > On Sat, Sep 19, 2009 at 8:27 PM, puddin pete <[email protected]> wrote: > > > Im working on a website which is a portfolio type page where you have > > rows of 4 images and the title below it. > > > My code looks like this for the sections being added: > > > <div class="eventcontainer span-6"> > > <div class="eventimg clear"> > > <a href="#"><img src="" /></a> > > </div> > > <div class="eventtitle"> > > <a href="#"><h4>imgTitle</h4></a> > > </div> > > </div> > > > I have a total of 24 columns, so I'm trying to get 6 of these going > > across.. the problem is since this is dynamically added I cant put > > "<div class="eventcontainer span-6 last">" on the 4th image. > > > Since the last image is going to have a margin of 12px its not going > > to allow 4 images in a row since the total with would be 792px when my > > container is only 780px. > > > Is there any kind of hack or anything I can do to make this work so I > > can get rows of 4 images? > > There are 2 things you can do: > > - Figure out a way to tell if the image you are adding is the fourth > in the row, and assign class="last" to that div > > - Add another div inside the .container and give it this CSS: > > { margin-right:-10px; } > > This will remove the need for class .last, thought I cannot promise it > will work in every browser. > > -- > -- > Christian Montoya > mappdev.com :: christianmontoya.net --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Blueprint CSS" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=en -~----------~----~----~----~------~----~------~--~---
