PDA

View Full Version : In with the new.


Creative Insanity
03-22-2006, 12:59 AM
Ok we all know that I am a table man and I love my tables.. but since there is a new kid on the block I guess I better test him out and see if he can fight at all.
So what should I look out for if I want to do a site with div/css style.
Has the sucker got any low blows I gotta watch out for?
I know in the past I have stuck wit my good ol' 6 shooter tables.. but might give this new kid a shot and see what he is packing.

Tips and things to watch out for.

ranjan
03-22-2006, 04:27 AM
When I used to work with tables, I always thought about the design (layout) before I thought about the content. This way of working DOES NOT work with CSS (div based) layouts.

CSS came into the limeight MAINLY because it encouraged seperation of content and style. Keeping that in mind, the approach should be to write out the content using HTML tags without worring about the design (style).

eg.

<h1>My Web Site</h1>
<div id="content">Blah</div>
<ul id="navigation">
<a>Link One</a>
[/list]
<div id="footer">footer</div>


Once your content is ready, you can then break the html into finite boxes

eg
Box 1
<h1>My Web Site</h1>
Box 2
<div id="content">Blah</div>
and so on....

Then design each box into a seamless page in your fav graphics software

Then lastly write the styles.

The one thing to ask yourself while writing styles is:

"how long did you take to master tables? am i ready to give this CSS thing the same amount of time I gave tables?"

Creative Insanity
03-22-2006, 05:54 AM
Well thanks RJ and to answser your last question.. not really. Hmm.. more thought on this I think.

dthomsen8
03-22-2006, 10:10 AM
Well thanks RJ and to answser your last question.. not really. Hmm.. more thought on this I think.

Do you have any books on CSS? You should at least have the Bos & Lie book, they did most of the CSS creation work. Edition 3 is out now.

dthomsen8
03-22-2006, 05:50 PM
Ok we all know that I am a table man and I love my tables.. but since there is a new kid on the block I guess I better test him out and see if he can fight at all.
So what should I look out for if I want to do a site with div/css style.
Has the sucker got any low blows I gotta watch out for?
I know in the past I have stuck wit my good ol' 6 shooter tables.. but might give this new kid a shot and see what he is packing.

Tips and things to watch out for.
I am working hard to convert an existing "legacy" web site to CSS for layout and navigation, as well as the much easier typography specifications.

One thing that helps me is putting comments at the close of <div> sections of the HTML. When there are nested <div> sections, it is easy to become confused as to which styles are in effect. Here is a brief example, but the more nesting there is, and the more code in between, the more difficult it becomes to figure out what is having an effect on what is seen in the browser.

<div id=sideColumn>

<div id="navholder">


</p>
<ul>
<li id="sellink">Home (/index.htm)
About Us (/about.htm)
Information (/info.htm)
Issues (/issues.htm)

News (/News.htm)
[/list]
<div id="explain">


About Us includes Activities, Bylaws, Meetings, Membership, Organization</p>


Information includes Government Contacts, Links, Recycling, Neighborhood Plan</p>


Issues include Parking, SEPTA, Taxes, Zoning</p>


News includes Newsletters and Emails, current News, previous years News </p>

</div>


</div>

</div>

The other thing to try is to get the results looking right in Firefox or Mozilla before being too concerned about the results in Internet Explorer, which is far more buggy than we generally appreciate.

Jim_Shady
03-22-2006, 07:57 PM
It's wierd... I can my altest site looking fine in IE but not in Firefox...! :lol:

domedia
03-22-2006, 08:36 PM
One thing that helps me is putting comments at the close of <div> sections of the HTML.
I do the same, here's an exmaple on something I'm working on now. You see the closing comment also indicates if the container had an ID or Class.
<div id="category">
<div class="imageleft">
temp/category.gif
<div class="imagecaption">
Image Caption is here
</div>
</div>
<h1>Category Headline</h1>


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>

Creative Insanity
03-23-2006, 01:16 AM
hijack the thread why don't you lot LOL