<select> replacement --> css rollovermenu problem

[Rekcor]

I want to make a replacement for the <select>-tag.

For this im using the code below:

Test <div class="select">
 <div class="selectedItem" id="as_SelectedItem">option 1</div>
 <div class="pulldownButton" onClick="showObject('n1');">pulldownbutton</div>

 <div id="n1" style="display: none;">
  <div class="option" onclick="setSelected(this)">option 1</div>
  <div class="option" onclick="setSelected(this)">option 2</div>
 </div>
</div>

The menu works, with the exception of one thing. The final result should be:

Test [ ][]

with "[ ][]" as the menu.

However, the menu is positioned a line below Test:

Test
[ ][]

which is logical, because DIV is a block-element. However, I tried to use inline, inline-block, -moz-inline-box etc. but didnt manage to get it right. setSelected(this) replaces the text

Anyone a idea?

Koos

P.S. The JS-function showObject(elementId) toggles the visibility of an element; setSelected replaces the innerHTML of the div with id=as_SelectedItem with the innerHTML of the selected option.

 

[BabyJeffy]

You can use float:left on the child divs, or you could change the child divs into spans. Both should work for you.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[Rekcor]

Thanx for the quick reply? But what do you mean by the child divs? All the divs inside <div class="select">?

 

[BabyJeffy]

All the divs into the <div class="select"> need to be either floated or changed to spans (and not set to display:block). That will allow you to get the effect you have described.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[ChrisHunt]

I want to make a replacement for the <select>-tag.

Seems like a lot of work to build something that all browsers already have built-in. But if you're determined, take a look at the two "<select> something new" articles at

http://www.easy-designs.net/articles/

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Rekcor]

Thanx again Jeff. If your solution works, I'll come back and give you a *

@Chris:

You are right, but for me its a lesson to work with the DOM and a bit advanced CSS coding.

Thanx for the link! The menu's presented there however have one (major) drawback: they push content below it downwards. And I cant figure out if they'll behave like a inline element or a block element. Maybe its fixable. But, thanx again!