JavaScript and client side scripting.
Moderator: General Moderators
Ree
Forum Regular
Posts: 592 Joined: Fri Jun 10, 2005 1:43 am
Location: LT
Post
by Ree » Wed Jul 20, 2005 4:46 am
i've been trying to achieve the same result with less code but failed. currently, as i have it, it's basically a simulated table with divs, you see rows and columns, so in this case i don't win anything over tables when using divs (but i would want to
). could you suggest a way with fewer divs to achieve the same result (i'm only interested in the area between <form> tags)? Please note, that the <span>'s you see CANNOT have fixed width (otherwise it would be too easy
). Any help/suggestions/corrections/tips from CSS/DIV fans would be greatly appreciated. If it's a perfectly fine way to do this tell me as well. Also, the below is valid HTML 4.01 STRICT.
Code: Select all
<!DOCTYPE HTML PUBLIC "e;-//W3C//DTD HTML 4.01//EN"e; "e;http://www.w3.org/TR/html4/strict.dtd"e;>
<html>
<head>
<meta http-equiv="e;Content-Type"e; content="e;text/html; charset=windows-1257"e;>
<title>Form</title>
<style type="e;text/css"e;>
html
{
margin: 0;
width: 100%;
height: 100%;
}
body
{
font-family: verdana;
font-size: 0.7em;
display: table;
color: #000000;
margin: 0;
width: 100%;
height: 100%;
background-color: #E1EDF0;
}
.dark_bg
{
border: 1px solid #BCD8DE;
background-color: #D0E3E8;
}
#container
{
display: table-cell;
vertical-align: middle;
}
#form_container
{
display: table;
margin: 0 auto;
}
#form_border
{
margin: 10px;
}
.row
{
display: table-row;
}
.cell
{
display: table-cell;
text-align: right;
vertical-align: top;
}
.form_el
{
border: 1px solid #BCD8DE;
background-color: #ffffff;
font-family: courier;
font-size: 1.2em;
margin-left: 10px;
}
.head_f
{
width: 280px;
}
.body_f
{
width: 280px;
height: 130px;
overflow: hidden;
}
#submit_b
{
font-family: verdana;
font-size: 1em;
border: 1px solid #BCD8DE;
background-color: #ffffff;
margin: 3px;
}
</style>
</head>
<body>
<div id="e;container"e;>
<form method="e;post"e; action="e;../func/insert.php?do=add_news"e;>
<div id="e;form_container"e; class="e;dark_bg"e;>
<div id="e;form_border"e;>
<div class="e;row"e;>
<div class="e;cell"e;><span>Headline:</span></div>
<div class="e;cell"e;><input class="e;form_el head_f"e; type="e;text"e; name="e;head"e;></div>
</div>
<div class="e;row"e;>
<div class="e;cell"e;><span>Body:</span></div>
<div class="e;cell"e;><textarea class="e;form_el body_f"e; name="e;body"e; cols="e;35"e; rows="e;8"e;></textarea></div>
</div>
<div class="e;row"e;>
<div class="e;cell"e;><span></span></div>
<div class="e;cell"e;><input id="e;submit_b"e; type="e;submit"e; value="e;Submit"e;></div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
nielsene
DevNet Resident
Posts: 1834 Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA
Post
by nielsene » Wed Jul 20, 2005 10:45 am
Well generally speaking I don't replace all tables with divs.
If I'm going to arrange cells in a row. I would probably stick with tables.
If I'm trying to stylize and organize a form however, I would probably do something more like
Code: Select all
<form method="e;post"e; action="e;../func/insert.php?do=add_news"e;>
<fieldset>
<legend>Sample Form</legend>
<div id="e;form_container"e; class="e;dark_bg"e;>
<div id="e;form_border"e;>
<div class="e;form_element"e;>
<span class="e;form_label"e;>Headline:</span>
<span class="e;form_input"e;><input class="e;form_el head_f"e; type="e;text"e; name="e;head"e; /></span>
</div>
<div class="e;form_element"e;>
<span class-"e;form_label"e;>Body:</span>
<span class="e;form_input"e;><textarea class="e;form_el body_f"e; name="e;body"e; cols="e;35"e; rows="e;8"e;></textarea></span>
</div>
<div class="e;form_element"e;>
<span class="e;form_label"e;></span>
<span class="e;form_input"e;><input id="e;submit_b"e; type="e;submit"e; value="e;Submit"e;>/</span>
</div>
</div>
</fieldset>
</form>
I would probably use a fixed width on form_label, probably floating or text-aligning right.
I see no reason to wrap each span in its own div as you were doing. I'd want to give the two "types" of spans different names (as I did, _label and _input). If its all "cell" I'd just stick with tables...
Ree
Forum Regular
Posts: 592 Joined: Fri Jun 10, 2005 1:43 am
Location: LT
Post
by Ree » Thu Jul 21, 2005 4:37 pm
woah fieldsets! never thought of this, thanks, will see what i can do with them.