Horizontally Aligned Buttons

[John Topley]

Hi,

I have a DIV containing an unordered list and to the right of the list
I'd like to have a stack of three horizontally-aligned submit buttons -
is it possible to achieve this?

Thanks,

John

[Jim Roberts]

"John Topley" <john@$NO_SPAM$topley.freeserve.co.uk> wrote in message
news:c4**********@news8.svr.pol.co.uk...

Hi,

I have a DIV containing an unordered list and to the right of the list
I'd like to have a stack of three horizontally-aligned submit buttons -
is it possible to achieve this?

Thanks,

John

Could you post your code or give a URL?

Without seeing your actual code, I'm only guessing here; you could try
floating the div to the left then your next element (containing the buttons
perhaps?) would appear to the right.

div#whatever {
float: left;
}

[John Topley]

Jim Roberts wrote:

Could you post your code or give a URL?

Without seeing your actual code, I'm only guessing here; you could try
floating the div to the left then your next element (containing the
buttons perhaps?) would appear to the right.

div#whatever {
float: left;
}

Hello Jim. Here's the code:

<div id="whatever">
<h3>Variableset</h3>
<ul>
<li class="fieldheading">Name</li>
<li>&lt;No selection&gt;</li>
<li class="fieldheading">Description</li>
<li>&lt;No selection&gt;</li>
</ul>
<input type="submit" class="formbutton" value="Browse" />
<input type="submit" class="formbutton" value="Modify" />
<input type="submit" class="formbutton" value="Create" />
</div>

In the stylesheet, I have:

#whatever {
float: left;
width: auto;
}

#whatever h3 {
padding-left: 1em;
}

#whatever li {
list-style: none;
}

#whatever ul {
margin-left: 1em;
}

#whatever .formbutton {
margin-top: 1em;
margin-right: 1em;
margin-bottom: 1em;
}

--I tried adding a line break after each submit button and giving each
button its own class and setting positional properties for each class,
but it didn't work. Hmm, perhaps I need to contain the buttons in
another DIV?

Thanks,

John

[Jim Roberts]

"John Topley" wrote:

Hello Jim. Here's the code:
--I tried adding a line break after each submit button and giving each
button its own class and setting positional properties for each class,
but it didn't work. Hmm, perhaps I need to contain the buttons in
another DIV?

Thanks,

John

You should put the buttons outside the div. try this:

<h3>Variableset</h3>
<div id="whatever">
<ul>
<li class="fieldheading">Name</li>
<li>&lt;No selection&gt;</li>
<li class="fieldheading">Description</li>
<li>&lt;No selection&gt;</li>
</ul>
</div>
<input type="submit" class="formbutton" value="Browse" />
<input type="submit" class="formbutton" value="Modify" />
<input type="submit" class="formbutton" value="Create" />

I moved the h3 outside as well. Add this to your style sheet:

input {
width: 5em;
display: block;
}

The width you can change to your liking. This will cause the buttons to all
be the same width regardless of the text length...

The display:block will cause your input elements to display as blocks rather
than inline and they will stack on on top the other.

As far as putting your input elements in a div, that's your choice. That
would give you more control over positioning and other styles...

To get the same look across multiple browsers, you may have to fool around
with positioning and such.

regards,
Jim Roberts

[Jim Roberts]

I fooled around with it some more. It looked okay in IE but looked a little
funky in mozilla. This is better:

<h3>Variable sets</h3>
<div id="variable">
<li class="fieldheading">Name</li>
<li>&lt;No selection&gt;</li>
<li class="fieldheading">Description</li>
<li>&lt;No selection&gt;</li>
</div>
<div id="button">
<input type="submit" value="Browse" />
<input type="submit" value="Modify" />
<input type="submit" value="Create" />
</div>

stylesheet:

#variable{
float: left;
width: auto;
text-align:left;
margin-right: 2em
}

#whatever li {
list-style: none;
}

#button {
/*styles for the Buttons Div */
}

div#button input {
display: block;
width: 5em;
}

of course, you can edit the styles to suit your needs, but this should be a
good start.

Regards,
Jim Roberts

[John Topley]

Jim Roberts wrote:

I fooled around with it some more. It looked okay in IE but looked a
little funky in mozilla. This is better:

(Snipped)

of course, you can edit the styles to suit your needs, but this
should be a good start.

Regards,
Jim Roberts

Thanks a lot Jim, that's great.

Regards,

John