Re: Client side design frameworks
Posted: Sat Dec 19, 2009 3:28 am
I'm not entirely opposed to using frameworks, I'm entirely opposed to using them without knowing how everything goes together correctly. The quote you used was out of context though you certainly could have pushed your point with the later part of the first sentence of my initial reply. This is an analogy to when I had difficulty explaining how I understand logic (visually) when others nor I understood my learning style.
Alex, tables? Seriously? CSS isn't difficult.
First give your divisible elements some background-color so you can visually see what you're doing. You'll need some placeholder text or they won't appear at all as well.
To correctly do CSS 1.0 (basic to intermediate layouts) the key is to not apply anything other then width on parent-most divisible elements.
So if you want padding on the parents what you have to do (if you want to do this correctly) is set the margins on the child of the parent you want to add padding to.
The key is to add another divisible element and think dynamically. Static will only box you in.
You should know the box model for block-level elements, it's not difficult.

This stuff will all work in IE4 and Opera 4 until you get in to advanced margins and then CSS 2 with positioning.
Remember, border, padding, margin, and width are all added up together. If the screen is 1024 pixels wide and you have two divs, 50% wide each with 1px border then that's four sides (two sides each, four altogether) so that's 4px on top of 100% width making the grand total of 1028px thus creating a horizontal scrollbar...hence why you use the child for border, margin, and padding.
In regards to float and width...
If the divisible element is floating (left || right) and does not have a set width then it's width will collapse to the total width of the child elements within it.
If the divisible element is or is not floating and it's width is declared it will be the width that is declared (e.g. the top-level layout approach).
If the divisible element is not floating and it's width is not declared it will automatically take up 100% of all the available width of it's parent element.
Also you never wants to put content directly in to a parent width/float divisible element as doing so will quickly complicate your CSS and layout as it gains complexity.
Divisible elements (div) are the generic block-level elements while span's are the generic inline elements.
When constructing a page's layout consider the major components of the page, head, footer, content, sidebar, and or whatever else you'll need as "major" parts of the page layout. Give those parent most divisible elements id's.
Then in your CSS you can keep track of what is what by keeping your CSS organized.
In regards to CSS 2 if you position an element without setting it's width though set both it's left and right position (either as pixels or percentage) it will dynamically stretch across the screen. This is what I use for my site's #body that contains #content and #side while all other major page components appear in my site's XHTML afterwards as this is good for readability, accessibility, and SEO purposes.
CSS 2's positioning lets you take advantage of using CSS 1's layout but dictating what appears in what order in the (X)HTML code.
Those are the key things you'll need to know when you learn CSS to use it effectively, everything else is frosting cover cake and not the kind you don't like that everyone always buys anyway. Remember, if you don't see it then it needs some content (put some letters or numbers inside the element to make it appear).
All browsers should handle everything I've mentioned except for some issues with IE7 and a considerable though not non-fixable issues with IE6.
Alex, tables? Seriously? CSS isn't difficult.
Code: Select all
<div class="width_50">1</div><div class="width_50">2</div> <div class="width_60">3</div><div class="width_40">4</div>Code: Select all
div.width_50 {float:left; width: 50%;}Code: Select all
<div id="parent"><div id="child"></div></div>To correctly do CSS 1.0 (basic to intermediate layouts) the key is to not apply anything other then width on parent-most divisible elements.
So if you want padding on the parents what you have to do (if you want to do this correctly) is set the margins on the child of the parent you want to add padding to.
The key is to add another divisible element and think dynamically. Static will only box you in.
You should know the box model for block-level elements, it's not difficult.

This stuff will all work in IE4 and Opera 4 until you get in to advanced margins and then CSS 2 with positioning.
Remember, border, padding, margin, and width are all added up together. If the screen is 1024 pixels wide and you have two divs, 50% wide each with 1px border then that's four sides (two sides each, four altogether) so that's 4px on top of 100% width making the grand total of 1028px thus creating a horizontal scrollbar...hence why you use the child for border, margin, and padding.
In regards to float and width...
If the divisible element is floating (left || right) and does not have a set width then it's width will collapse to the total width of the child elements within it.
If the divisible element is or is not floating and it's width is declared it will be the width that is declared (e.g. the top-level layout approach).
If the divisible element is not floating and it's width is not declared it will automatically take up 100% of all the available width of it's parent element.
Also you never wants to put content directly in to a parent width/float divisible element as doing so will quickly complicate your CSS and layout as it gains complexity.
Divisible elements (div) are the generic block-level elements while span's are the generic inline elements.
When constructing a page's layout consider the major components of the page, head, footer, content, sidebar, and or whatever else you'll need as "major" parts of the page layout. Give those parent most divisible elements id's.
Code: Select all
<div id="content"></div><div id="side"></div><div id="head"><div id="menu"></div></div>Code: Select all
#content div {}#content div.date#side div.item {background-color: #ddd; margin: 4px;}#head {height: 120px; position: absolute; top: 0px; left: 0px; right: 0px;}#menu {/* menu stuff here */}CSS 2's positioning lets you take advantage of using CSS 1's layout but dictating what appears in what order in the (X)HTML code.
Those are the key things you'll need to know when you learn CSS to use it effectively, everything else is frosting cover cake and not the kind you don't like that everyone always buys anyway. Remember, if you don't see it then it needs some content (put some letters or numbers inside the element to make it appear).
All browsers should handle everything I've mentioned except for some issues with IE7 and a considerable though not non-fixable issues with IE6.