any other ways to achieve the same?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

any other ways to achieve the same?

Post by Ree »

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 &quote;-//W3C//DTD HTML 4.01//EN&quote; &quote;http://www.w3.org/TR/html4/strict.dtd&quote;>
<html>
<head>
<meta http-equiv=&quote;Content-Type&quote; content=&quote;text/html; charset=windows-1257&quote;>
<title>Form</title>
<style type=&quote;text/css&quote;>

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=&quote;container&quote;>

<form method=&quote;post&quote; action=&quote;../func/insert.php?do=add_news&quote;>
  <div id=&quote;form_container&quote; class=&quote;dark_bg&quote;>
    <div id=&quote;form_border&quote;>
      <div class=&quote;row&quote;>
        <div class=&quote;cell&quote;><span>Headline:</span></div>
        <div class=&quote;cell&quote;><input class=&quote;form_el head_f&quote; type=&quote;text&quote; name=&quote;head&quote;></div>
      </div>  
      <div class=&quote;row&quote;>
        <div class=&quote;cell&quote;><span>Body:</span></div>
        <div class=&quote;cell&quote;><textarea class=&quote;form_el body_f&quote; name=&quote;body&quote; cols=&quote;35&quote; rows=&quote;8&quote;></textarea></div>
      </div>
      <div class=&quote;row&quote;>
        <div class=&quote;cell&quote;><span></span></div>
        <div class=&quote;cell&quote;><input id=&quote;submit_b&quote; type=&quote;submit&quote; value=&quote;Submit&quote;></div>
      </div>
    </div>
  </div>
</form>

</div>

</body>
</html>
User avatar
nielsene
DevNet Resident
Posts: 1834
Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA

Post by nielsene »

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=&quote;post&quote; action=&quote;../func/insert.php?do=add_news&quote;>
  <fieldset>
  <legend>Sample Form</legend>
  <div id=&quote;form_container&quote; class=&quote;dark_bg&quote;>
    <div id=&quote;form_border&quote;>
      <div class=&quote;form_element&quote;>
        <span class=&quote;form_label&quote;>Headline:</span>
        <span class=&quote;form_input&quote;><input class=&quote;form_el head_f&quote; type=&quote;text&quote; name=&quote;head&quote; /></span>
      </div>  
      <div class=&quote;form_element&quote;>
        <span class-&quote;form_label&quote;>Body:</span>
        <span class=&quote;form_input&quote;><textarea class=&quote;form_el body_f&quote; name=&quote;body&quote; cols=&quote;35&quote; rows=&quote;8&quote;></textarea></span>
      </div>
      <div class=&quote;form_element&quote;>
        <span class=&quote;form_label&quote;></span>
        <span class=&quote;form_input&quote;><input id=&quote;submit_b&quote; type=&quote;submit&quote; value=&quote;Submit&quote;>/</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 »

woah fieldsets! never thought of this, thanks, will see what i can do with them.
Post Reply