[RESOLVED] simple form positioning buttons CSS

**Blue1974** · Jan 28th, 2010, 09:44 AM

This is an easy one but I don't know HTML very well. I haven't found the best way to position the submit and reset buttons in my form. I would like to center them to the form and put a little space between the buttons. I've been trying to do it from an embedded style sheet but a little unsure of how to use it to control position. Can someone point me in the right direction.
<html>
<head>
<style type = "text/css">
h2, h3 {color: purple}
body {background-color: lime}
#buttons {text-align = center}
#buttons.reset {left-margin = 40}
</style>
<title>Assignment One</title>
</head>

<body>

<table border = "0">
<tr>
<td>First Name:</td>
<td><input type="text" name="fname" size="10" maxlength="10" /> </td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lname" size="20" maxlength="10" /> </td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name="address" size="50" maxlength="50" /> </td>
</tr>
<tr>
<td>City: </td>
<td><input type="text" name="city" size="30" maxlength="30" /> </td>
</tr>
<tr>
<td>Zip: </td>
<td><input type="text" name="zip" size="6" maxlength="6" /> </td>
</tr>
<tr>
<td>Phone Number: </td>
<td><input type="text" name="phone" size="12" maxlength="12" /> </td>
</tr>
<tr>
<div id="buttons">
<td>
<input type="submit" name="submit" value="Submit Order"> <input type="reset" name="reset"></td>
</div>
</tr>
</table>

</form>

</body>

</html>

**Justa Lol** · Jan 28th, 2010, 12:00 PM

please use code tags: [CODE]Code here...[/CODE]

first of all, correct your stylesheet, you don't use equal since, its always colon and end it with semi-colon.

your corrected stylesheet:

Code:

<style type = "text/css">
h2, h3 {color: purple;}
body {background-color: lime;}
#buttons {text-align:center;}
#buttons.reset {margin-left: 40px;}
</style>

i'm not sure about giving names a style so i recommend you add class="reset" to the reset button since the stylesheet says #buttons.reset that is a button with class "reset" in a div with the id "buttons"

i'll keep you updated

EDIT: i tested the code and corrected what i think seems to be wrong.

i added the beginning of the form so the reset button will work, i added class to the reset button so the stylesheet would actually do what it says it should do to the reset button.

complete code:

Code:

<html>
<head>
<style type = "text/css">
h2, h3 {color: purple;}
body {background-color: lime;}
#buttons {text-align:center;}
.reset {margin-left: 40px;}
</style>
<title>Assignment One</title>
</head>


<body>

<form action="index.php" method="post">
<table border = "0">
<tr>
<td>First Name:</td>
<td><input type="text" name="fname" size="10" maxlength="10" /> </td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lname" size="20" maxlength="10" /> </td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name="address" size="50" maxlength="50" /> </td>
</tr>
<tr>
<td>City: </td>
<td><input type="text" name="city" size="30" maxlength="30" /> </td>
</tr>
<tr>
<td>Zip: </td>
<td><input type="text" name="zip" size="6" maxlength="6" /> </td>
</tr>
<tr>
<td>Phone Number: </td>
<td><input type="text" name="phone" size="12" maxlength="12" /> </td>
</tr>
<tr>
<div id="buttons">
<td colspan="2"><input type="submit" name="submit" value="Submit Order"> <input type="reset" name="reset" class="reset" value="Reset"></td>
</div>
</tr>
</table>

</form>


</body>
</html>

**Blue1974** · Jan 28th, 2010, 12:04 PM

Thank you!! Sorry about the format of the code. I hoped that was the best way to format the elements like that.

**Justa Lol** · Jan 28th, 2010, 12:08 PM

its ok, I'm just helping those who need help, that i actually can help...

by the way, i think there was a good order in the code as it was before, just the few errors i fixed for you, hope i learned you something

**Blue1974** · Jan 28th, 2010, 12:17 PM

I just noticed that text-align:center has no effect in the display. Am I still using it in the wrong way?

HTML Code:

#buttons {text-align:center;}

**Justa Lol** · Jan 28th, 2010, 12:23 PM

i'm not sure if it works in divs... but you could edit the <td> tag where the buttons are:

