SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question about "Content Boxes"

    The Apple Store has "content boxes" around logical groupings of things, seen here.

    Some related questions...

    1.) How are those created?

    Are they just DIVs?


    2.) How can you create the rounded corners without using CSS3?


    3.) How do you create the subtle shadow ate the bottom of each box?


    4.) If those are DIVs, then how flexible are they if I use a "Fluid" layout or at least an "Elastic" layout?

    Thanks,


    Debbie

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    1.) How are those created?

    Are they just DIVs?
    Mostly divs, although some of the smaller groupings are using ULs.

    Off Topic:

    Why aren't you viewing source or using Firebug? You have the knowhow to answer these questions.


    2.) How can you create the rounded corners without using CSS3?
    Background images or JS. They've created some tiny top divs with rounded background images for the top, and bg image on each main div for the bottom.

    3.) How do you create the subtle shadow ate the bottom of each box?
    They've used bg images. Again, it could be done with CSS3 (not supported by all, of course) or JS.

    4.) If those are DIVs, then how flexible are they if I use a "Fluid" layout or at least an "Elastic" layout?
    It still can be done, but requires some more trickery. The dreaded sliding doors is the general flavor.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Mostly divs, although some of the smaller groupings are using ULs.

    Off Topic:

    Why aren't you viewing source or using Firebug? You have the know-how to answer these questions.
    I tried FireBug but it kept causing crashing and spinning out of my FireFox so I uninstalled it. (FireFox has gotten increasingly "sucky" in the past 5 years...)

    I guess I could have viewed the source, but usually professional websites have so much junk in their code - thanks to hidden stylesheets and everything being created in DreamWeaver that it is IMPOSSIBLE to follow?! (Apparently none of the designers were SitePoint members?!)


    Background images or JS. They've created some tiny top divs with rounded background images for the top, and bg image on each main div for the bottom.


    They've used bg images. Again, it could be done with CSS3 (not supported by all, of course) or JS.
    Oh. They did such a good job I wasn't sure since it just looks like a thin grey line drawn around things. (Had they had solid rounded corners - like Tabs - then I would have figured that out.)



    It still can be done, but requires some more trickery. The dreaded sliding doors is the general flavor.
    To be clear, I didn't mean Fluid or Elastic inside the boxes, I meant how well do those boxes - with fixed dimensions - play in a Fluid or Elastic layout where things move.

    I suppose if you know what you are doing it isn't a problem, but who knows?!

    Thanks,



    Debbie

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I tried FireBug but it kept causing crashing and spinning out of my FireFox so I uninstalled it. (FireFox has gotten increasingly "sucky" in the past 5 years...)
    I'm happy to inform you, FireFox has gotten increasingly better in the past years

    The 4th version of it, tops IE9, Ch10b, OP 11.01, Saf 5.03 in many areas. Actually IE9 and Ch 10b are for me HUGE HUGE disappointments. So much hype about IE9 and it proves to be about JS more than anything else, forgetting, like always, the task at hand: making amends with X/HTML and CSS.

    So far, FF 4b and Firebug are the most flexible and reliable tools a web dev has. You really need to look into your OS installation.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I tried FireBug but it kept causing crashing and spinning out of my FireFox so I uninstalled it. (FireFox has gotten increasingly "sucky" in the past 5 years...)
    Safari and Chrome have pretty good inspectors, too. IE has dev tools, but they aren't as nice to use. Opera has Firefly (I think that's the name).

    To be clear, I didn't mean Fluid or Elastic inside the boxes, I meant how well do those boxes - with fixed dimensions - play in a Fluid or Elastic layout where things move.
    Should be ok, but the real point of having a fluid site is that all main components are fluid. Still, fixed width elements can float beside or drop depending on the viewport width.

  6. #6
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually Opera has a Dragonfly A pretty good one. And yes, Ch inspector has a lot of power in it too. Saf inspector is pretty much the same, and IE dev tool lacks the flexibility, but it does its job.


    How well fixed dimension boxes play in a Fluid or Elastic layout? They do, if you have other boxes, that are not having fixed dimensions, to compensate.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by noonnope View Post
    Actually Opera has a Dragonfly
    Ah yes, I can never remember the name, for some reason. Don't like it much anyway.

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    I'm happy to inform you, FireFox has gotten increasingly better in the past years

    The 4th version of it, tops IE9, Ch10b, OP 11.01, Saf 5.03 in many areas. Actually IE9 and Ch 10b are for me HUGE HUGE disappointments. So much hype about IE9 and it proves to be about JS more than anything else, forgetting, like always, the task at hand: making amends with X/HTML and CSS.

    So far, FF 4b and Firebug are the most flexible and reliable tools a web dev has. You really need to look into your OS installation.
    I'm running FF 3.6.13 on my MacBook, and I feel that all of version 3 has been disappointing. (I have had lots of crashing problems and hang up over the last few years. Runs more like a Windows computer...)

    I still use FF, but just saying...

    Also, I definitely had issues with FireBug, and after I uninstaleld it things got better.


    Debbie


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
  •