Howto do simple HTML spacing/placement

Hit here.
From an (obviously) absolute beginner, how do you place/space elements (e.g. form elements) on  a web page? For instance, how do I get proper placement of two listboxes next to each other, each with its own 'heading', and below each listbox a text field and a button, so that I can align the whole lot nicely?
AntonBotesAsked:
Who is Participating?
 
seanpowellCommented:
Here you go - sorry about that...


<html>
<head>
<title></title>
<style type="text/css">
<!--

form    {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #000000;
        }

label   {
        float: left;
        width:350px;
        }
.spacer {
        float: left;
        width:100px;
        }

select,input   {
        float: left;
        width:200px;
        }
               
.button {
        float: left;
        width:50px;
        }

//-->
</style>
</head>
<body>
<form>
<label for="select1">Select Box One</label><label for="select2">Select Box Two</label><br /><br />
<select size="1" name="select1"></select><input type="button" value="DEL" class="button"><div class="spacer">&nbsp;</div>
<select size="1" name="select2"></select><input type="button" value="DEL" class="button"><br /><br />
<input type="text" name="textone"><input type="button" value="ADD" class="button"><div class="spacer">&nbsp;</div>
<input type="text" name="texttwo"><input type="button" value="ADD" class="button"><br /><br />
</form>
</body>
</html>
0
 
