SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamically adding 4 Divs to a website

    I'm using blueprint CSS as a framework and to quickly explain how that works, you use a set number of columns which in my case is 24 columns and "span-6" is used to span across 6 columns and then it places a margin on the right. It will always place a margin on the right unless you have the class "last" which applies "margin:0" since its the last div before the border of the website.

    Im going to have 4 divs dynamically added and was wondering if there was a hack i could use to get this to work since I cant use "last" in my class for the last div.

    My xhtml looks like this


    HTML Code:
    <div class="eventcontainer span-6">
    <div class="eventimg clear"></div>
    <a href="#"></a>
    <div class="eventtitle">
    <a href="#"><h4>title</h4></a>
    </div>
    </div>
    my container is 780px but since I cant place "last" the 4 divs across would be 792px.. is there anything I can do to get this to work ?

    Is there a way to have the class "last" placed on the 4th div?

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Why can't you have "last" on the div in the first place?

    You can add the class using whatever JavaScript you're using to add the divs. Change its .className property.

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Grossman View Post
    Why can't you have "last" on the div in the first place?

    You can add the class using whatever JavaScript you're using to add the divs. Change its .className property.
    im using a cms called Modx and im trying to dynamically display these divs.. is there a way to target the 4th div? that way I can have
    HTML Code:
    <div class="eventcontainer span-6 last">
    instead of
    HTML Code:
    <div class="eventcontainer span-6">
    on the forth one on the page

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Code:
    .eventcontainer + .eventcontainer + .eventcontainer + .eventcontainer {
    	margin: 0;
    }
    perhaps? It won't work in IE6, though, but maybe that's not a big problem?

  5. #5
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CletusSpuckler View Post
    Code:
    .eventcontainer + .eventcontainer + .eventcontainer + .eventcontainer {
    	margin: 0;
    }
    perhaps? It won't work in IE6, though, but maybe that's not a big problem?
    It would have to work in ie6 but the css code u pasted looks interesting.. this would work on every 4th image like 4,8,12,16,..?

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by chaun View Post
    It would have to work in ie6 but the css code u pasted looks interesting.. this would work on every 4th image like 4,8,12,16,..?
    Unfortunately, no. This would effect #4, 5, 6, 7 etc... Any .eventcontainer from the fourth one and forward. I thought you just had four items in total. My bad.

    I guess you could theoretically use :nth-child(), but that wouldn't work even in newer versions of IE


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •