+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Libraries & Helpers (https://forum.codeigniter.com/forumdisplay.php?fid=22)
+--- Thread: div structure helper (/showthread.php?tid=5673)
Pages:
1
2
div structure helper - El Forum - 01-30-2008
[eluser]wiredesignz[/eluser]
application/helpers/div_structure_helper.php
Code:
function div_construct($attributes = NULL, $structure = array(), $tab = 0, $crlf = "\n")
{
$tabs = str_repeat("\t", $tab);
$crlf .= $tabs;
foreach ($structure as $key => $content)
{
$id = (!is_numeric($key)) ? ' id="'.$key.'"' : '';
$cls = ($attributes[$key]) ? ' class="'.$attributes[$key].'"' : '';
echo ($attributes) ? $crlf.'<div'.$id.$cls.'>' : $crlf;
echo (is_array($content)) ? div_construct(&$attributes, $content, $tab+1).$crlf : $content;
echo ($attributes) ? '</div>' : '';
}
}sample login form using div_structure_helper
application/views/login.php
Code:
<?php
echo form_open($action);
div_construct(
//css class attributes
array(
3 => 'labels',
4 => 'tr',
5 => 'tr',
6 => 'inputs',
7 => 'tr',
8 => 'tr',
9 => '',
),
//css id attributes + structure
array(
'content' => array(
'msg' => $message.' ',
'login' => array(
3 => array(
4 => 'Username: ',
5 => 'Password: ',
),
6 => array(
7 => form_input('username', $username, 'class="bx"'),
8 => form_password('password', $password, 'class="bx"'),
),
9 => form_submit('btn',' login ', 'id="btn"'),
)
)
)
);
echo form_close();
?>HTML Output
Code:
<form action="http://domain.com/login" method="post">
<div id="content">
<div id="msg">Enter your Username & Password to continue </div>
<div id="login">
<div class="labels">
<div class="tr">Username: </div>
<div class="tr">Password: </div>
</div>
<div class="inputs">
<div class="tr"><input type="text" name="username" value="admin" maxlength="500" size="50" class="bx" /></div>
<div class="tr"><input type="password" name="password" value="" maxlength="500" size="50" class="bx" /></div>
</div>
<input type="submit" name="btn" value=" login " id="btn" />
</div>
</div>
</form>div structure helper - El Forum - 01-31-2008
[eluser]xwero[/eluser]
ouch that is a bad case of divitis
div structure helper - El Forum - 01-31-2008
[eluser]Lone[/eluser]
Given Im a big advocate of using standards but from my previous experience when it comes to forms at times your best to use tables - at the end of the day forms are like tabulated data - two equal columns.
You usually end up with less HTML this way and it is also more readable.
div structure helper - El Forum - 01-31-2008
[eluser]xwero[/eluser]
For forms i use
Code:
<p><label for=""></label><input type="text"></p>div structure helper - El Forum - 01-31-2008
[eluser]Lone[/eluser]
I had gone to methods similar to that in that past but started to have a few alignment issues when it came to outputting errors etc. next to the input.
I found having the label and input wrapped in their <td> gave a lot more power when it came to more complex forms.
div structure helper - El Forum - 01-31-2008
[eluser]xwero[/eluser]
That is possible i try to keep my forms as simple as possible.
When i do error outputs next to the input i use a error class and i never experienced problems so far. If i want to show off i use the title attribute of the label for displaying the message and use javascript to display the error. It's not the best piece of accessible html but it looks great
edit : now i'm thinking about it i could hide the error messages with javascript and do a flash message when they hover over the p element.
div structure helper - El Forum - 01-31-2008
[eluser]wiredesignz[/eluser]
So you guys, show us a good login layout, instead of just talking about it.
div structure helper - El Forum - 01-31-2008
[eluser]xwero[/eluser]
Code:
<form action="http://domain.com/login" method="post">
<div id="content">
<div id="msg">Enter your Username & Password to continue </div>
<div id="login">
<div class="labels">
<div class="tr">Username: </div>
<div class="tr">Password: </div>
</div>
<div class="inputs">
<div class="tr"><input type="text" name="username" value="admin" maxlength="500" size="50" class="bx" /></div>
<div class="tr"><input type="password" name="password" value="" maxlength="500" size="50" class="bx" /></div>
</div>
<input type="submit" name="btn" value=" login " id="btn" />
</div>
</div>
</form>Code:
<form action="http://domain.com/login" method="post">
<p id="msg">Enter your Username & Password to continue </p>
<p><label for="username">Username: </label><input type="text" name="username" value="admin" maxlength="500" size="50" class="bx" /></p>
<p><label for="password">Password: </label><input type="password" name="password" value="" maxlength="500" size="50" class="bx" /></p>
<p><input type="submit" name="btn" value=" login " id="btn" /></p>
</form>div structure helper - El Forum - 01-31-2008
[eluser]wiredesignz[/eluser]
Ok then, very nice xwero. :coolsmile:
Obviously brain freeze on my part. However, that doesn't negate the semi-usefulness of the div structure helper.
div structure helper - El Forum - 01-31-2008
[eluser]Lone[/eluser]
Heres my chop chop
Code:
<div id="loginBox">
<form action="http://domain.com/login" method="post">
<h2>Enter your Username & Password to continue </h2>
<table>
<tr>
<td><label for="field_username">Username:</label></td>
<td><input type="text" name="username" id="field_username" class="textbox" /></td>
</tr>
<tr>
<td><label for="field_password">Password:</label></td>
<td><input type="password" name="password" id="field_password" class="textbox" /></td>
</tr>
</table>
<p><input type="submit" name="login" value=" login " id="loginBox_submit" /></p>
</form>
</div><!--loginBox-->CSS
Code:
#loginBox {
width: 600px;
margin: 10px auto;
background: #ebc47e;
border: 2px solid #d98240;
}
#loginBox form {
padding: 10px 20px 10px 180px;
background: url(http://www.stelex.com/images/maingraphics/login_icon.gif) no-repeat 0 50%;
}
#loginBox h2 {
font-size: 1.3em;
letter-spacing: -1px;
}
#loginBox table {
border-collapse: collapse;
}
#loginBox table tr td {
display: table-cell;
padding: 2px 4px;
}
#loginBox label {
font-weight: bold;
}
#loginBox .textbox {
border: 1px solid #d98240;
background: #f9e5c2;
padding: 2px 3px;
}
#loginBox_submit {
border: 1px solid #942724;
background: #d98240;
}A few oddities you may notice:
<!--loginBox--> - I always comment the end of a lot of my id'd div's etc., makes it easier to come back to or finding errors
DIV around form - I use to get get around the padding/width box issue ie has as standard (use an inner element - in this case the form)
Random background image - Google image search wooooo