buttons positioning

[webtekie]

I have a series of buttons:

<div id="addBtn" style="position:relative">
<input type="button" name="add" value="add" class="btn" onClick="actionListener()">
</div>

<div id="searchBtn" style="position:relative">
<input type="button" name="search" value="search" class="btn" onClick="actionListener()">
</div>

<div id="deleteBtn" style="position:relative">
<input type="button" name="delete" value="delete" class="btn" onClick="actionListener()">
</div>

I want them to be displayed horizontally one after another, but even though I specify position:relative, all buttons are displayed vertically. How do I make them appear horizontally?

thanks,
webtekie

[DaveSW]

<div style="display: inline;">

[webtekie]

thanks Dave,

Another question, visibility of divs that I have are controled by setting visibility in javascript. Sometimes I want all buttons to appear and sometimes only first and third. The thing is that when only first and third buttons are visible, I have a gap between them where second button is hidden. How do I make it so that if one of the buttons is hidden all other shift left to fill the gap?

thanks again,
webtekie

[DaveSW]

can you change the display property, rather than the visible property?

if you could switch one to display: none it would not hold it's space on the page.

[webtekie]

perfect!
thanks Dave.

[Vladdy]

Why are you encapsulating buttons in block elements to begin with???

<div id="myButtons">
<input type="button" name="button1" value="Button 1" />
<input type="button" name="button2" value="Button 2" />
<input type="button" name="button3" value="Button 3" />
</div>

Should do the job.

[webtekie]

because I have to show/hide some buttons.

[fredmv]

Originally posted by webtekie
because I have to show/hide some buttons. That still doesn't warrant the use of a block-level element, however. You could just as easily access the buttons by themselves.

[webtekie]

ok, but how do I hide/show buttons without putting them in <div>?

[Vladdy]

button is HTML element, just like a div, right?

[fredmv]

I would have to know what kind of algorithm you're using, however, theoretically, you'd move all of the attributes off of the <div> and place them on the them on all of your <input> elements. Moreover, if you require position: relative on all of them you could just as easily define that in your CSS.

[webtekie]

ok, so I can say something like:

document.myForm.myInput.visibility=hidden;

or

document.myForm.myInput.display=none;

Will html tag <input type="text" name="myInput"> actually understand this?

All I want is some of the buttons to show up depending on action performed.

In my page all I do is this:

<div id="addBtn" style="display: inline; postion: relative;">
<input type="button" name="add" value="add" class="btn" onClick="actionListener()">
</div>
.....

function initBtns(){
showHide('addBtn','inline');
showHide('searchBtn','inline');
showHide('deleteBtn','none');
showHide('nextBtn','none');
showHide('previousBtn','none');
showHide('firstBtn','none');
showHide('lastBtn','none');
showHide('clearBtn','none');
showHide('cancelBtn','inline');
}

function showHide(id,vis) {
document.getElementById(id).style.display=vis;
}

thanks,
webtekie