Hi Sam
I did it this way to match an existing website. The experts can probably find many mistakes with my code but I hope it helps.
The <STYLE> stuff is to format the page as I want without an external css file.
<CODE HERE>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title><roundcube:object name="pagetitle" /></title> <roundcube:include file="/includes/links.html" /> <style type="text/css"> td.links{ color: #ffffff; background-color: #990000; font-size: 8pt; text-align: center; align: center; valign: middle; padding: 0px; } a.links { font-size: 8pt; color: #ffffff; font-weight: bold; text-decoration: none; } a.links:visited { color: #999999; font-weight: normal; text-decoration: none; color: #ffffff; } p.terms { font-size: 8pt; color: #990000; text-align: justify; margin-top: 1px;} p.promo { font-size: 9pt; color: #990000; text-align: justify; margin-top: 1px;} #promo { position: absolute; top: 55px; left: 20px; font-size: 8pt; color: #990000; text-align: justify; background-color: #dddddd; border: 1px solid #330000; width: 433px; height: 498px; padding: 8px; padding-right: 12px; align: center; valign: middle; z-index: 60;} #login-header{ position: absolute; top: 305px; left: 475px; font-size: 10pt; color: #ffffff; text-align: center; background-color: #cc0000; border: 1px solid #330000; width: 500px; height: 20px; padding: 4px; align: center; valign: middle; z-index: 120;} p.terms { font-size: 8pt; color: #990000; background-color: #dddddd; text-align: justify; margin-top: 1px; margin-left: 15px;} #login-form { position: absolute; top: 335px; left: 474px; font-size: 8pt; color: #660000; background-color: #ffffff; border: 1px solid #330000; width: 493px; height:218px; padding: 8px; align: left; valign: middle; z-index: 110;} #signup { position: absolute; top: 55px; left: 474px; color: #990000; background-color: #dddddd; border: 1px solid #330000; font-size: 8pt; width: 433px; height:285px; padding: 38px; align: left; valign: middle; z-index: 100;} a:hover { color: #00197E; } a { color: #00197E; } a:visited { color: #00197E; } #MySite_footer { position: absolute; top: 570px; left: 20px; } </style> </head> <body>
<roundcube:include file="/includes/globalheader.html" /> <roundcube:object name="message" id="message" />
<div id="login-header"> <b><i>MySite</i></b> Webmail Login </div>
<div id="login-form"><br /><br /> <form name="form" action="./" method="post"> <roundcube:object name="loginform" form="form" /> <p style="text-align: center;"><input type="submit" class="button" value="<roundcube:label name="login" />" />
</form> <br /><br /> <a href="/emsu/passrec.php">Recover your lost or forgotten password</a><br /> </div>
<div id="signup"> <b><font color="#cc0000"><i>Free @MySite.com Webmail</i> offers you the following features.</b> <ul><ul> <li>5MB quota <i>(May be increased in the future)</i></li> <li>Anti-Spam</li> <li>No Advertising or Pop-ups</li> <li>Addressbook</li> <li>Personalised Folders</li> <li>Webmail and POP access</li> </ul></ul></font> <a href="/emsu/emsignup.php">Register for a free Student email account</a> </div>
<div id="promo"> <b><i>MySite Webmail</i> is provided free of charge for students of the Mysite</b><br /><br /> <b>PRIVACY:</b><p class="terms">The only personal details required are your real name, and an alternative email for password recovery should you need it.<br /><br /> <b><i>MySite</i></b> or <b><i>MySite Webmail</i></b> will never pass or sell your details or email details to any third-party.<br /></p>
<b>TERMS AND CONDITIONS:</b><br /> ............. <BAH!> <BLAH!> .......... Backup of data is the sole responsibility of the user.</p>
</DIV> <div id="MySite_footer">
<table width="970" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="links" width="170"> <img alt="MySite_logo (1K)" src="/images/MySite_logo.gif" height="35" width="165" /> </td> <td class="links" width="200"> <a class="links" href="/templates/privacy.html">Privacy</a> </td> <td class="links" width="200"> <a class="links" href="/templates/t_and_c.html">Terms and Conditions</a> </td> <td class="links" width="400"> Website Content Copyright (c) MySitemail.com 2006<br /> Webmail Powered by "<b><i>ROUNDCUBE WEBMAIL</i></b>" </td> </tr> </table> </div>
</body> </html>
I hope this helps
Regards Chris