Hello,
I have a couple of questions re the <div> tag and its uses, layout with CSS, and positioning that I hope someone would care to answer. Also, sorry if you've seen these questions before.
1. When you use <div> for layout, I haven't yet seen an example where there are <div> containers that are "independent" of each other. By that I mean that they aren't nested within each other. Why should you do that, and are there instances where it's better to not nest them?
2. Below is something I'm working on. I've crammed alot of font information into each identifier. Is this the way to do it or are there better ways. Somehow it feels like I'm doing too much work.
3. Also, I'm trying to create a layout with a banner area, a left and right column and a main area. The columns and the main area are supposed to be separated by a 0.02cm wide crack, forming a border. Are therer better ways to do this? (I am sure there is!) I noticed something strange. On one machine with IE6, for the #mainbackgr, I had the top set to 3.1cm and there was no crack in the vertical direction. At home however, also with IE6 there is a crack, which is why I know have the top set to 3.02cm. Could this happen or am I only imagining things?
Thanks to anyone who would care to take the time to answer my questions!
Peter
#title{background-color:#E0E0E0;
font-family:times;
font-size:400%;
color:#696969;
letter-spacing:1cm;
text-indent:3cm;}
#subtitle{background-color:#E0E0E0;
font-family:times;
font-size:160%;
font-variant:small-caps;
color:#696969;
letter-spacing:0.1cm;
text-indent:4cm;}
#leftbackgr{background-color:#E0E0E0;
color:#696969;
width:4cm;}
#mainbackgr{background-color:#E0E0E0;
position:absolute;
top:3.02cm;
left:4.02cm;
margin-right:0cm;
color:#696969;}
#rightbackgr{background-color:#E0E0E0;
position:absolute;
top:3.02cm;
right:4cm;
color:#696969;}
<body>
<div id="title">heading</div>
<div id="subtitle">slogan here<hr /></div>
<div id="leftbackgr">Bla bla bla bla bla bla bla bla bla bla …</div>
<div id="mainbackgr">Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …</div>
</body>Hi,
1. Divs can be nested or independant of each other. In my experience, The "independant" divs are usually absolutely positioned and their function is to create containers where other content will be placed. This is much like what you are doning in the script that you posted: you have made some container divs and you will most likely be populating these divs with content, which may be other divs.
2. Yes, there is a much better way to do this. Check out this link: <!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_font.asp">http://www.w3schools.com/css/css_font.asp</a><!-- m -->
NOTE: Don't forget to include a generic font choice in you declarations. Your css would be better stated as: font-family: "Times New Roman", serif;
3. "em" would be a better choice here....
<head>
<style type="text/css">
h1{
background-color :#E0E0E0;
font-weight: normal;
margin:0;
padding:;
font-family :times;
font-size :4em;
color :#696969;
letter-spacing :1cm;
text-indent :3cm;}
#slogan {
background-color :#E0E0E0;
margin:0 0 3px 0;
border-bottom: 1px solid #333;
font-family :times;
font-size :1.75em;
font-variant :small-caps;
color :#696969;
letter-spacing :0.1cm;
text-indent :4.1cm;}
#main_content{
background-color :#E0E0E0;
position :absolute;
top :6.5em;
left :4.02cm;
margin-right :0cm;
color :#696969;}
#left_content{
position:absolute;
top:6.5em;
background-color :#E0E0E0;
color :#696969;
width :4cm;}
</style>
</head>
<body>
<h1>heading</h1>
<h2 id="slogan">slogan here</h2>
<div id="left_content">Bla bla bla bla bla bla bla bla bla bla …</div>
<div id="main_content">Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …</div>
</body>Thanks alot for your reply, it was really helpful. A couple of follow-ups. How much is "1em"? It looks as if it is some kind of scaling factor but it seems to scale differently depending on the context (if it is font-size, text-indent, etc.) How do you know how much it will scale? Is it just hands-on testing?
I tried out your suggestion and made some modifications. The problem with this is that because of the absolute positioning, as soon as you change the browser window size, the layout becomes all bungled. How would you solve that?
body{background-color:#E0E0E0;
margin:0 0 0 0;}
#bannerfont{font-family:"Times New Roman", serif;
font-size:4em;
color:#696969;
letter-spacing:2.4em;
text-indent:1.75em;}
#subtitlefont{font-size:0.4em;
font-variant:small-caps;
letter-spacing:0.24em;
text-indent:6em;
border-bottom:1px solid #696969;}
#leftlayout{color:#696969;
width:9.5em;
padding-left:5px;
padding-right:5px;}
#mainlayout{color:#696969;
position:absolute;
top:6.45em;
left:9.5em;
right:9.5em;
padding-left:5px;
padding-right:5px;
border-left:1px solid #696969;
border-right:1px solid #696969;}
#rightlayout{color:#696969;
position:absolute;
top:6.45em;
left:60em;}
<body>
<!-- bannerfont and subtitlefont have to be nested-->
<div id="bannerfont">bannertext
<div id="subtitlefont">subtitletext</div>
</div>
<div id="leftlayout">Bla bla bla bla bla bla bla bla bla bla bla bla …</div>
<div id="mainlayout">Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …</div>
<div id="rightlayout">Bla bla bla bla bla bla bla bla bla bla bla bla …</div>
</body>From the pages of "aList apart":
An 鎻簃?is a unit of measurement defined as the point size of the font?2 point type uses a 12 point 鎻簃.?An 鎻簄?is one-half of an 鎻簃.?br />
I see what you were saying about the layout and resizing. Let me know if this one is better. I tested on IE5.2mac, Safari, FF, NN, OP8 and IE6win... All of them seem to like it.
-MikeThanks Hog,
Peter
I have a couple of questions re the <div> tag and its uses, layout with CSS, and positioning that I hope someone would care to answer. Also, sorry if you've seen these questions before.
1. When you use <div> for layout, I haven't yet seen an example where there are <div> containers that are "independent" of each other. By that I mean that they aren't nested within each other. Why should you do that, and are there instances where it's better to not nest them?
2. Below is something I'm working on. I've crammed alot of font information into each identifier. Is this the way to do it or are there better ways. Somehow it feels like I'm doing too much work.
3. Also, I'm trying to create a layout with a banner area, a left and right column and a main area. The columns and the main area are supposed to be separated by a 0.02cm wide crack, forming a border. Are therer better ways to do this? (I am sure there is!) I noticed something strange. On one machine with IE6, for the #mainbackgr, I had the top set to 3.1cm and there was no crack in the vertical direction. At home however, also with IE6 there is a crack, which is why I know have the top set to 3.02cm. Could this happen or am I only imagining things?
Thanks to anyone who would care to take the time to answer my questions!
Peter
#title{background-color:#E0E0E0;
font-family:times;
font-size:400%;
color:#696969;
letter-spacing:1cm;
text-indent:3cm;}
#subtitle{background-color:#E0E0E0;
font-family:times;
font-size:160%;
font-variant:small-caps;
color:#696969;
letter-spacing:0.1cm;
text-indent:4cm;}
#leftbackgr{background-color:#E0E0E0;
color:#696969;
width:4cm;}
#mainbackgr{background-color:#E0E0E0;
position:absolute;
top:3.02cm;
left:4.02cm;
margin-right:0cm;
color:#696969;}
#rightbackgr{background-color:#E0E0E0;
position:absolute;
top:3.02cm;
right:4cm;
color:#696969;}
<body>
<div id="title">heading</div>
<div id="subtitle">slogan here<hr /></div>
<div id="leftbackgr">Bla bla bla bla bla bla bla bla bla bla …</div>
<div id="mainbackgr">Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …</div>
</body>Hi,
1. Divs can be nested or independant of each other. In my experience, The "independant" divs are usually absolutely positioned and their function is to create containers where other content will be placed. This is much like what you are doning in the script that you posted: you have made some container divs and you will most likely be populating these divs with content, which may be other divs.
2. Yes, there is a much better way to do this. Check out this link: <!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_font.asp">http://www.w3schools.com/css/css_font.asp</a><!-- m -->
NOTE: Don't forget to include a generic font choice in you declarations. Your css would be better stated as: font-family: "Times New Roman", serif;
3. "em" would be a better choice here....
<head>
<style type="text/css">
h1{
background-color :#E0E0E0;
font-weight: normal;
margin:0;
padding:;
font-family :times;
font-size :4em;
color :#696969;
letter-spacing :1cm;
text-indent :3cm;}
#slogan {
background-color :#E0E0E0;
margin:0 0 3px 0;
border-bottom: 1px solid #333;
font-family :times;
font-size :1.75em;
font-variant :small-caps;
color :#696969;
letter-spacing :0.1cm;
text-indent :4.1cm;}
#main_content{
background-color :#E0E0E0;
position :absolute;
top :6.5em;
left :4.02cm;
margin-right :0cm;
color :#696969;}
#left_content{
position:absolute;
top:6.5em;
background-color :#E0E0E0;
color :#696969;
width :4cm;}
</style>
</head>
<body>
<h1>heading</h1>
<h2 id="slogan">slogan here</h2>
<div id="left_content">Bla bla bla bla bla bla bla bla bla bla …</div>
<div id="main_content">Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …</div>
</body>Thanks alot for your reply, it was really helpful. A couple of follow-ups. How much is "1em"? It looks as if it is some kind of scaling factor but it seems to scale differently depending on the context (if it is font-size, text-indent, etc.) How do you know how much it will scale? Is it just hands-on testing?
I tried out your suggestion and made some modifications. The problem with this is that because of the absolute positioning, as soon as you change the browser window size, the layout becomes all bungled. How would you solve that?
body{background-color:#E0E0E0;
margin:0 0 0 0;}
#bannerfont{font-family:"Times New Roman", serif;
font-size:4em;
color:#696969;
letter-spacing:2.4em;
text-indent:1.75em;}
#subtitlefont{font-size:0.4em;
font-variant:small-caps;
letter-spacing:0.24em;
text-indent:6em;
border-bottom:1px solid #696969;}
#leftlayout{color:#696969;
width:9.5em;
padding-left:5px;
padding-right:5px;}
#mainlayout{color:#696969;
position:absolute;
top:6.45em;
left:9.5em;
right:9.5em;
padding-left:5px;
padding-right:5px;
border-left:1px solid #696969;
border-right:1px solid #696969;}
#rightlayout{color:#696969;
position:absolute;
top:6.45em;
left:60em;}
<body>
<!-- bannerfont and subtitlefont have to be nested-->
<div id="bannerfont">bannertext
<div id="subtitlefont">subtitletext</div>
</div>
<div id="leftlayout">Bla bla bla bla bla bla bla bla bla bla bla bla …</div>
<div id="mainlayout">Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla …</div>
<div id="rightlayout">Bla bla bla bla bla bla bla bla bla bla bla bla …</div>
</body>From the pages of "aList apart":
An 鎻簃?is a unit of measurement defined as the point size of the font?2 point type uses a 12 point 鎻簃.?An 鎻簄?is one-half of an 鎻簃.?br />
I see what you were saying about the layout and resizing. Let me know if this one is better. I tested on IE5.2mac, Safari, FF, NN, OP8 and IE6win... All of them seem to like it.
-MikeThanks Hog,
Peter