any other ways to achieve the same?
Posted: 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>