SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mini grid with 960 gs

    this is a sidebar which has one large image and a series of smaller images around it. does anyone know how i would acheive this with 960 gs?



    the large one is enough to take up 2 on the grid and the smaller ones are a 1.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,572
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, I don't use 960 so I can't help here, but this can easily be achieved without using that framework, do you absolutely have to use it?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, I don't use 960 so I can't help here, but this can easily be achieved without using that framework, do you absolutely have to use it?
    no i don't have to use it, but the rest of the site is on this grid, so if i can figure out how to apply it to this small section it will all align super nice with very limited CSS.

    without the grid system i assume i would divide this up into two columns right?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,572
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You could . It depends on how the smaller boxes would flow together (if they hold the same stuff) but you could do it into 2 columns, yes
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    they are just images

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    blech. i tried this with two columns (and not using 960), i found there is a lot of markup and it's not as "tight" as i'd like it to be.

    <style type="text/css">
    #col1{
    width:150px;
    float:left;
    }

    .large{
    margin-bottom:10px;
    }

    #col2{
    width:150px;
    float:right;
    }

    #flickr img{
    margin-right:13px;
    } // flickr is the general div that this belongs to

    .duos{
    margin-bottom:10px;
    }
    </style>


    <div id="col1" >
    <img src="images/largeImg.gif" class="large" />

    <div class="duos">
    <img src="images/smallImg.gif" />
    <img src="images/smallImg.gif" />
    </div> <!-- end duos -->

    </div> <!-- grid_2 -->

    <div id="col2" >

    <div class="duos">
    <img src="images/smallImg.gif" />
    <img src="images/smallImg.gif" />
    </div> <!-- end duos -->

    <div class="duos">
    <img src="images/smallImg.gif" />
    <img src="images/smallImg.gif" />
    </div> <!-- end duos -->

    <div class="duos">
    <img src="images/smallImg.gif" />
    <img src="images/smallImg.gif" />
    </div> <!-- end duos -->

    </div> <!-- end col2 -->

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,572
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That's not that bad IMO . Though a frmaework probably could make it slightly cleaner, noone else has posted..I don't think many users on here even use frameworks (960 nonetheless).

    If there is a 960 forum, I think you might want to check into that
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you know where the forum is? I looked but couldn't find it. A google for 960 forum brought me here

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,572
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I personally don't know of one, I don't even know if one exists .

    I tried googling of one too, yet no avail.

    Hopefully another member will come up who has experience in 960, otherwise your SOL I'm afraid

    I'm out
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Are the images all the same size always? If so just float them all left with margins or padding on them. End of problem. The little ones will just stack atop the big ones.

    For example, let's say your large image is 144x144, and your smaller images are 64x64 (I'm ballpark guessing based on your pic - it also helps to work with multiples of 8 for me) that would mean the need for 16px spacing to make them all equal height, and a 320px container... which I'd make 323px so that IE doesn't hit up against the 'perfect width' bug.

    No need to get too fancy on the markup for that:

    Code:
    <div class="stackGallery">
    	<img
    		src="images/bigPic.png"
    		width="144"
    		height="144"
    		alt="big Picture"
    	/>
    	<img
    		src="images/small1.png"
    		width="64"
    		height="64"
    		alt="thumbnail"
    	/>
    	<img
    		src="images/small2.png"
    		width="64"
    		height="64"
    		alt="thumbnail"
    	/>
    	<img
    		src="images/small3.png"
    		width="64"
    		height="64"
    		alt="thumbnail"
    	/>
    	<img
    		src="images/small4.png"
    		width="64"
    		height="64"
    		alt="thumbnail"
    	/>
    	<img
    		src="images/small5.png"
    		width="64"
    		height="64"
    		alt="thumbnail"
    	/>
    	<img
    		src="images/small6.png"
    		width="64"
    		height="64"
    		alt="thumbnail"
    	/>
    	<img
    		src="images/small7.png"
    		width="64"
    		height="64"
    		alt="thumbnail"
    	/>
    	<img
    		src="images/small8.png"
    		width="64"
    		height="64"
    		alt="thumbnail"
    	/>
    <!-- .stackGallery --></div>
    and for CSS:

    Code:
    /* assumes margins and padding are nulled */
    .stackGallery {
    	overflow:hidden; /* wrap floats */
    	width:323px; /* also trips haslayout, wraps floats in IE */
    	/* 
    		width figured as follows:
    		144 image + 16 margin == 160
    		64 image  + 16 margin ==  80
    		160+80+80             == 320. 
    		Plus 3 px for
    		IE being a retard     == 323
    	*/
    }
    
    .stackGallery img {
    	float:left;
    	display:inline; /* prevent IE double margin bug */
    	margin:0 16px 16px 0;
    }
    That really should be all there is to achieving that effect assuming you have control over the image sizes and they are always going to be uniform. All those floats should add up and stack properly. If it has any real problems with that, swap the margin for padding. (code untested, but should be sound)

    Oh and Grid? Forget it exists. SERIOUSLY.


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
  •