Code:

<td colspan="2"><input type="submit" name="submit" value="Submit Order"> <input type="reset" name="reset" class="reset" value="Reset"></td>

if you add align="center" to it, it will align the buttons to center, like this:

Code:

<td colspan="2" align="center"><input type="submit" name="submit" value="Submit Order"> <input type="reset" name="reset" class="reset" value="Reset"></td>

or you remove the div and add id="buttons" instead of align="center" to the <td> tag

Code:

<td colspan="2" id="buttons"><input type="submit" name="submit" value="Submit Order"> <input type="reset" name="reset" class="reset" value="Reset"></td>

**Blue1974** · Jan 28th, 2010, 12:30 PM

Again, Thank You.....Both methods worked perfectly. I'm not sure which one I like better but it's good to see how they both work. This has really helped me!

**SambaNeko** · Jan 28th, 2010, 05:27 PM

You can't have a <div> inside of a <tr>, so removing it is appropriate indeed. Content in tables can only exist inside of <td> or <th> - the only tags that are acceptable under <table> are table formatting tags (<tr>, <thead>, <tbody>, <tfoot>, <caption>, <col>, <colgroup>). And the only tags acceptable in <tr> are <td> and <th>.

And while using tables for formatting is not intrinsically "wrong," it's not recommended (here's a somewhat patronizing explanation of why). The semantically correct markup to use for forms is <fieldset> and <label>. Here's an example. But as said, you don't really need to worry too much about this.

**Justa Lol** · Jan 29th, 2010, 05:33 AM

he can if he wants to but its not very good to do so... well, some people use tables to design their site if they want to make 3 sides like left, middle and right where they all have same size, and i don't have a clue how to do this..

**SambaNeko** · Jan 29th, 2010, 10:39 AM

You use divs, floats and margins; see the tutorial at the bottom of this page: three column layout.

**Justa Lol** · Jan 29th, 2010, 12:12 PM

i know how to place 3 divs side by side but i never figured out how to make 3 divs like that if the div in center has a height of 500px for example because of its content the other 2 divs will automatically get a 500px height...

**SambaNeko** · Jan 29th, 2010, 12:58 PM

If I'm understanding you correctly, then no, that isn't something that is as easily achieved with divs as it is with table cells. As far as content goes, it doesn't matter - the side divs will be as high as they need to be to accommodate their content. It matters visually though, if you want the appearance of side columns extending down equally with your middle column. I find this easily "faked" with a background image that repeats vertically.

Here is a quick example: there are three columns with one containing div around all of them (which is outlined in red on the screenshot). The column div that's outlined in purple stops before the div on the left does, but because the containing div has a repeated bg, it appears to keep going. Of course this requires fixed-width columns so you can plan your bg image appropriately. A liquid layout would need a different approach.

**kows** · Jan 29th, 2010, 01:43 PM

you could also fake it by setting a 1000px padding on the bottom of each column, and then also having a negative 1000px margin on the bottom of each column. then, you would wrap all of the columns in a container that cuts off the "extra."

I don't really like this method though -- you still have to use an image if you want the columns to have a border (the image is to simulate the bottom border, because the container cuts the element off).

there are also some javascript solutions (like niftycube, or maybe jquery has something similar), but I personally wouldn't use javascript just to make something look proper. if the user has it disabled, the effect (and the effort) is lost.

Thread: [RESOLVED] simple form positioning buttons CSS

Thread Tools

Display

[RESOLVED] simple form positioning buttons CSS

Re: simple form positioning buttons CSS

Re: simple form positioning buttons CSS

Re: [RESOLVED] simple form positioning buttons CSS

Re: [RESOLVED] simple form positioning buttons CSS

Re: [RESOLVED] simple form positioning buttons CSS

Re: [RESOLVED] simple form positioning buttons CSS

Re: [RESOLVED] simple form positioning buttons CSS

Re: [RESOLVED] simple form positioning buttons CSS

Re: [RESOLVED] simple form positioning buttons CSS

Re: [RESOLVED] simple form positioning buttons CSS

Re: [RESOLVED] simple form positioning buttons CSS

Re: [RESOLVED] simple form positioning buttons CSS

Posting Permissions