ADSaundersCommented:
Hi AntonBotes,
So you want an HTML layout tutorial do you? :-)
Probably the simplest way (assuming you don't have a wysiwyg HTML publisher like FrontPage) would probably be using tables:
<table>
<tr><td align="center"> Heading 1 </td><td align="center"> Heading 2 </td></tr>
<tr><td> ( CODE HERE FOR LISTBOX 1 )</td> <td> ( CODE HERE FOR LISTBOX 2 )</td></tr>
<tr><td> (buttons for listbox 1)</td><td>(buttons for listbox 2)</td></tr>
</table>

Look up tables and table elements in your favourite HTML reference. You could do it with CSS, and pundits nowadays would probably say you should, but if you're such a tyro as you claim, tables will probably be a shorter learning curve.

Cheers!
0
 
seanpowellCommented:
The most standards compliant approach is the combination of html, css, and the label element. Here's an example:

<html>
<head>
<title></title>
<style type="text/css">
<!--

form    {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #000000;
        }

label,select   {
        float: left;
        width:200px;
        }

.input  {
        width:150px;
        }

.button {
        width:50px;
        }

//-->
</style>
</head>
<body>
<form>
<label for="select1">Select Box One</label>
<label for="select2">Select Box Two</label><br />
<select size="1" name="select1"></select>
<select size="1" name="select2"></select><br /><br />
<input type="text" name="textone"> <input type="button" value="one" class="button">
<input type="text" name="texttwo"> <input type="button" value="two" class="button">
</form>
</body>
</html>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
seanpowellCommented:
Just a note on the above table code if you're going to use it - I'd modify it slightly and use the <th> element for centered text...

<table>
<tr>
  <th>Heading 1</th><th>Heading 2</th>
</tr>
<tr>
  <td>CODE HERE FOR LISTBOX 1<br>buttons for listbox 1</td>
  <td>CODE HERE FOR LISTBOX 2<br>buttons for listbox 2</td>
</tr>
</table>
0
 
AntonBotesAuthor Commented:
Georgemarian:
Thanks, I'm  looking at your css, etc solution. What I want is more or less:

Title for LB 1                              Title for LB 2
     list                                              list
     box                                              box
       1            DEL button                      2           DEL button

text input 1     ADD button            text input 2      ADD button

When I use your example, the two list boxes lie right next to each other, and
the DEL buttons go lie at the right side of the two listboxes.
0
 
seanpowellCommented:
The following represents what you're trying to do. I'd suggest altering different values to see how the elements display differently:

<html>
<head>
<title></title>
<style type="text/css">
<!--

form    {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #000000;
        }

label   {
        float: left;
        width:250px;
        }

select,input   {
        float: left;
        width:200px;
        }
               
.button {
        float: left;
        width:50px;
        }

//-->
</style>
</head>
<body>
<form>
<label for="select1">Select Box One</label>
<label for="select2">Select Box Two</label><br />
<select size="1" name="select1"></select><input type="button" value="DEL" class="button">
<select size="1" name="select2"></select><input type="button" value="DEL" class="button"><br /><br />
<input type="text" name="textone"><input type="button" value="ADD" class="button">
<input type="text" name="texttwo"><input type="button" value="ADD" class="button"><br /><br />
</form>
</body>
</html>
0
 
AntonBotesAuthor Commented:
georgemarian,
Thanks, that does it nicely, but I'm left with one problem: I want a space between the list boxes:

Listbox1                    space     Listbox2
            :                  space                 :
            :                  space                 :
            :                  space                 :
            :   DEL          space                 :  DEL
 ---------:                  space      ---------:
text1         ADD                        text2       ADD

0
 
seanpowellCommented:
Add a spacer element:

<html>
<head>
<title></title>
<style type="text/css">
<!--

form    {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #000000;
        }

label   {
        float: left;
        width:250px;
        }
.spacer {
        float: left;
        width:50px;
        }

select,input   {
        float: left;
        width:200px;
        }
               
.button {
        float: left;
        width:50px;
        }

//-->
</style>
</head>
<body>
<form>
<label for="select1">Select Box One</label><div class="spacer"></div>
<label for="select2">Select Box Two</label><br />
<select size="1" name="select1"></select><input type="button" value="DEL" class="button"><div class="spacer"></div>
<select size="1" name="select2"></select><input type="button" value="DEL" class="button"><br /><br />
<input type="text" name="textone"><input type="button" value="ADD" class="button"><div class="spacer"></div>
<input type="text" name="texttwo"><input type="button" value="ADD" class="button"><br /><br />
</form>
</body>
</html>
0
 
AntonBotesAuthor Commented:
georgemarian,
Urk!! That does absolutly nothing when I try it!
0
 
seanpowellCommented:
Depends on the browser - you may need a non-breaking space in the div: <div class="spacer">&nbsp;</div>.
0
 
AntonBotesAuthor Commented:
Oops! That's not true. Mozilla shows no change, but IE does show the space between labels and listbox, but the text field and ADD button underneath remains unspaced.
0
 
AntonBotesAuthor Commented:
....and Opera shows yet something else....
0
 
seanpowellCommented:
I'm not sure why that would be the case - I get exactly the same rendering on IE and Mozilla:

<html>
<head>
<title></title>
<style type="text/css">
<!--

form    {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #000000;
        }

label   {
        float: left;
        width:350px;
        }
.spacer {
        float: left;
        width:100px;
        }

select,input   {
        float: left;
        width:200px;
        }
               
.button {
        float: left;
        width:50px;
        }

//-->
</style>
</head>
<body>
<form>
<label for="select1">Select Box One</label><div class="spacer"></div>
<label for="select2">Select Box Two</label><br />
<select size="1" name="select1"></select><input type="button" value="DEL" class="button"><div class="spacer">&nbsp;</div>
<select size="1" name="select2"></select><input type="button" value="DEL" class="button"><br /><br />
<input type="text" name="textone"><input type="button" value="ADD" class="button"><div class="spacer">&nbsp;</div>
<input type="text" name="texttwo"><input type="button" value="ADD" class="button"><br /><br />
</form>
</body>
</html>
0
 
seanpowellCommented:
I also get the identical layout in Opera...
0
 
seanpowellCommented:
Hold on - posted the wrong code :-(
0
 
AntonBotesAuthor Commented:
No. The &nbsp makes no difference.
0
 
AntonBotesAuthor Commented:
Sorry... <GROVEL> If only I put the &nbsp in the CORRECT place AS YOU INDICATED, things would go better.

The only thing remaining (all browsers now show the same thing) is the text field and ADD button. These stubbornly refuse to be spaced.
0
 
seanpowellCommented:
>>These stubbornly refuse to be spaced.
Do you mean there should be space between the text fields and add buttons - instead of right next to each other as they are now? The code above has the ADD buttons displaying "right under" the DEL buttons - so they need more spacing between them, yes?
0
 
AntonBotesAuthor Commented:
Here's the offending code. (The rows of &nbsp were my initial crude attempt at spacing..):

  echo "<input type=\"text\" style=width:250px name=\"addallow\" >\n";
  echo "<input type=\"submit\" name=\"allowbut\" value = \"Add\" >\n";
  echo "<div class=\"spacer\"> &nbsp</div>";
  //echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp\n";
  //echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp\n";
  //echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp\n";
  //echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp\n";
  //echo "&nbsp\n";
  echo "<input type=\"text\" style=width:250px name=\"addblock\" >\n";
  echo "<input type=\"submit\" name=\"blockbut\" value = \"Add\"      style=width:50px><br>\n";

Thanks for your patience !!

 
0
 
AntonBotesAuthor Commented:
Sorry, I think we're getting crosstalk. What I want is for the text fields to align neatly underneath the list boxes, and the ADD buttons to lie under the DEL buttons. What i'm GETTING is that the second text field lies right next to the first ADD button, without the space I want.
0
 
seanpowellCommented:
Sorry - I'm still confused by your intent... ( also - make sure you use &nbsp; and not &nbsp )

I'm not sure how the spacing needs to be set...
0
 
seanpowellCommented:
>>Sorry, I think we're getting crosstalk.
That's okay - can you cut and paste my last code example exactly into an html test page and confirm that this is not the correct layout - in case you're altering the code in a way that I can't see...
0
 
AntonBotesAuthor Commented:
Your code does exactly what I want. What I get with my code is:

Label 1                               Label 2
           :                                        :
           :                                        :
           :  DEL                                 :  DEL
---------:                             ---------:
text 1      ADD  text2  ADD

Here's my cleaned-up code:

      echo "<label for=\"lwemail\"><b>Always allow these senders</b></label>";
      echo "<div class=\"spacer\">&nbsp;</div>";
  echo "<label for=\"lbemail\"><b>Always block these senders </b></label><br />";

  get_email_addrs_allow($ispuid);
  echo "<div class=\"spacer\">&nbsp;</div>\n";
  get_email_addrs_block($ispuid);

  echo "<input type=\"text\" style=width:250px name=\"addallow\" >\n";
  echo "<input type=\"submit\" name=\"allowbut\" value=\"Add\" style=width:50px>\n";
      echo "<div class=\"spacer\">&nbsp;</div>";
 
  echo "<input type=\"text\" style=width:250px name=\"addblock\" >\n";
  echo "<input type=\"submit\" name=\"blockbut\" value=\"Add\" style=width:50px><br>\n";
 
0
 
seanpowellCommented:
Assuming you're using the css rules from the stylesheet, the code seems okay. Obviously the spacer div is not grabbing the css rules.

Try changing it to:

echo "<div class=\"spacer\" style=\"float: left; width:100px;\">&nbsp;</div>";
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.