Question about "Content Boxes"

[DoubleDee]

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

[ralph.m]

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.

[DoubleDee]

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

[noonnope]

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.

[ralph.m]

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.

[noonnope]

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.

[ralph.m]

Actually Opera has a Dragonfly

Ah yes, I can never remember the name, for some reason. Don't like it much anyway.

[DoubleDee]

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