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
-~----------~----~----~----~------~----~------~--~---
