#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0

    Divs utilising space


    Hi all I wonder if you can help.

    I am trying to create an effect similar to Pinterest.com.

    If you visit designercurtains.biz/screen.png you will note that the divs do not like doing this style.

    Scarf should be under dog bandana, and jeans should be under cushion. Is there a simple way of making the divs use the available space?

    Each box is a div classed as 'frame'.

    Code:
    .frame {
    	float: left;
    	width: 150px;
    	margin: 10px;
    	background: #fff;
    	padding: 10px;
    	border: 1px #888 solid;
    }
    .frame:hover {
      	-moz-box-shadow:    2px 4px 4px 3px #ccc;
      	-webkit-box-shadow: 2px 4px 4px 3px #ccc;
      	box-shadow:         2px 4px 4px 3px #ccc;
    }
    Thanks in advance.
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    give the .frames a height.
    and make sure the content is being limited by the serverside script
    Last edited by aeternus; September 24th, 2012 at 03:07 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0
    Originally Posted by aeternus
    give the .frames a height.
    and make sure the content is being limited by the serverside script
    Thanks for your help aeternus.

    I've given the divs heights but 'Jeans' doesn't use up the space between itself and Cushion.

    See designercurtains.biz/screen2.png

    Also when I increase the height of Pillow, it pushes scarf and jeans to the right and down another line...

    And I'm not sure how I make sure the content is being limited by serverside script...

    sorry!
  6. #4
  7. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Hi rdbrotherton,

    I understand that you are testing this locally, but without seeing any mark-up and how your declared styles are applied to it, no one can really help.

    If you want me to check it out, post a link to a online page where you say you applied the style and it is not working for some reason.


    See ya

    - as for limiting stuff server side. depending on the cms you are using this should be done in the backed. If not, just tell these client that they should limited the amount of characters used. Or more use:
    .frame{ overflow:hidden} this will cutt off extra stuff. But that might not be so pretty.
    Last edited by aeternus; September 24th, 2012 at 03:49 PM.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0
    aeternus,

    Thanks for your help so far its most appreciated.

    I've uploaded the index and css file to rdb.x10.mx/de

    As you can see, jeans wdoes not move up below cushion, it sits on its line. If I increase the size of pillow (frame3) it pushes both scarf and jeans down even further.

    Do you think I going to have to use position absolute attributes to achieve the look I want?

    Thanks again.
  10. #6
  11. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by rdbrotherton
    aeternus,

    Thanks for your help so far its most appreciated.

    I've uploaded the index and css file to rdb.x10.mx/de

    As you can see, jeans wdoes not move up below cushion, it sits on its line. If I increase the size of pillow (frame3) it pushes both scarf and jeans down even further.

    Do you think I going to have to use position absolute attributes to achieve the look I want?

    Thanks again.
    Position absolute is by far the last thing you should look at. Position absolute takes elements out of the normal flow of the document. To get the desired result with that you will have to do a lot of extra coding.

    Let keep it efficient.
    I see that you assigned a height to .frame1 .frame2 .frame3 .frame4 They all have a hieght of 250px; except for .frame2

    So if you remove the height from all these frames and just combine them in 1 rule it is much more efficient (the same is true for all your other properties, combine everything if they use the same stuff, it saves you time money, bandwidth and troubles
    Code:
    .frame1, .frame2, .frame3, .frame4 {
        background: #fff;
        border: 1px solid #888;
        float: left;
        height: 250px;
        margin: 10px;
        padding: 10px;
        width: 150px;
    }
    Hope this helps! good luck!

    -edit: ones you gave all these frames the same properties you can if needed overwrite this by a simple statement like
    Code:
    .frame2{background:red}
    Last edited by aeternus; September 25th, 2012 at 11:09 AM.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0
    Thanks mate, I'm quite new to CSS, and while I know some of the basics, stuff like house keeping I haven't done much on.

    So to be clear, it would take quite a bit of coding to get my frame divs to position the way I want them?

    Thanks again.
  14. #8
  15. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    I cant really respond good because i destroyed my motherboard. Anyway added th div should take you 1 min
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    CSS alone is not sufficient to do what you seem to want with dynamic content. The jQuery Masonry plugin can be used for that, however.

    Originally Posted by aeternus
    I cant really respond good because i destroyed my motherboard.
    Ouch. How'd that happen? What brand was your MB?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  18. #10
  19. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by Kravvitz
    CSS alone is not sufficient to do what you seem to want with dynamic content. The jQuery Masonry plugin can be used for that, however.


    Ouch. How'd that happen? What brand was your MB?
    a facking expensive dell xps :-P damn frauds ;-) prolly a cheap *** mb ;-) i might have played to much games ii guess B-)
    Last edited by aeternus; September 25th, 2012 at 06:26 PM.
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    24
    Rep Power
    0

    Thumbs up


    Originally Posted by Kravvitz
    CSS alone is not sufficient to do what you seem to want with dynamic content. The jQuery Masonry plugin can be used for that, however.
    That is exactly what I'm after. Thank you both for all your help. I'll definitely come here again if have another problem!

    Cheers.

IMN logo majestic logo threadwatch logo seochat tools logo