Solved

Howto do simple HTML spacing/placement

Posted on 2003-12-01
24
525 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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

759 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

20 Experts available now in Live!

Get 1:1 Help Now