Solved

Howto do simple HTML spacing/placement

Posted on 2003-12-01
24
527 Views
Last Modified: 2010-04-09
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?
0
Comment
Question by:AntonBotes
  • 13
  • 10
24 Comments
 
LVL 10

Expert Comment

by:ADSaunders
ID: 9850584
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9850631
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9850663
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
 

Author Comment

by:AntonBotes
ID: 9850978
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9851380
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
 

Author Comment

by:AntonBotes
ID: 9851728
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9851932
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
 

Author Comment

by:AntonBotes
ID: 9852275
georgemarian,
Urk!! That does absolutly nothing when I try it!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9852318
Depends on the browser - you may need a non-breaking space in the div: <div class="spacer">&nbsp;</div>.
0
 

Author Comment

by:AntonBotes
ID: 9852391
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
 

Author Comment

by:AntonBotes
ID: 9852404
....and Opera shows yet something else....
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9852417
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 31

Expert Comment

by:seanpowell
ID: 9852420
I also get the identical layout in Opera...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9852432
Hold on - posted the wrong code :-(
0
 

Author Comment

by:AntonBotes
ID: 9852443
No. The &nbsp makes no difference.
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 125 total points
ID: 9852448
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
 

Author Comment

by:AntonBotes
ID: 9852500
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9852542
>>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
 

Author Comment

by:AntonBotes
ID: 9852555
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
 

Author Comment

by:AntonBotes
ID: 9852627
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9852632
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9852641
>>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
 

Author Comment

by:AntonBotes
ID: 9852910
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9852981
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now