Alignment Problem!

Jdmaurer16 · Joined: 26 Jan 2008 Posts: 3

Here is my code...

Code:

<HTML>
<head>
<title>Kiniferus</title>

<style type="text/css">
.text_style { color: white; font-family: "High Tower Text"; font-size: 14pt; vertical-align: middle; text-align: center; }
</style>

<script type="text/javascript">

function welcome_alert()
{
alert("Welcome!" + '\n' + "" + '\n' + "Click 'Enter!' to proceed into the site.");
}

function mouseOver()
{
document.b1.src ="Images/Enter_Blue.bmp";
}
function mouseOut()
{
document.b1.src ="Images/Enter_White.bmp";
}

</script>

</head>
<body background="Images/mainbackground.bmp" class="text_style">

<table border="0" align="center" valign="bottom">

<tr>

   <td>

   <a href="http://www.kiniferus.com/Home.htm" target="_blank">
   <img border="0" alt="Enter!" src="Images/Enter_White.bmp" name="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>

   </td>

</tr>

</table>
<p>
This text should be in the middle of the page!!!

</body>

</HTML>

Now I need the text "This text should be in the middle of the page!!!" to be in the middle of the page, but its not! And by "middle", I don't mean centered. I mean in the exact center/middle/whatever you want to call it, on the page. Like not at the top, but the middle of the page, vertically. How can I fix this?? Thanks in advance to any help!

quartzy · Joined: 26 Dec 2007 Posts: 400

I don't think you are using CSS for this but HTML. If you were using CSS you could put it in a div and position it absolutely.
With tables, you need to use colspans to get the width of each td. Then you would place your image in the center td. But sorry I cant help more, your'e editor should be able to correct this for you. What do you use?

Jdmaurer16 · Joined: 26 Jan 2008 Posts: 3

I don't use anything. I write all my codes myself in notepad.

Straystudio · Joined: 14 Apr 2008 Posts: 238 Location: Nord Italy

<body background="Images/mainbackground.bmp" class="text_style">

<table height="100%" width="100%" border="0" cellpadding="0" cellspacing="0"><tr>
<td align="center">

<table border="0">
   <tr>
   <td align="center">

   <a href="http://www.kiniferus.com/Home.htm" target="_blank">
   <img border="0" alt="Enter!" src="Images/Enter_White.bmp" name="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>

   </td>
   </tr>
</table>

</td>
</tr><tr>
<td height="100%" align="center" valign="middle">

   <p>
   This text should be in the middle of the page!!!
   </p>

</td></tr>
</table>

</body>

Straystudio · Joined: 14 Apr 2008 Posts: 238 Location: Nord Italy

Coding developing, now a wrong !DOCTYPE declaration may push out of luck.
For instance, this "last-age" XHTML one won't handle HEIGHT in percentuage in TABLE / TD elements:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

This classic is good:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Kiniferus</title>

You may incounter this as well, HTML 4.01 Frameset or Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

bye

sreenivasulareddy · Joined: 20 Apr 2008 Posts: 1

<HTML>
<head>
<title>Kiniferus</title>

<style type="text/css">
.text_style { color: white; font-family: "High Tower Text"; font-size: 14pt; vertical-align: middle; text-align: center; }
</style>

<script type="text/javascript">

function welcome_alert()
{
alert("Welcome!" + '\n' + "" + '\n' + "Click 'Enter!' to proceed into the site.");
}

function mouseOver()
{
document.b1.src ="Images/Enter_Blue.bmp";
}
function mouseOut()
{
document.b1.src ="Images/Enter_White.bmp";
}

</script>

</head>
<body background="Images/mainbackground.bmp" class="text_style">
<p> 
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table border="0" align="center" valign="bottom">
<tr>
<td> <a href="http://www.kiniferus.com/Home.htm" target="_blank"> <img border="0" alt="Enter!" src="Images/Enter_White.bmp" name="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</td>
</tr>
</table>
<p> This text should be in the middle of the page!!! </td>
</tr>
</table>
<p> 
</body>

</HTML>