By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,880 Members | 1,817 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,880 IT Pros & Developers. It's quick & easy.

Horizontally Aligned Buttons

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a

"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;
}
Jul 20 '05 #2

P: n/a
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
Jul 20 '05 #3

P: n/a

"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
Jul 20 '05 #4

P: n/a
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
Jul 20 '05 #5

P: n/a
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
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.