Okay, so I've seen many sources that say for layouts, CSS is better than tables. Here's a test:
Part of a page I'm building is text with multiple left margins all set within a colored box (that is, a solid-color box, not a border). In other words:
A heading, bold, underlined, left justified.
Under that, a sub-heading, bold, set in (to the right) x pixels.
Under that, a paragraph of text all aligned set in again (to the right) x + x pixels.
So, this is probably laughably simple, but how would I do this AND if it's not apparent, why is this better than using tables?
Thanks a bunch!To begin with, there are a lot of articles (<!-- m --><a class="postlink" href="http://www.keithjbrown.co.uk/vworks/design/design_2.shtml">http://www.keithjbrown.co.uk/vworks/des ... gn_2.shtml</a><!-- m -->) on CSS vs. Tables (<!-- m --><a class="postlink" href="http://www.saila.com/usage/layouts/cssvtables.shtml">http://www.saila.com/usage/layouts/cssvtables.shtml</a><!-- m -->), but my favorite is the one which says, "Why Tables for Layout are Stupid (<!-- m --><a class="postlink" href="http://www.hotdesign.com/seybold/index.html">http://www.hotdesign.com/seybold/index.html</a><!-- m -->)."<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Conforming HTML 4.01 Transitional Template
</title>
<style type="text/css">
#thebox {
width: 500px;
height: 500px;
background: #ffc;
font-family: arial;
}
#thebox h1 {
font-size: 1.5em;
font-weight: bold;
text-decoration: underline;
}
#thebox h2 {
font-size: 1.2em;
font-weight: bold;
margin-left: 20px;
}
#thebox p {
margin: 0 40px;
text-align: justify;
font-family: "times new roman";
}
</style>
</head>
<body>
<div id="thebox">
<h1>A heading</h1>
<h2>a sub-heading</h2>
<p>
Under that, a paragraph of text all aligned set in again (to the
right) x + x pixels.
</p>
</div>
</body>
</html>
Is it apparent?Yes, it is apparent. Thank you, ray326!
Three questions, please:
1) Why is the <div> tag necessary?
2) I want the heading and sub-heading to be the same size as the text (sorry, I should have not said "heading" and "sub-heading"). I know I can give the font-size a value of 12pt but if I want to use <h1> and <h2> elsewhere then this won't work. What can I use instead of <h1> and <h2> to achieve this?
3) What is "#thebox" class? I've never heard of it (although that should come as no suprise).myrrh, to answer your second question:
You can (and should) still use h1 and h2 if they are headings, regardless of the size you want them to have. If you want one h1 to be a different size than the other, just give it a class, like so:
<h1 class="a_header"></h1>
<h1 class="another_header"></h1>
... and then define the classes in your stylesheet:
h1.a_header { font-size: 1em; }
h1.another_header { font-size: 1.5em; }
That's one way to do it.Originally posted by myrrh
1) Why is the <div> tag necessary?
The <div> tag is necessary to modify the layout of the page; it has no semantic meaning, unless text is placed inside of it (though you should be placing text in <p> tags), and therefore you can use it to make the site more aesthetically (visually) pleasing. It is there to place where its contents (child elements and text blocks) are placed. The CSS is what modifies its styles (both location and formatting).
Originally posted by myrrh
3) What is "#thebox" class? I've never heard of it (although that should come as no suprise).
It is not a class, but a reference to the ID of a DIV. <div id="thebox"> can be referred to specifically in CSS code with the "#thebox." This way, it will only modify that specific box. You could use a class, but that is not necessary as you only need one "thebox" containment division (<div>).You've already got some great answers so I'll just sum up.
1. The div is there to be the box you wanted.
2. Then you set the font-size values to be the same in the h1 and h2 rules.
3. #thebox is an id. There will only be one element with a given id value on a page. If it needed to be reused to lay out several boxes on the page then you could use the class .thebox as the selector.
Part of a page I'm building is text with multiple left margins all set within a colored box (that is, a solid-color box, not a border). In other words:
A heading, bold, underlined, left justified.
Under that, a sub-heading, bold, set in (to the right) x pixels.
Under that, a paragraph of text all aligned set in again (to the right) x + x pixels.
So, this is probably laughably simple, but how would I do this AND if it's not apparent, why is this better than using tables?
Thanks a bunch!To begin with, there are a lot of articles (<!-- m --><a class="postlink" href="http://www.keithjbrown.co.uk/vworks/design/design_2.shtml">http://www.keithjbrown.co.uk/vworks/des ... gn_2.shtml</a><!-- m -->) on CSS vs. Tables (<!-- m --><a class="postlink" href="http://www.saila.com/usage/layouts/cssvtables.shtml">http://www.saila.com/usage/layouts/cssvtables.shtml</a><!-- m -->), but my favorite is the one which says, "Why Tables for Layout are Stupid (<!-- m --><a class="postlink" href="http://www.hotdesign.com/seybold/index.html">http://www.hotdesign.com/seybold/index.html</a><!-- m -->)."<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Conforming HTML 4.01 Transitional Template
</title>
<style type="text/css">
#thebox {
width: 500px;
height: 500px;
background: #ffc;
font-family: arial;
}
#thebox h1 {
font-size: 1.5em;
font-weight: bold;
text-decoration: underline;
}
#thebox h2 {
font-size: 1.2em;
font-weight: bold;
margin-left: 20px;
}
#thebox p {
margin: 0 40px;
text-align: justify;
font-family: "times new roman";
}
</style>
</head>
<body>
<div id="thebox">
<h1>A heading</h1>
<h2>a sub-heading</h2>
<p>
Under that, a paragraph of text all aligned set in again (to the
right) x + x pixels.
</p>
</div>
</body>
</html>
Is it apparent?Yes, it is apparent. Thank you, ray326!
Three questions, please:
1) Why is the <div> tag necessary?
2) I want the heading and sub-heading to be the same size as the text (sorry, I should have not said "heading" and "sub-heading"). I know I can give the font-size a value of 12pt but if I want to use <h1> and <h2> elsewhere then this won't work. What can I use instead of <h1> and <h2> to achieve this?
3) What is "#thebox" class? I've never heard of it (although that should come as no suprise).myrrh, to answer your second question:
You can (and should) still use h1 and h2 if they are headings, regardless of the size you want them to have. If you want one h1 to be a different size than the other, just give it a class, like so:
<h1 class="a_header"></h1>
<h1 class="another_header"></h1>
... and then define the classes in your stylesheet:
h1.a_header { font-size: 1em; }
h1.another_header { font-size: 1.5em; }
That's one way to do it.Originally posted by myrrh
1) Why is the <div> tag necessary?
The <div> tag is necessary to modify the layout of the page; it has no semantic meaning, unless text is placed inside of it (though you should be placing text in <p> tags), and therefore you can use it to make the site more aesthetically (visually) pleasing. It is there to place where its contents (child elements and text blocks) are placed. The CSS is what modifies its styles (both location and formatting).
Originally posted by myrrh
3) What is "#thebox" class? I've never heard of it (although that should come as no suprise).
It is not a class, but a reference to the ID of a DIV. <div id="thebox"> can be referred to specifically in CSS code with the "#thebox." This way, it will only modify that specific box. You could use a class, but that is not necessary as you only need one "thebox" containment division (<div>).You've already got some great answers so I'll just sum up.
1. The div is there to be the box you wanted.
2. Then you set the font-size values to be the same in the h1 and h2 rules.
3. #thebox is an id. There will only be one element with a given id value on a page. If it needed to be reused to lay out several boxes on the page then you could use the class .thebox as the selector.