Thought I share with you now just in case I never able to come out
with layout tutorials that I'd been wanting to write.
Most of my CSS coding works, dealing with complex layouts that almost
every page needs its own set of code, and the frustrating part is that
the job has always been "work in progress" status, meaning clients
give me a page or two to begin with, I code it, few days or a week
later, more pages come in that often time requires me to re-work the
code for previous pages because of different widths or colors for
certain blocks. I charge by hours, that means I can simply invoice
whatever changes needed to make, but I really hated it because I hate
wasting my time and wasting client's money. So over the months I have
came out a solution that I think work quite nicely.
For example, I was coding for a project that is 3 columns, I decided
the home page needs equal height (using the technique I learned from
Georg Gunlaug) because there are vertical borders separated 3 columns
and the lines touch the header and footer; background color in columns
needed too, on which there is also a body background color for the
site. I received four pages, of which 3 pages have different widths in
columns in each page and the colors differ in fonts and certain
blocks, and the inner pages need only one vertical border for left
column, but without touching the header and footer. Today I received
another page that is in four columns.
As we all know, IE needs width declared in most cases or you will find
yourself to want to kill Bill Gates or kill yourself. Under such
circumstance working with uncertain layouts on each page, if I were to
markup the page in such way
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
I will have to create extraneous code for each page.
My solution for this layout is such
/* positioning in command */
div.floatbox {float: left"}
div.floatbox_right {float: right"}
div.w185 {width: 185px }
div.w385 {width: 385px }
div.w200 {width: 200px}
div.w220 {width: 220px}
div.w550 {width: 550px}
/* watch how I make myself look pretty */
#left {...}
#left h3 {...}
#right {...}
#right ul li {...}
#right p {...}
#middle {...}
#middle h4 {...)
#middle p {...)
and the markups for three columns look like so:
<div class="floatbox w185" id="left">
<p> left content here...</p>
</div>
<div class="floatbox w385" id="middle">
<p> middle content here...</p>
</div>
<div class="floatbox_right w220" id="right">
<p> right content here...</p>
</div>
with four columns or two columns, all I needed is to add or remove a
set of floatbox.
Basically the headings, ul, dl, ol and p tag are controlled by the
ID's descendants, but classes' descendants sometimes are added with
declaration of '!important" to overwrite the ID's descendants to avoid
creating extra set of ID just to achieve presentation needs.
Although I am quite happy with the solution I came up, but I
understand it's by no means a perfect solution , therefor I hope you
can give me your input to make it even better.
tee
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
I posted the below message in another list to share with others. I
truly believe this list needs no CSS tips from me, so my intention is
to seek improvement and suggestion for my solution.
