Table Headers

**Austin Klei** · 03-06-2010, 05:49 PM

I need help with my table headers. Like in this screenshot:
http://img13.imageshack.us/img13/8553/textxj.png

The headers (circled in red) i want to stay the same when i change the text below it. Note that this is a table setup thing. I'm defining the headers using css. Heres my whole source code:

Code:

<head>
<title>Newsletter - March 2010</title>
<style type="text/css">
body {
background:url("http://cinderwick.ca/files/etc/diagonals.jpg") #000000;
background-attachment: fixed;
background-repeat: no-repeat;
color: #FFFFFF;
}

#rowleft {
width: 10%;
}

#mainheadtext {
color: red;
font-weight: bolder;
font-size: 20px;
}

#topheader {
background:url("http://img138.imageshack.us/img138/2200/gametitle.png");
background-position: center;
background-repeat: no-repeat;
background-attachment: inherit;
color: white;
font-size: 20px;
height: 5%;
width: 50%;
}
</style>
</head>
<body>
<div align="center">
<img src="http://img233.imageshack.us/img233/1626/cream1.png">
<table border="1" bordercolor="#FFCC00" style="background-color:#trans" width="1319" height="10%" cellpadding="3" cellspacing="1">
	<tr id="mainheadtext">
		<td><div align="center">March Newsletter</div></td>
	</tr>
	<tr>
		<td><div align="center">The First Soldiers of Honor Newsletter</div></td>
	</tr>
</table>
<table border="1" bordercolor="#0000FF" style="background-color:#transparent" width="1312" height="15%" cellpadding="3" cellspacing="1">
	<tr id="topheader">
		<td><div align="center">Introduction</div></td>
	</tr>
	<tr>
		<td><div align="left">Hello Soldiers,</div>
<div align="center">This is the official Soldiers of Honor Newsletter. Which is meant to keep you updated on many new things happening at the soh forums, and new polls! You will recieve these newsletters monthly unless otherwise an issue comes up. Want your article in it? Just PM Aerotoxin or Darkfire on the <u>forumwise</u> website! We are working on the unsubscribe codes.</td>
	</tr>
</table>
<table border="1" bordercolor="#0000FF" style="background-color:#transparent" width="1312" height="15%" cellpadding="3" cellspacing="1">
	<tr id="topheader">
		<td><div align="center">Featured News</div></td>
	</tr>
	<tr>
		<td>Just recently, our activity has become extra high! We are still recruiting as always. Keep up the good work guys!</td>
	</tr>
</table>
<table border="1" bordercolor="#0000FF" style="background-color:#transparent" width="1312" height="15%" cellpadding="3" cellspacing="1">
	<tr id="topheader">
		<td><div align="center">Council Voting</div></td>
		<td><div align="center">TESTlign2</div></td>
	</tr>
	<tr>
		<td>As most of us know, it is time for the battles to start, and many other events. Our practices are back, etc. One thing i would like to focus on is practices. We will hold practices every saturday unless otherwise told so.</td>
		<td>As most of us know, it is time for the battles to start, and many other events. Our practices are back, etc. One thing i would like to focus on is practices. We will hold practices every saturday unless otherwise told so.</td>
	</tr>
</table>
</div>
</body>

But if i changed the text below either of the headers, it would always cut off a part, and one side would get more of it.

Please help.

**stringcugu** · 03-07-2010, 08:00 AM

width="100%"

<style type="text/css">
body {
background:url("http://cinderwick.ca/files/etc/diagonals.jpg") #000000;
background-attachment: fixed;
background-repeat: no-repeat;
color: #FFFFFF;
}
#rowleft {
width: 10%;
}
#mainheadtext {
color: red;
font-weight: bolder;
font-size: 20px;
}
#topheader {
background:url("http://img138.imageshack.us/img138/2200/gametitle.png");
background-position: center;
background-repeat: no-repeat;
background-attachment: inherit;
color: white;
font-size: 20px;
height: 5%;
width: 50%;
}
</style>
</head>
<body>
<div align="center">
<img src="http://img233.imageshack.us/img233/1626/cream1.png">
<table border="1" bordercolor="#FFCC00" style="background-color:#trans" width="100%" height="10%" cellpadding="3" cellspacing="1">
<tr id="mainheadtext">
<td><div align="center">March Newsletter</div></td>
</tr>
<tr>
<td><div align="center">The First Soldiers of Honor Newsletter</div></td>
</tr>
</table>
<table border="1" bordercolor="#0000FF" style="background-color:#transparent" width="100%" height="15%" cellpadding="3" cellspacing="1">
<tr id="topheader">
<td><div align="center">Introduction</div></td>
</tr>
<tr>
<td><div align="left">Hello Soldiers,</div>
<div align="center">This is the official Soldiers of Honor Newsletter. Which is meant to keep you updated on many new things happening at the soh forums, and new polls! You will recieve these newsletters monthly unless otherwise an issue comes up. Want your article in it? Just PM Aerotoxin or Darkfire on the <u>forumwise</u> website! We are working on the unsubscribe codes.</td>
</tr>
</table>
<table border="1" bordercolor="#0000FF" style="background-color:#transparent" width="100%" height="15%" cellpadding="3" cellspacing="1">
<tr id="topheader">
<td><div align="center">Featured News</div></td>
</tr>
<tr>
<td>Just recently, our activity has become extra high! We are still recruiting as always. Keep up the good work guys!</td>
</tr>
</table>
<table border="1" bordercolor="#0000FF" style="background-color:#transparent" width="100%" height="15%" cellpadding="3" cellspacing="1">
<tr id="topheader">
<td><div align="center">Council Voting</div></td>
<td><div align="center">TESTlign2</div></td>
</tr>
<tr>
<td>As most of us know, it is time for the battles to start, and many other events. Our practices are back, etc. One thing i would like to focus on is practices. We will hold practices every saturday unless otherwise told so.</td>
<td>As most of us know, it is time for the battles to start, and many other events. Our practices are back, etc. One thing i would like to focus on is practices. We will hold practices every saturday unless otherwise told so.</td>
</tr>
</table>
</div>

