Greetings,
I have a class called "header" and I am trying to give it a touch of extra space between it and the next line.
All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class.
Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer?
Thanks in advance..Why not give it a bottom margin? margin-bottom:1.5em;Hmmmm, that doesn't work. Here is the class:
.header {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
font-weight: bold;
text-decoration: underline;
font-size: 13px;
margin-bottom:2em
}
The header is just one line of text, with another line of text (non-header class) directly under it. I even tried to go up to 50em but still no result....To what HTML element type are you applying this class?the <font> element.
<td width="70%" class="body">
<font class="header">HEADER GOES HERE</font><br>
Body text starts here.....
</td>Originally posted by niemie
the <font> element.
<td width="70%" class="body">
<font class="header">HEADER GOES HERE</font><br>
Body text starts here.....
</td>
Aha, since font is an inline element by default, I think you need to add display: block; to your header class, perhaps, for things like margin to work?
PS: <span> would probably be more appropriate that <font> here.
PPS: In fact, wouldn't it make more sense to make this a h1, h2, h3, or h4 tag?Sorry, obviously I am a newbie.
So if I do header tags, I still have to control the spacing with a margin or something in CSS, right?Sure, you could do something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
table {
border-collapse: collapse;
border: 2px solid black;
}
td {
margin: 0;
padding: 1em;
}
.header {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
font-weight: bold;
text-decoration: underline;
font-size: 13px;
margin-bottom:2em
}
</style>
</head>
<body>
<table>
<tr>
<td>
<h1 class=header>Header Text</h1>
<p>This is the body text of the table cell</p>
</td>
</tr>
</table>
</body>
</html>
However, I suspect the "semantically correct HTML" police may start suspecting you of using tables for formatting purposes instead of simply the presentation of tabular material.
(Hard to tell yet without seeing what you're really trying to do.)Yes, you should be using header tags, since it is a header. And since, by default, headers are block level elements, all you need to do is then add a bottom margin.
May I ask why you are using the depreceated <font> tag, and incorrectly using tables when you obviously seem to know CSS? They are so inefficient. Headers shouldn't be in body cells. Period. If it's tabular data, you should be using table headers, <th> for the top row. Otherwise it's incorrect usage of tables.....because I don't really know CSS - I get the general idea from what I have taught myself but I have nowhere near the knowledge of it to control layout - at least not yet.
Thanks for the help guys! Much appreciated.I see now that is was just my use of the font element vs what it should have been, the header element.
Let me ask this - is there a way to have an image in every "header" class? In this case it's just a little bullet type image that I want at the end of the header with a space between the words and header? How do you do this with CSS?Set the image as a background. If you want it on the left, you'd do something like:
.header {
background: url('bullet.gif') top left no-repeat;
padding-left:30px;
}
You'd put padding on the left so that it pushes over the text, and so looks like there's an image next to it.
I have a class called "header" and I am trying to give it a touch of extra space between it and the next line.
All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class.
Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer?
Thanks in advance..Why not give it a bottom margin? margin-bottom:1.5em;Hmmmm, that doesn't work. Here is the class:
.header {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
font-weight: bold;
text-decoration: underline;
font-size: 13px;
margin-bottom:2em
}
The header is just one line of text, with another line of text (non-header class) directly under it. I even tried to go up to 50em but still no result....To what HTML element type are you applying this class?the <font> element.
<td width="70%" class="body">
<font class="header">HEADER GOES HERE</font><br>
Body text starts here.....
</td>Originally posted by niemie
the <font> element.
<td width="70%" class="body">
<font class="header">HEADER GOES HERE</font><br>
Body text starts here.....
</td>
Aha, since font is an inline element by default, I think you need to add display: block; to your header class, perhaps, for things like margin to work?
PS: <span> would probably be more appropriate that <font> here.
PPS: In fact, wouldn't it make more sense to make this a h1, h2, h3, or h4 tag?Sorry, obviously I am a newbie.
So if I do header tags, I still have to control the spacing with a margin or something in CSS, right?Sure, you could do something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
table {
border-collapse: collapse;
border: 2px solid black;
}
td {
margin: 0;
padding: 1em;
}
.header {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
font-weight: bold;
text-decoration: underline;
font-size: 13px;
margin-bottom:2em
}
</style>
</head>
<body>
<table>
<tr>
<td>
<h1 class=header>Header Text</h1>
<p>This is the body text of the table cell</p>
</td>
</tr>
</table>
</body>
</html>
However, I suspect the "semantically correct HTML" police may start suspecting you of using tables for formatting purposes instead of simply the presentation of tabular material.
(Hard to tell yet without seeing what you're really trying to do.)Yes, you should be using header tags, since it is a header. And since, by default, headers are block level elements, all you need to do is then add a bottom margin.May I ask why you are using the depreceated <font> tag, and incorrectly using tables when you obviously seem to know CSS? They are so inefficient. Headers shouldn't be in body cells. Period. If it's tabular data, you should be using table headers, <th> for the top row. Otherwise it's incorrect usage of tables.
....because I don't really know CSS - I get the general idea from what I have taught myself but I have nowhere near the knowledge of it to control layout - at least not yet.Thanks for the help guys! Much appreciated.I see now that is was just my use of the font element vs what it should have been, the header element.
Let me ask this - is there a way to have an image in every "header" class? In this case it's just a little bullet type image that I want at the end of the header with a space between the words and header? How do you do this with CSS?Set the image as a background. If you want it on the left, you'd do something like:
.header {
background: url('bullet.gif') top left no-repeat;
padding-left:30px;
}
You'd put padding on the left so that it pushes over the text, and so looks like there's an image next to it.