I was on the W3Schools site and I read the section on CSS tables.
They even gave examples, which was cute and all but they gave some incomplete examples. All they had was CSS Styles for one row tables.
I don't understand how to make a CSS table that has, for example three columns or something...could someone please help on that? Thanks.Are you talking about using the actual <table> tag, or just a three column layout?Ummm....Yes, on both accounts...I think.<!-- m --><a class="postlink" href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">http://www.thenoodleincident.com/tutori ... boxes.html</a><!-- m -->
There's a whole section on various layouts. What are you trying to achieve with the table layout format? Just wanting to see if I can show you how what you want is coded.Well..I wanted to use it to put a menu and display content in..I know one isn't supposed to but I see it done on many sites to keep things contained and nice and neat looking..
Anywhoo thanks for the link, I am gonna check ti out.Well..I kinda like the one with the three touching boxes.
The problem is on how to get that code into my HTML page..I tried the ol' copy and paste but ended up with a bunch of code text in the display part of my page...not sure if that is supposed to happen but I guess I will figure it out....maybe....but I am not sure....
(thinks too hard and falls over....)You can read about absolute positioning at
<!-- m --><a class="postlink" href="http://www.w3schools.com/css/tryit.asp?filename=trycss_topleft">http://www.w3schools.com/css/tryit.asp? ... ss_topleft</a><!-- m -->
What position:absolute does is that it REMOVES the element from the document and PLACES it with respect to its parent positioned element (usually browser window). More info:
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme">http://www.w3.org/TR/CSS2/visuren.html# ... ing-scheme</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning">http://www.w3.org/TR/CSS2/visuren.html# ... ositioning</a><!-- m -->
The bare-basics of the touching boxes is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<head>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1">
<title>3-column layout</title>
<style type="text/css">
<!--
/* 150px left col, 500px central col, 150px right col */
body {padding: 0; margin-left: 150px; width: 500px}
div#navigation {position: absolute; left: 0; top: 0;
width: 150px}
div#rightbox {position: absolute; left: 650px; top: 0;
width: 150px}
-->
</style>
</head>
<body>
<p>This is the main content. We would like to keep it in the
central column. For more complex layout, I should use an
enclosing div. But for this example, its not necessary.</p>
<div id="navigation">
This is a navigation bar that appears to the left
</div>
<div id="rightbox">
This is the right-hand box
</div>
</body>
</html>
This is most basic layout. Now you may want to add background, paddings, borders etc. When you do that, things start getting more involved.
For example: if you have a padding of 5px and 1px border to "navigation", the total width of that div will be:
1px border + 5px left padding + 150px width + 5px right padding + 1px border = 162px.
The next complexity is because IE5/Win (but not IE5/Mac or IE6/Win) gets the above model incorrectly. It adds padding (incorrectly) inside the 150px width. Hence, TheNoodleIncident.com example uses a "hack" to feed different values to other browsers and IE5/Win.
Hope this helps
Niket
(Pyro/DaveSW, is there any way to add this in "advanced FAQ" on CSS?)Well, the CSS code I used from that site Spufi gave me doesn't work..I put it in my page and tested it in IE5 and nothing showed. Only some text from the sites example table thingee.
Why can't anything be more simple like instead of a pain in the neck..(sighs)
Anywhoo, thanks for the help Spufi and nkaisare.Please do! Head over to <!-- m --><a class="postlink" href="http://www.webdevfaqs.com/contribute.php">http://www.webdevfaqs.com/contribute.php</a><!-- m --> and submit it as you'd like it to appear, and specify which section you think it would be best suited for. Once we doctor it up to work with our format, we'd love to have new content!Okay..I used your example nkaisare but the little boxes overlap the text in the middle so maybe some tags are needed..nuts....sorry..didn't fully read the div tag thing...I'l figure it out I think.For body, add:
padding: 0;
Default padding of body is applied, resulting in the difference. I have edited my original code; that works now in IE6, Op7.10, and NS7.Originally posted by Dark Dragon
Why can't anything be more simple like instead of a pain in the neck..(sighs)
Actually, tables are in no way any simpler than this 3-column layout. Its just that we are now accustomed to using them.
CSS isn't simple at the begining because there is a learning curve. So far, a (good) WYSIWYG editor that can create good XHTML/CSS based layouts does not exist.
We also need to bear in mind that things that were easy or straightforward with tables may not be so with CSS. On the other hand, things that were not possible (or too difficult) with tables can be done with much more ease with CSS.Yeah..I guess. I tried the CSS Code from that "thenoodleincident" site..so I got the entire CSS Code but when I used it on my page it didn't work..oh well..I suppose I will have to stick to HTML tables or something for now..thanks anyways for your patience and help.The "noodle" link is often linked here when people ask about a three column layout and I kind of assumed it was decent code. I used the full CSS version for the touching three columns and while I got the three columns, I didn't see them touching like I thought they would. Anyway, I went and kicked around a basic three column layout of my own and below is what I came up with. I have no work arounds and I tested it on IE 5.5 and Mozilla 1.4 in Win2K, so I'm not sure just flexible it is in terms of cross browser issues. What I find interesting is if I add padding, then the three columns go beyond my screen width even though padding should be handled inside of the box and not on the outside. This happens when the three columns are already taking up a total of 100% width. Adding a border obviously adds to the total width also, but that's to be expected. I would just not use a total width of 100%. There does seem to be a white line in between the middle and right column in Mozilla, but when I shift my screen size around it comes and goes. I've had some other quirks with Mozilla so it might not be anything.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Three column layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body { margin:0px; padding:0px; color:#FFF; }
#left { width:33%; position:absolute; top:100px; left:0%; background-color:#333; }
#middle { width:33%; position:absolute; top:100px; left:33%; background-color:#666; }
#right { width:34%; position:absolute; top:100px; left:66%; background-color:#999; }
-->
</style>
</head>
<body>
<div id="left">Text</div>
<div id="middle">Text</div>
<div id="right">Text</div>
</body>
</html>Hey thanks for the code..I am gonna try it out and see how it works..so far it seems to be good.
I was excited when I got to the noodle site thingee and seen that CSS code but if it doesn't work for all browsers then I am skunked...I guess I can also try making the page in Photoshop...but I will work with this code too so thanks a bunch.Spend time to understand CSS; I promise you won't regret it. Life IS EASIER with CSS.
If you haven't already seen it, go to <!-- m --><a class="postlink" href="http://www.csszengarden.com/">http://www.csszengarden.com/</a><!-- m --> and see how CSS can be used to create amazingly beautiful layouts, that could look completely different from one another, still using the same (X)HTML.
(BTW, my own design is under the "minimal" catagory:
<!-- m --><a class="postlink" href="http://www.csszengarden.com/?cssfile=http://www.prism.gatech.edu/~gte207x/zen/notheme.css">http://www.csszengarden.com/?cssfile=ht ... otheme.css</a><!-- m -->)Originally posted by nkaisare
Spend time to understand CSS; I promise you won't regret it. Life IS EASIER with CSS.
If you haven't already seen it, go to <!-- m --><a class="postlink" href="http://www.csszengarden.com/">http://www.csszengarden.com/</a><!-- m --> and see how CSS can be used to create amazingly beautiful layouts, that could look completely different from one another, still using the same (X)HTML.
(BTW, my own design is under the "minimal" catagory:
<!-- m --><a class="postlink" href="http://www.csszengarden.com/?cssfile=http://www.prism.gatech.edu/~gte207x/zen/notheme.css">http://www.csszengarden.com/?cssfile=ht ... otheme.css</a><!-- m -->)
CSS Zen Graden is also hosted at <!-- m --><a class="postlink" href="http://www.mezzoblue.com/">http://www.mezzoblue.com/</a><!-- m --> and those of us Mozilla fans will note that he is the one who is doing the site redesign for Mozilla.org.
CSS Zen Graden has become my number one source of web design ideas. I'm working on doing a complete redesign of my site and I want to use a PHP style sheet switcher, but I also need to make sure my XHTML is done in a way that offers enough flexibility so I can really take advantage of it when I create a new CSS file. I'm about 50% with my code. I might do an attempt at a CSS Zen Garden entry at some point. I finally figured out a unique theme for it, and I think that's the most difficult thing really. Well, with my Photoshop skills, that and making the graphics for it.
They even gave examples, which was cute and all but they gave some incomplete examples. All they had was CSS Styles for one row tables.
I don't understand how to make a CSS table that has, for example three columns or something...could someone please help on that? Thanks.Are you talking about using the actual <table> tag, or just a three column layout?Ummm....Yes, on both accounts...I think.<!-- m --><a class="postlink" href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">http://www.thenoodleincident.com/tutori ... boxes.html</a><!-- m -->
There's a whole section on various layouts. What are you trying to achieve with the table layout format? Just wanting to see if I can show you how what you want is coded.Well..I wanted to use it to put a menu and display content in..I know one isn't supposed to but I see it done on many sites to keep things contained and nice and neat looking..
Anywhoo thanks for the link, I am gonna check ti out.Well..I kinda like the one with the three touching boxes.
The problem is on how to get that code into my HTML page..I tried the ol' copy and paste but ended up with a bunch of code text in the display part of my page...not sure if that is supposed to happen but I guess I will figure it out....maybe....but I am not sure....
(thinks too hard and falls over....)You can read about absolute positioning at
<!-- m --><a class="postlink" href="http://www.w3schools.com/css/tryit.asp?filename=trycss_topleft">http://www.w3schools.com/css/tryit.asp? ... ss_topleft</a><!-- m -->
What position:absolute does is that it REMOVES the element from the document and PLACES it with respect to its parent positioned element (usually browser window). More info:
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme">http://www.w3.org/TR/CSS2/visuren.html# ... ing-scheme</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning">http://www.w3.org/TR/CSS2/visuren.html# ... ositioning</a><!-- m -->
The bare-basics of the touching boxes is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<head>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1">
<title>3-column layout</title>
<style type="text/css">
<!--
/* 150px left col, 500px central col, 150px right col */
body {padding: 0; margin-left: 150px; width: 500px}
div#navigation {position: absolute; left: 0; top: 0;
width: 150px}
div#rightbox {position: absolute; left: 650px; top: 0;
width: 150px}
-->
</style>
</head>
<body>
<p>This is the main content. We would like to keep it in the
central column. For more complex layout, I should use an
enclosing div. But for this example, its not necessary.</p>
<div id="navigation">
This is a navigation bar that appears to the left
</div>
<div id="rightbox">
This is the right-hand box
</div>
</body>
</html>
This is most basic layout. Now you may want to add background, paddings, borders etc. When you do that, things start getting more involved.
For example: if you have a padding of 5px and 1px border to "navigation", the total width of that div will be:
1px border + 5px left padding + 150px width + 5px right padding + 1px border = 162px.
The next complexity is because IE5/Win (but not IE5/Mac or IE6/Win) gets the above model incorrectly. It adds padding (incorrectly) inside the 150px width. Hence, TheNoodleIncident.com example uses a "hack" to feed different values to other browsers and IE5/Win.
Hope this helps
Niket
(Pyro/DaveSW, is there any way to add this in "advanced FAQ" on CSS?)Well, the CSS code I used from that site Spufi gave me doesn't work..I put it in my page and tested it in IE5 and nothing showed. Only some text from the sites example table thingee.
Why can't anything be more simple like instead of a pain in the neck..(sighs)
Anywhoo, thanks for the help Spufi and nkaisare.Please do! Head over to <!-- m --><a class="postlink" href="http://www.webdevfaqs.com/contribute.php">http://www.webdevfaqs.com/contribute.php</a><!-- m --> and submit it as you'd like it to appear, and specify which section you think it would be best suited for. Once we doctor it up to work with our format, we'd love to have new content!Okay..I used your example nkaisare but the little boxes overlap the text in the middle so maybe some tags are needed..nuts....sorry..didn't fully read the div tag thing...I'l figure it out I think.For body, add:
padding: 0;
Default padding of body is applied, resulting in the difference. I have edited my original code; that works now in IE6, Op7.10, and NS7.Originally posted by Dark Dragon
Why can't anything be more simple like instead of a pain in the neck..(sighs)
Actually, tables are in no way any simpler than this 3-column layout. Its just that we are now accustomed to using them.
CSS isn't simple at the begining because there is a learning curve. So far, a (good) WYSIWYG editor that can create good XHTML/CSS based layouts does not exist.
We also need to bear in mind that things that were easy or straightforward with tables may not be so with CSS. On the other hand, things that were not possible (or too difficult) with tables can be done with much more ease with CSS.Yeah..I guess. I tried the CSS Code from that "thenoodleincident" site..so I got the entire CSS Code but when I used it on my page it didn't work..oh well..I suppose I will have to stick to HTML tables or something for now..thanks anyways for your patience and help.The "noodle" link is often linked here when people ask about a three column layout and I kind of assumed it was decent code. I used the full CSS version for the touching three columns and while I got the three columns, I didn't see them touching like I thought they would. Anyway, I went and kicked around a basic three column layout of my own and below is what I came up with. I have no work arounds and I tested it on IE 5.5 and Mozilla 1.4 in Win2K, so I'm not sure just flexible it is in terms of cross browser issues. What I find interesting is if I add padding, then the three columns go beyond my screen width even though padding should be handled inside of the box and not on the outside. This happens when the three columns are already taking up a total of 100% width. Adding a border obviously adds to the total width also, but that's to be expected. I would just not use a total width of 100%. There does seem to be a white line in between the middle and right column in Mozilla, but when I shift my screen size around it comes and goes. I've had some other quirks with Mozilla so it might not be anything.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Three column layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body { margin:0px; padding:0px; color:#FFF; }
#left { width:33%; position:absolute; top:100px; left:0%; background-color:#333; }
#middle { width:33%; position:absolute; top:100px; left:33%; background-color:#666; }
#right { width:34%; position:absolute; top:100px; left:66%; background-color:#999; }
-->
</style>
</head>
<body>
<div id="left">Text</div>
<div id="middle">Text</div>
<div id="right">Text</div>
</body>
</html>Hey thanks for the code..I am gonna try it out and see how it works..so far it seems to be good.
I was excited when I got to the noodle site thingee and seen that CSS code but if it doesn't work for all browsers then I am skunked...I guess I can also try making the page in Photoshop...but I will work with this code too so thanks a bunch.Spend time to understand CSS; I promise you won't regret it. Life IS EASIER with CSS.
If you haven't already seen it, go to <!-- m --><a class="postlink" href="http://www.csszengarden.com/">http://www.csszengarden.com/</a><!-- m --> and see how CSS can be used to create amazingly beautiful layouts, that could look completely different from one another, still using the same (X)HTML.
(BTW, my own design is under the "minimal" catagory:
<!-- m --><a class="postlink" href="http://www.csszengarden.com/?cssfile=http://www.prism.gatech.edu/~gte207x/zen/notheme.css">http://www.csszengarden.com/?cssfile=ht ... otheme.css</a><!-- m -->)Originally posted by nkaisare
Spend time to understand CSS; I promise you won't regret it. Life IS EASIER with CSS.
If you haven't already seen it, go to <!-- m --><a class="postlink" href="http://www.csszengarden.com/">http://www.csszengarden.com/</a><!-- m --> and see how CSS can be used to create amazingly beautiful layouts, that could look completely different from one another, still using the same (X)HTML.
(BTW, my own design is under the "minimal" catagory:
<!-- m --><a class="postlink" href="http://www.csszengarden.com/?cssfile=http://www.prism.gatech.edu/~gte207x/zen/notheme.css">http://www.csszengarden.com/?cssfile=ht ... otheme.css</a><!-- m -->)
CSS Zen Graden is also hosted at <!-- m --><a class="postlink" href="http://www.mezzoblue.com/">http://www.mezzoblue.com/</a><!-- m --> and those of us Mozilla fans will note that he is the one who is doing the site redesign for Mozilla.org.
CSS Zen Graden has become my number one source of web design ideas. I'm working on doing a complete redesign of my site and I want to use a PHP style sheet switcher, but I also need to make sure my XHTML is done in a way that offers enough flexibility so I can really take advantage of it when I create a new CSS file. I'm about 50% with my code. I might do an attempt at a CSS Zen Garden entry at some point. I finally figured out a unique theme for it, and I think that's the most difficult thing really. Well, with my Photoshop skills, that and making the graphics for it.