**Austin Klei** · 03-07-2010, 04:21 PM

Problem with that code:

I changed the text, the ends got bigger like this:

http://img707.imageshack.us/img707/8084/editee.png

I want the two heads in it (the background behind the text like council voting, testlign2.

I want it to stay EXACTLY the same header background like this:

http://img13.imageshack.us/img13/8553/textxj.png

Where its a set width, and the text inside it, doesnt decide it.

**stringcugu** · 03-08-2010, 09:18 AM

get a image of that size
your image to big
get one half the size for the 2 tables

<style type="text/css">
body {
background:url("http://cinderwick.ca/files/etc/diagonals.jpg") #000000;
background-attachment: fixed;
background-repeat: no-repeat;
color: #FFFFFF;
}
#rowleft {
width: 10%;
}
#mainheadtext {
color: red;
font-weight: bolder;
font-size: 20px;
}
#topheader {
background:url("http://img138.imageshack.us/img138/2200/gametitle.png");
background-position: center;
background-repeat: no-repeat;
background-attachment: inherit;
color: white;
font-size: 20px;
height: 5%;
width: 50%;
}
</style>
</head>
<body>
<div align="center">
<img src="http://img233.imageshack.us/img233/1626/cream1.png">
<table border="1" bordercolor="#FFCC00" style="background-color:#trans" width="100%" height="10%" cellpadding="3" cellspacing="1">
<tr id="mainheadtext">
<td><div align="center">March Newsletter</div></td>
</tr>
<tr>
<td><div align="center">The First Soldiers of Honor Newsletter</div></td>
</tr>
</table>
<table border="1" bordercolor="#0000FF" style="background-color:#transparent" width="100%" height="15%" cellpadding="3" cellspacing="1">

<tr id="topheader">
<td><div align="center">Introduction</div></td>
</tr>
<tr>
<td><div align="left">Hello Soldiers,</div>
<div align="center">This is the official Soldiers of Honor Newsletter. Which is meant to keep you updated on many new things happening at the soh forums, and new polls! You will recieve these newsletters monthly unless otherwise an issue comes up. Want your article in it? Just PM Aerotoxin or Darkfire on the <u>forumwise</u> website! We are working on the unsubscribe codes.</td>
</tr>
</table>
<table border="1" bordercolor="#0000FF" style="background-color:#transparent" width="100%" height="15%" cellpadding="3" cellspacing="1">
<tr id="topheader">
<td><div align="center">Featured News</div></td>

</tr>
<tr>
<td>Just recently, our activity has become extra high! We are still recruiting as always. Keep up the good work guys!</td>
</tr>
</table>
<table border="1" bordercolor="#0000FF" style="background-color:#transparent" width="100%" height="15%" cellpadding="3" cellspacing="1">
<tr id="topheader">
<td><div align="center"STYLE="position:relative; left:0; top:0;
height:40; width:490;
border-style:solid;
background-image:URL('http://www.dynamicdrive.com/forums/designfiles/logo.gif');
background-repeat:no-repeat;
background-position:center center">Council Voting</div></td>
<td><div align="center" STYLE="position:relative; left:0; top:0;
height:40; width:490;
border-style:solid;
background-image:URL('http://www.dynamicdrive.com/forums/designfiles/logo.gif');
background-repeat:no-repeat;
background-position:center">TESTlign2</div></td>
</tr>
<tr>
<td>As most of us know, it is time for the battles to start, and many other events. Our practices are back, etc. One thing i would like to focus on is practices. We will hold practices every saturday unless otherwise told so.</td>
<td>As most of us know, it is time for the battles to start, and many other events. Our practices are back, etc. One thing i would like to focus on is practices. We will hold practices every saturday unless otherwise told so.</td>

</tr>
</table>
</div>

Thread: Table Headers

Thread Tools

Search Thread

Table Headers

Bookmarks

Bookmarks

Posting Permissions