I have seeked out information on the internet via Google and only get incoherent ramblings about box models. The purpose of this post is to introduce the newbie (me in this case!) to what it is and good for?
Here's my questions:
0) What is a very very simple example code of a 3 column layout with header and footer spanning the 3 columns?
1) I'm currently using <div id="blahblah"> in my HTML and #blahblah in my CSS. Is this in wrong (less better than) in comparison to using <div class="blahblah"> and .blahblah ?
2) I'm trying to get a fixed-width on my layout, but whatever I put on the right with position:absolute; and right:0;s tends to stick to the side of the browser window upon resize. How do I make it so when i resize the window it 'sticks' to where I place it? Will box modelling help?
3) How do I create a footer that is at the bottom of all my content? Right now it sticks the bottom of the window and not under the content that is accessible via scrolling.
There is 4 questions to get us started. If anyone has anything else to add, please do. I'd like to hear all your expert enlightenment on this subject!
Brandon0) There is none. Unfortunately, all graphical browsers implement absolute positioning incorrectly. It's supposed to be relative to the containing block, not relative to the window. And this makes getting that header to go all the way across pretty darn difficult.
1) Use "id" for something unique and "class" when you have a bunch of them, just like the words mean in real life.
As to the other questions, you just have to keep playing around with things. But don't over use absolute positioning. For a two column layout I like to absolutely position the menu bar but I make room for it simply by setting the margin of the content block. The ideal is something that will work when your users resize the text.I'm pretty confident that I could create a 3 column static width layout if you'd like me to try. Of course, there's no guarantee that it will be simple and it will almost certainly use absolute positioning. I could probably work in a footer as well.
In the mean time, here is a .css file from the latest site that I'm working on. You probably won't be able to tell what the page looks like, but that's not the point of me uploading it.
You should see that I use classes for everything, including elements that I want to be unique. This is so that I can use id's for JavaScript and also so that there are no errors if I accidentally use an id that is used for something else.
This .css file (saved as a .txt for upload) when used with the .html document creates a 3 column (2 fixed width 1 fluid) layout with two 100% width headers.Box Model Basics
The CSS box model, according to the web standards is as follows:
The width of an element as specified in CSS
PLUS
The padding of the element (both left and right)
PLUS
The margins of the element (both left and right)
PLUS
The borders of the element (both left and right).
EXAMPLE:
#block {
width: 100px;
height: 200px;
padding: 10px;
margin: 10px;
border: 1px solid black;
}
Width = width + (padding * 2) + (margin * 2) + (border * 2)
Width = 100px + (10px + 10px) + (10px + 10px) + (1px + 1px)
Width = 100px + 20px + 20px + 2px
Width = 142px
The same sort of philosophy holds true to calculate the height of an element.
See my next post about a header-footer, 3-column layout using absolute positioning.Originally posted by lavalamp
You should see that I use classes for everything, including elements that I want to be unique. This is so that I can use id's for JavaScript and also so that there are no errors if I accidentally use an id that is used for something else.You'll have to excuse me. I don't see the benefit to this - perhaps you could explain...
I was testing in Netscape 4.79 and it wasn't working so I changed all of the id's to classes. It turned out to be some faulty code which I fixed but I just kept all of the classes instead of the id's, it doesn't hurt so I just stick with it.Ok, you had just made it sound like there was some beneficial reason to do so, when in fact, it would be the opposite.Originally posted by pyro
Ok, you had just made it sound like there was some beneficial reason to do so, when in fact, it would be the opposite.
What's wrong with only using classes? They can do everything that id's can?Originally posted by Charles
1) Use "id" for something unique and "class" when you have a bunch of them, just like the words mean in real life.The code attached works in the following browsers:
Windows 2000
Internet Explorer 6.0
Netscape 7.01
Mozilla Firebird 0.7
Opera 7.20
Mac OS 9.1
Mozilla 1.2.1
Internet Explorer 5.0
Netscape 7.02
NOTE: Netscape 4.x chokes on it. Here's what you'd have to do.
1. Place all the CSS Positioning styles (CSS 2.0) in a style sheet imported the @import method located in the <head> of the HTML document:
<style type="text/css">
<!--
@import "url/to/stylesheet2.css";
-->
</style>
2. Then place CSS 1.0 styles in a style sheet imported via the <link> tag:
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"url/to/stylesheet1.css" />
Netscape and Internet Explorer versions 4.x do not import style sheets using the @import method. The only exception is Internet Explorer 4.5 for the Mac. It does recognize @import and gets the style sheet, but it gets the CSS box model wrong (more on that later).
Browsers that support @import style sheets
IE 5.x and 6 / PC
IE 5.x / Mac
NS 6.0+ for PC and Mac
Mozilla 1.0+ for PC and Mac
Opera 5?, 6 for PC and Mac, and 7 for PC.
Mozilla Firebird for PC and Mac
Safari for Mac OS X
... basically any browser released after year 2000.
Internet Explorer box model bug
Pertains to: IE 5 and 5.5 for the PC; IE 4.5 for the Mac.
AND IE 6.0 for PC if you are working in quirks mode (no valid doctype or characterset <meta> tag), and IE 5.0 /Mac if in quirks mode.
Details on the bug: IE will absorb padding, margins, and borders into the width of an element specified in CSS.
The #block example I used above would only be 100 pixels wide, regardless of the padding, margins and borders you give to an element.
The workaround
<div id="wrapper">
<div id="innerBox"> </div>
</div>
In CSS:
#wrapper {
/*
Set the width of the element here,
along with the position. You may
also set common properties like
color, font-family, etc.
DO NOT PLACE padding:, margin:
OR border: PROPERTIES HERE
*/
}
#innerBox {
/*
Place padding:, margin:, and
border: declarations here. You
certainly can set other properties
like color, font-family, but you did
that in the wrapper DIV's
properties.
*/
}But what's bad or wrong with using classes instead of id's? If it violated the standards or affected handicapped users I could understand, but it doesn't.
The only reason that I can see for why id's exist is for use with JavaScript, which is all that I use them for. They could be useful for when you need to apply styles to only one element when very specific selectors and classes won't work I suppose, but I have never come accross that before whan I have been creating my styles.IDs are usefull if you are not doing the upkeep on a page.
If you set the layout styles in IDs, they can only be used once on a page. That way someone performing maintenance on the site can accidentally use the ID when placing content in the main content area and it won't take on the layout properties that create the skeleton of a page. This will only work if the accidental instance of the ID comes AFTER the intended instance of the ID in the HTML document.
The other reason: When you go back to your code months from now, both HTML and CSS, you know that IDs are only used once and that you can reuse classes. I typically use IDs when creating the basic layout of the page. If there is a need (or a desire) to have a style instance in more than one tag, I'll put those style declarations in a class.
It all boils down to how anal-retentive you want to be
Back to BrandonL's question
See <!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->
Read every darn article there that you can. Also see <!-- m --><a class="postlink" href="http://www.w3schools.com/">http://www.w3schools.com/</a><!-- m --> for beginning tutorials.I always use ID's, unless I come across the bridge (figure of speech) where a particular style needs to be given to more than one element.
I hope that made sense?
Here's my questions:
0) What is a very very simple example code of a 3 column layout with header and footer spanning the 3 columns?
1) I'm currently using <div id="blahblah"> in my HTML and #blahblah in my CSS. Is this in wrong (less better than) in comparison to using <div class="blahblah"> and .blahblah ?
2) I'm trying to get a fixed-width on my layout, but whatever I put on the right with position:absolute; and right:0;s tends to stick to the side of the browser window upon resize. How do I make it so when i resize the window it 'sticks' to where I place it? Will box modelling help?
3) How do I create a footer that is at the bottom of all my content? Right now it sticks the bottom of the window and not under the content that is accessible via scrolling.
There is 4 questions to get us started. If anyone has anything else to add, please do. I'd like to hear all your expert enlightenment on this subject!
Brandon0) There is none. Unfortunately, all graphical browsers implement absolute positioning incorrectly. It's supposed to be relative to the containing block, not relative to the window. And this makes getting that header to go all the way across pretty darn difficult.
1) Use "id" for something unique and "class" when you have a bunch of them, just like the words mean in real life.
As to the other questions, you just have to keep playing around with things. But don't over use absolute positioning. For a two column layout I like to absolutely position the menu bar but I make room for it simply by setting the margin of the content block. The ideal is something that will work when your users resize the text.I'm pretty confident that I could create a 3 column static width layout if you'd like me to try. Of course, there's no guarantee that it will be simple and it will almost certainly use absolute positioning. I could probably work in a footer as well.
In the mean time, here is a .css file from the latest site that I'm working on. You probably won't be able to tell what the page looks like, but that's not the point of me uploading it.
You should see that I use classes for everything, including elements that I want to be unique. This is so that I can use id's for JavaScript and also so that there are no errors if I accidentally use an id that is used for something else.
This .css file (saved as a .txt for upload) when used with the .html document creates a 3 column (2 fixed width 1 fluid) layout with two 100% width headers.Box Model Basics
The CSS box model, according to the web standards is as follows:
The width of an element as specified in CSS
PLUS
The padding of the element (both left and right)
PLUS
The margins of the element (both left and right)
PLUS
The borders of the element (both left and right).
EXAMPLE:
#block {
width: 100px;
height: 200px;
padding: 10px;
margin: 10px;
border: 1px solid black;
}
Width = width + (padding * 2) + (margin * 2) + (border * 2)
Width = 100px + (10px + 10px) + (10px + 10px) + (1px + 1px)
Width = 100px + 20px + 20px + 2px
Width = 142px
The same sort of philosophy holds true to calculate the height of an element.
See my next post about a header-footer, 3-column layout using absolute positioning.Originally posted by lavalamp
You should see that I use classes for everything, including elements that I want to be unique. This is so that I can use id's for JavaScript and also so that there are no errors if I accidentally use an id that is used for something else.You'll have to excuse me. I don't see the benefit to this - perhaps you could explain...
I was testing in Netscape 4.79 and it wasn't working so I changed all of the id's to classes. It turned out to be some faulty code which I fixed but I just kept all of the classes instead of the id's, it doesn't hurt so I just stick with it.Ok, you had just made it sound like there was some beneficial reason to do so, when in fact, it would be the opposite.Originally posted by pyro Ok, you had just made it sound like there was some beneficial reason to do so, when in fact, it would be the opposite.
What's wrong with only using classes? They can do everything that id's can?Originally posted by Charles
1) Use "id" for something unique and "class" when you have a bunch of them, just like the words mean in real life.The code attached works in the following browsers:
Windows 2000
Internet Explorer 6.0
Netscape 7.01
Mozilla Firebird 0.7
Opera 7.20
Mac OS 9.1
Mozilla 1.2.1
Internet Explorer 5.0
Netscape 7.02
NOTE: Netscape 4.x chokes on it. Here's what you'd have to do.
1. Place all the CSS Positioning styles (CSS 2.0) in a style sheet imported the @import method located in the <head> of the HTML document:
<style type="text/css">
<!--
@import "url/to/stylesheet2.css";
-->
</style>
2. Then place CSS 1.0 styles in a style sheet imported via the <link> tag:
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"url/to/stylesheet1.css" />
Netscape and Internet Explorer versions 4.x do not import style sheets using the @import method. The only exception is Internet Explorer 4.5 for the Mac. It does recognize @import and gets the style sheet, but it gets the CSS box model wrong (more on that later).
Browsers that support @import style sheets
IE 5.x and 6 / PC
IE 5.x / Mac
NS 6.0+ for PC and Mac
Mozilla 1.0+ for PC and Mac
Opera 5?, 6 for PC and Mac, and 7 for PC.
Mozilla Firebird for PC and Mac
Safari for Mac OS X
... basically any browser released after year 2000.
Internet Explorer box model bug
Pertains to: IE 5 and 5.5 for the PC; IE 4.5 for the Mac.
AND IE 6.0 for PC if you are working in quirks mode (no valid doctype or characterset <meta> tag), and IE 5.0 /Mac if in quirks mode.
Details on the bug: IE will absorb padding, margins, and borders into the width of an element specified in CSS.
The #block example I used above would only be 100 pixels wide, regardless of the padding, margins and borders you give to an element.
The workaround
<div id="wrapper">
<div id="innerBox"> </div>
</div>
In CSS:
#wrapper {
/*
Set the width of the element here,
along with the position. You may
also set common properties like
color, font-family, etc.
DO NOT PLACE padding:, margin:
OR border: PROPERTIES HERE
*/
}
#innerBox {
/*
Place padding:, margin:, and
border: declarations here. You
certainly can set other properties
like color, font-family, but you did
that in the wrapper DIV's
properties.
*/
}But what's bad or wrong with using classes instead of id's? If it violated the standards or affected handicapped users I could understand, but it doesn't.
The only reason that I can see for why id's exist is for use with JavaScript, which is all that I use them for. They could be useful for when you need to apply styles to only one element when very specific selectors and classes won't work I suppose, but I have never come accross that before whan I have been creating my styles.IDs are usefull if you are not doing the upkeep on a page.
If you set the layout styles in IDs, they can only be used once on a page. That way someone performing maintenance on the site can accidentally use the ID when placing content in the main content area and it won't take on the layout properties that create the skeleton of a page. This will only work if the accidental instance of the ID comes AFTER the intended instance of the ID in the HTML document.
The other reason: When you go back to your code months from now, both HTML and CSS, you know that IDs are only used once and that you can reuse classes. I typically use IDs when creating the basic layout of the page. If there is a need (or a desire) to have a style instance in more than one tag, I'll put those style declarations in a class.
It all boils down to how anal-retentive you want to be
Back to BrandonL's question
See <!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->
Read every darn article there that you can. Also see <!-- m --><a class="postlink" href="http://www.w3schools.com/">http://www.w3schools.com/</a><!-- m --> for beginning tutorials.I always use ID's, unless I come across the bridge (figure of speech) where a particular style needs to be given to more than one element.
I hope that made sense?