3D CSS Box Model

Yet another little tool for people getting into :CSS:.  The 3D CSS box model shows how the box model works:

I’ve seen umpteen diagrams showing CSS beginners how padding, border and margin work together, but not the order in which elements such as background colour and image are stacked.

Good stuff.

This is an older entry and as such, it may be by a guest author or contain formatting problems / extraneous code. If you notice something wrong with the entry, please use the Contact page to let me know the entry title and issue.

Comments

why do i feel like this is for me?

thanks :D

btw, is using frames a bad idea? i work with a girl thats doing web development in school, and she seems to be suggesting them a lot.

I’m personally not a fan of Frames much at all.  There are a very few circumstances where they work well and are appropriate, but those situations aren’t frequent and the majority of people that use them don’t need to.

Every designer/developer has their own opinions about Frames, though.

Frames are the debbil.  Why is she suggesting them?  I can’t think of a single reason why frames would be advantageous on your site.

Frames are just another way to have your website work properly at one screen resolution on one browser.  Framed sites on my Pocket PC aren’t even usable, and on my 20” widescreen, look absolutely ridiculous.

Frames can be great when used well… The trouble is that few people use them well.  They also degrade into ancient browsers like Netscape 4, if you choose to support them, while CSS won’t do so gracefully.

I personally refuse to use frames, simply because I use PHP to have persistent navigation on sites I design, and that’s the only use of frames that really makes sense to me.  I also like having the URI in the address bar actually point to the page I’m looking at wink

BTW, Chris, nice digs.  Maybe I’ll catch you round the HoloNet sometime…

Word, Grayson.  Long time no see, btw. wink

The other times frames are handy is if you have an extremely long (read: vertically scrolling) list of text links that you want to open information in the primary frame.  Say, a browseable encyclopedia, or extended biography for an essay site.  Even then, it would have to be extreme.

Re: ancient browsers, I’m of the school to not even try to make my site behave, if it takes any extra work.  These people can upgrade for free, and will never do so until every site they go to looks like butt.

heh, you said “butt”

Leave Your Comment

Comments may be edited for content or deleted at any time. Civilized discussion is welcome. Anyone spamming, going way off topic, or otherwise being a jerk will probably be deleted or banned.

User Information

pMcode is allowed for comment formatting. pop-up mini reference

Personalization Options

Comment Security