Goal:
Align ColdFusion MX 7 Flash Forms using CSS. Table less layout.
Story:
Tables are only for tabular data display.
CSS is the best to web programming we all know that by now.
ColdFusion MX 7 has feature of Flash Forms. I have come across this question many times. Many developers have asked that how to use HTML element in the flash forms and how to align the input fields. The solution is “Do not use table or other html element. Use CSS”. It is not that difficult at all. I have created this simple example for that.
Result:
It is very simple. Flash forms are aligned beautifully with CSS, no use of Table element of HTML.
Code:
<style type="text/css">
<!--
body {
font-family : "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
font-size : 70%;
color : #333;
background : #fff;
padding : 0;
margin : 0;
text-align : center;
}
#container {
margin : 0 auto;
padding : 0;
width : 770px;
text-align : left;
}
-->
</style>
</head>
<body>
<div id="container">
<form id="example-form" method="post" action="">
<fieldset>
<legend>Personal information</legend>
<label for="fm-req_forename">First name</label>
<div><input type="text" name="fm-req_forename" id="fm-req_forename" /> <br /> </div>
<label for="fm-req_forename">Last Name</label>
<div><input type="text" name="fm-req_surname" id="fm-req_lastname" /> <br /> </div>
<label for="fm-eml_email">Email</label>
<div class="fm-required"><input type="text" name="fm-eml_email" id="fm-eml_email" value=" " /> </div>
</fieldset>
<div id="fm-submit"><input type="submit" name="Submit" value="Submit" /></div>
</form>
Thursday, October 20, 2005
Subscribe to:
Posts (Atom)
