Thu, 2011-12-29 09:58
Please view the attached image to understand my problem. I want to vertically center the text, the information image as well as the two buttons.
Code snippet:
<div class="ui-box-top" style="padding: 0 !important; height: 35px;"> Login </div> <div class="ui-box-content"> <div class="quickform"><form method="post" id="login" action="index.php"><div><input type="hidden" name="_qf__login" id="_qf__login-0" /> <fieldset id="qfauto-0"><legend id="qfauto-0-legend">Login</legend> <div class="row"><label for="name-0" class="element"><span class="required">* </span>Enter your account name:</label><div class="element"><input type="text" size="50" maxlength="255" name="name" id="name-0" /></div></div> <div class="row"><label for="password-0" class="element"><span class="required">* </span>Enter your password:</label><div class="element"><input type="password" size="50" maxlength="255" name="password" id="password-0" /></div></div> <div class="row"><label for="qfauto-1" class="element"></label><div class="element"><input type="submit" value="Login" name="" id="qfauto-1" /></div></div></fieldset></div></form><div class="reqnote"><em>*</em> denotes required fields.</div></div> </div>
Help is much appreciated. I'm a PHP programmer that's currently responsible for the front-end of a web application while the designer is away. 
| Attachment | Size |
|---|---|
| fail.png | 3.85 KB |
Thu, 2011-12-29 10:00
#1
Oops
Wrong code snippet above!! Couldn't find an edit button. Here's the correct code:
<div class="ui-box-top" style="padding: 0 !important; height: 35px;"> <table> <tr> <td style="float: left; position: relative;"><span>Current users</span></td> <td style="float: right; position: relative;"><button class="green">Add new users</button></td> <td style="float: right; position: relative;"><button class="green">Edit existing users</button></td> <td style="float: right; position: relative;"><img src="images/info-new.png"/></td> </tr> </table> </div>
Thu, 2011-12-29 20:31
#2
That's not a table, so don't
That's not a table, so don't use a table structure. You may, however, use a table's display properties.
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test document</title> <style type="text/css"> #header { display: table; width: 100%; } #header p { border: 1px dotted gray; /*for clarity*/ display: table-cell; text-align: right; vertical-align: middle; } #header p span { float: left; } #header img[alt] { font-style: italic; } </style> </head> <body> <div id="header"> <p> <span>Current users</span> <img src="images/info-new.png" alt="i"/> <button class="green">Edit existing users</button> <button class="green">Add new users</button> </p> </div> </body> </html>
cheers,
gary