In all my reading out here, I often find people exclamating about finally making a page entirely out of divs with no tables or frames.<br />
<br />
My inquiries are:<br />
A. What are the advantages/disadvantages of moving to divs?<br />
B. What are some good techniques that would be helpful in making the conversation?<br />
C. What are the "cross-platform" implications (as I only use IE on Windows XP)?<br />
<br />
TIA<!--content-->Try asking Jeeves at <!-- m --><a class="postlink" href="http://www.askjeeves.com">http://www.askjeeves.com</a><!-- m --> . I asked "What are the advantages of converting tables to divs?" and came up with a few good articles that might be worth perusing.<!--content-->advantages:<br />
more layout options<br />
smaller file size<br />
don't halt SE spider access to the content<br />
<br />
techniques:<br />
browsing through <br />
w3schools (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/default.asp">http://www.w3schools.com/css/default.asp</a><!-- m -->) first to get a good understanding of the basics (that's if you don't already), read up on the box model, helps clear loads of things up.<br />
If you're feeling brave wander over to glish.com (<!-- m --><a class="postlink" href="http://glish.com/css/">http://glish.com/css/</a><!-- m -->) and wrap your eyes around some of their layout tutorials.<br />
A good way to get the hang of it is to mix divs and tables, set yourself out a big old table, place some divs in the cells, and have a play around at positioning them, 'float' is always a favourite of mine.<br />
<br />
Browser implications:<br />
<br />
Nope
<br />
<br />
centering pages is a breeze with divs, have a div at 100%, text-align:center; , then have another div holding the content with margin:0px auto;<br />
easy as pie and no horrible nested tables or deprecated tags, after all tables are for tabular data
<!--content-->I've had some problems with divs on Opera. Have a look at: <!-- m --><a class="postlink" href="http://www.teil.tk">http://www.teil.tk</a><!-- m --> with IE and with Opera, it's center aligned in IE, but left aligned in Opera. I could probably fix it someway but I don't bother.<br />
<br />
/Added: And the same with <!-- m --><a class="postlink" href="http://www.jerkku.cjb.net">http://www.jerkku.cjb.net</a><!-- m -->, as I use the same method.<!--content-->i only use opera to view my pages in it's alternate styles.<br />
<br />
Opera has an inheritance issue, it can be solved with margin:0px auto;<br />
it doesn't just affect divs, tables too.<br />
<br />
sample page (<!-- m --><a class="postlink" href="http://home.inreach.com/jdcard/Center.htm">http://home.inreach.com/jdcard/Center.htm</a><!-- m -->)<!--content-->Thanks for all the insights guys.<br />
<br />
Currently, I usually do the <div style="WIDTH:100%" align=center> to encapsulate all my pages and then, from there, I use a bunch of tables and then divs for stuff that I need to hide/show. Which, has worked quite for me for quite a few years now, but I was just wondering the advantages of having an "all div" page.<br />
<br />
Here's a more exact question:<br />
If you use all divs, do you have to position all of them precisely using "Top=0px;Left=0px" attributes, or is there a better way to do the layout of them?<!--content-->depends on the end result you want to use, ther's no best way, only the best way that gets the reult you want.<br />
Using absolute positioning will give you a fixed layout, which is fine, most websites are fixed. <br />
If you don't specify it to either absolute or float, divs will follow the normal flow of the page, ie from top to bottom.<br />
<br />
these (<!-- m --><a class="postlink" href="http://www.brainjar.com/css/positioning/">http://www.brainjar.com/css/positioning/</a><!-- m -->) pages give a great explanation and visual examples of css positioning with only divs<br />
<br />
<div> content</div><br />
<div> content</div><br />
<div> content</div><br />
<div> content</div><br />
<br />
this has abolsutely no positioning values and will follow the normal flow of the page, probably the easiest layout.<!--content-->watch out on using "float" in IE. IE bugs out on that for some reason.<br />
<br />
aling=center is deprecated and should't be used Putts. if you are going to all divs than you might as well make the best of it and not use align attribs.<br />
<br />
I think, cause I have not done it yet, is that if you use all divs and have them situated one right after the ohter then you shouldn't have to use top: 100px or anything like that. but if you have them sparatic around the page then I do believe you have to use those attributes.<!--content-->yeah it's not when you jsut use float, it depends on other properties that you set at the same time, it's pretty strange, if you set a top-margin greater than 34px on a floated div it can set it off, there are workarounds though, test what you are doing and if you get a problem then find a workaround, such as this (<!-- m --><a class="postlink" href="http://qsdqsd.free.fr/Articles/MSIE6_CSS_bug_float_right/index2.html">http://qsdqsd.free.fr/Articles/MSIE6_CS ... ndex2.html</a><!-- m -->) one.<!--content-->
<br />
My inquiries are:<br />
A. What are the advantages/disadvantages of moving to divs?<br />
B. What are some good techniques that would be helpful in making the conversation?<br />
C. What are the "cross-platform" implications (as I only use IE on Windows XP)?<br />
<br />
TIA<!--content-->Try asking Jeeves at <!-- m --><a class="postlink" href="http://www.askjeeves.com">http://www.askjeeves.com</a><!-- m --> . I asked "What are the advantages of converting tables to divs?" and came up with a few good articles that might be worth perusing.<!--content-->advantages:<br />
more layout options<br />
smaller file size<br />
don't halt SE spider access to the content<br />
<br />
techniques:<br />
browsing through <br />
w3schools (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/default.asp">http://www.w3schools.com/css/default.asp</a><!-- m -->) first to get a good understanding of the basics (that's if you don't already), read up on the box model, helps clear loads of things up.<br />
If you're feeling brave wander over to glish.com (<!-- m --><a class="postlink" href="http://glish.com/css/">http://glish.com/css/</a><!-- m -->) and wrap your eyes around some of their layout tutorials.<br />
A good way to get the hang of it is to mix divs and tables, set yourself out a big old table, place some divs in the cells, and have a play around at positioning them, 'float' is always a favourite of mine.<br />
<br />
Browser implications:<br />
<br />
Nope
<br /><br />
centering pages is a breeze with divs, have a div at 100%, text-align:center; , then have another div holding the content with margin:0px auto;<br />
easy as pie and no horrible nested tables or deprecated tags, after all tables are for tabular data
<!--content-->I've had some problems with divs on Opera. Have a look at: <!-- m --><a class="postlink" href="http://www.teil.tk">http://www.teil.tk</a><!-- m --> with IE and with Opera, it's center aligned in IE, but left aligned in Opera. I could probably fix it someway but I don't bother.<br /><br />
/Added: And the same with <!-- m --><a class="postlink" href="http://www.jerkku.cjb.net">http://www.jerkku.cjb.net</a><!-- m -->, as I use the same method.<!--content-->i only use opera to view my pages in it's alternate styles.<br />
<br />
Opera has an inheritance issue, it can be solved with margin:0px auto;<br />
it doesn't just affect divs, tables too.<br />
<br />
sample page (<!-- m --><a class="postlink" href="http://home.inreach.com/jdcard/Center.htm">http://home.inreach.com/jdcard/Center.htm</a><!-- m -->)
<!--content-->Thanks for all the insights guys.<br /><br />
Currently, I usually do the <div style="WIDTH:100%" align=center> to encapsulate all my pages and then, from there, I use a bunch of tables and then divs for stuff that I need to hide/show. Which, has worked quite for me for quite a few years now, but I was just wondering the advantages of having an "all div" page.<br />
<br />
Here's a more exact question:<br />
If you use all divs, do you have to position all of them precisely using "Top=0px;Left=0px" attributes, or is there a better way to do the layout of them?<!--content-->depends on the end result you want to use, ther's no best way, only the best way that gets the reult you want.<br />
Using absolute positioning will give you a fixed layout, which is fine, most websites are fixed. <br />
If you don't specify it to either absolute or float, divs will follow the normal flow of the page, ie from top to bottom.<br />
<br />
these (<!-- m --><a class="postlink" href="http://www.brainjar.com/css/positioning/">http://www.brainjar.com/css/positioning/</a><!-- m -->) pages give a great explanation and visual examples of css positioning with only divs
<br /><br />
<div> content</div><br />
<div> content</div><br />
<div> content</div><br />
<div> content</div><br />
<br />
this has abolsutely no positioning values and will follow the normal flow of the page, probably the easiest layout.<!--content-->watch out on using "float" in IE. IE bugs out on that for some reason.<br />
<br />
aling=center is deprecated and should't be used Putts. if you are going to all divs than you might as well make the best of it and not use align attribs.<br />
<br />
I think, cause I have not done it yet, is that if you use all divs and have them situated one right after the ohter then you shouldn't have to use top: 100px or anything like that. but if you have them sparatic around the page then I do believe you have to use those attributes.<!--content-->yeah it's not when you jsut use float, it depends on other properties that you set at the same time, it's pretty strange, if you set a top-margin greater than 34px on a floated div it can set it off, there are workarounds though, test what you are doing and if you get a problem then find a workaround, such as this (<!-- m --><a class="postlink" href="http://qsdqsd.free.fr/Articles/MSIE6_CSS_bug_float_right/index2.html">http://qsdqsd.free.fr/Articles/MSIE6_CS ... ndex2.html</a><!-- m -->) one.<!--content-->