PDA

View Full Version : Problems with align= function


az0000000
20 Sep 2005, 08:04 AM
Hello.
I use html language and I have problem with the align function.
I am not able to align objects or text to left, center or right. The align function isn’t working at all, inside the table or outside the table.

Here is the html code for the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<TITLE>Welcome to World CARP Tartu!</TITLE>
<SCRIPT language=JavaScript>
<!-- Hide the script from old browsers --

img0_on = new Image(172,32);
img0_on.src="images/button_after.jpg";
img0_off = new Image(172,32);
img0_off.src="images/button_before.jpg";

img1_on = new Image(172,32);
img1_on.src="images/button_after.jpg";
img1_off = new Image(172,32);
img1_off.src="images/button_before.jpg";

img2_on = new Image(172,32);
img2_on.src="images/button_after.jpg";
img2_off = new Image(172,32);
img2_off.src="images/button_before.jpg";

img3_on = new Image(172,32);
img3_on.src="images/button_after.jpg";
img3_off = new Image(172,32);
img3_off.src="images/button_before.jpg";

img4_on = new Image(172,32);
img4_on.src="images/button_after.jpg";
img4_off = new Image(172,32);
img4_off.src="images/button_before.jpg";

img5_on = new Image(172,32);
img5_on.src="images/button_after.jpg";
img5_off = new Image(172,32);
img5_off.src="images/button_before.jpg";


function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_off.src");
}
// --End Hiding Here -->
</SCRIPT>

<link rel="stylesheet" type="text/css" href="main.css">
<meta name="Microsoft Border" content="t">
</HEAD>
<BODY bottomMargin=0 vLink=#71415e aLink=#71415e link=#71415e bgColor=#ffffff
leftMargin=0 background=images/background.jpg topMargin=0 rightMargin=0
marginwidth="0" marginheight="0">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%"
background=images/top_background.jpg border=0>
<TBODY>
<TR>
<TD vAlign=top background=images/background.jpg>
&nbsp;
<div align="center">
<center>
<TABLE cellSpacing=5 cellPadding=5 width="90%" background="" border=0>
<TBODY>
<TR>
<TD>
<H1>Title...</H1>
<P>Comments...</P>
<UL>
<LI>Bulleted content...
<LI>Bulleted content...
<LI>Bulleted content...
<LI>Bulleted content...</UL>
<P class=smallcenter>Copyright ©2005 World CARP Tartu</P></TD></TR></TBODY></TABLE></center>
</div>
<p>&nbsp;
</TD>
<TD vAlign=top width=172 background=images/button_back.jpg
height="100%">
<P class=centerbold><BR><a onmouseover="over_image('img0');" onmouseout="off_image('img0')" href="index.html"><IMG
src="images/button_before.jpg" border=0 name=img0 width="172" height="33"></a><BR><a onmouseover="over_image('img1');" onmouseout="off_image('img1')" href="index.html"><IMG
src="images/button_before.jpg" border=0 name=img1 width="172" height="33"></a><BR><a onmouseover="over_image('img2');" onmouseout="off_image('img2')" href="index.html"><IMG
src="images/button_before.jpg" border=0 name=img2 width="172" height="33"></a><BR><a onmouseover="over_image('img3');" onmouseout="off_image('img3')" href="index.html"><IMG
src="images/button_before.jpg" border=0 name=img3 width="172" height="33"></a><BR><a onmouseover="over_image('img4');" onmouseout="off_image('img4')" href="index.html"><IMG
src="images/button_before.jpg" border=0 name=img4 width="172" height="33"></a><BR><a onmouseover="over_image('img5');" onmouseout="off_image('img5')" href="index.html"><IMG
src="images/button_before.jpg" border=0
name=img5 width="172" height="33"></a></P></TD></TR></TBODY></TABLE>
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/bottom_background.gif" height="5">
<tr>
<td width="100%"><font size="1">&nbsp;</font></td>
</tr>
</table>
&nbsp;</BODY></HTML>

I use a css for the page and the code is here:

BODY {
BACKGROUND-COLOR: #ffffff
}
P {
FONT-SIZE: 13px; COLOR: #000000; FONT-FAMILY: verdana, sans-serif; TEXT-ALIGN: justify; TEXT-DECORATION: none
}
P.center {
FONT-SIZE: 13px; COLOR: #000000; FONT-FAMILY: verdana, sans-serif; TEXT-ALIGN: center; TEXT-DECORATION: none
}
P.centerbold {
FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #000000; FONT-FAMILY: verdana, sans-serif; TEXT-ALIGN: center; TEXT-DECORATION: none
}
P.centerwhitebold {
FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #ffffff; FONT-FAMILY: verdana, sans-serif; TEXT-ALIGN: center; TEXT-DECORATION: none
}
P.small {
FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: verdana, sans-serif; TEXT-ALIGN: left; TEXT-DECORATION: none
}
P.smallcenter {
FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: verdana, sans-serif; TEXT-ALIGN: center; TEXT-DECORATION: none
}
UL {
FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: verdana, sans-serif; TEXT-ALIGN: justify; TEXT-DECORATION: none
}
LI {
FONT-SIZE: 13px; COLOR: #000000; FONT-FAMILY: verdana, sans-serif; TEXT-ALIGN: justify; TEXT-DECORATION: none
}
H1 {
FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #63432f; FONT-FAMILY: verdana, sans-serif; TEXT-ALIGN: left; TEXT-DECORATION: none
}
H2 {
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #00225d; FONT-FAMILY: verdana, sans-serif; TEXT-ALIGN: left; TEXT-DECORATION: none
}
A:link {
COLOR: #63432f; FONT-FAMILY: verdana, sans-serif; TEXT-DECORATION: none
}
A:visited {
COLOR: #63432f; FONT-FAMILY: verdana, sans-serif; TEXT-DECORATION: none
}
A:hover {
COLOR: #00225d; FONT-FAMILY: verdana, sans-serif; TEXT-DECORATION: none
}
A:active {
COLOR: #00225d; FONT-FAMILY: verdana, sans-serif; TEXT-DECORATION: none
}


Thank you a lot.
MattJ
22 Sep 2005, 08:47 AM
In the CSS, try setting


display:block;

for the elements you are trying to align... just a guess.

Instead of the HTML ALIGN="", you could try the CSS 'float' attribute, although that depends on how your page is structured;
http://www.w3schools.com/css/pr_class_float.asp