asp.net - css position of button in menu -


i have menu menu looks :

<div class="menucontainer"> <div id="titlebardiv" style="float: left;"> <a>item 1</a> <div id="container">      <input type="button" value="0" class="masterpagenotifier" style="height: 30px;"onclick="notifierbuttonclicked()" />      <input type="hidden" value="" class="mehidden" />     <ul class="selectbox" />     </div> <a>item 2</a> <a>item 3</a> <a>item 4</a> <a>item 5</a> <div> <div> 

as can see in between have div button inside, on click of button, ul class="selectbox" slide down , show items. problem here can menu work on itself, add button in between, button moving down 1 row, , when click on button .menucontainers background gets stretched. want make facebook when notification button clicked.i tryed absolute position on container div, without luck.

css:

   input[type="submit"],     input[type="button"],     button {         background:#5ccd00;     background:-moz-linear-gradient(top,#5ccd00 0%,#4aa400 100%);     background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5ccd00),color-stop(100%,#4aa400));     background:-webkit-linear-gradient(top,#5ccd00 0%,#4aa400 100%);     background:-o-linear-gradient(top,#5ccd00 0%,#4aa400 100%);     background:-ms-linear-gradient(top,#5ccd00 0%,#4aa400 100%);     background:linear-gradient(top,#5ccd00 0%,#4aa400 100%);     filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#5ccd00',endcolorstr='#4aa400',gradienttype=0);     padding:10px 15px;     color:#fff;     font-family:'helvetica neue',sans-serif;     font-size:13px;     border-radius:5px;     -moz-border-radius:5px;     -webkit-border-radius:5px;     border:1px solid #459a00;     }  .menucontainer { width: 1000px;  margin-left: auto;  margin-right: auto;  overflow: hidden;  background-color: purple; }   function notifierbuttonclicked() {     if (checked == false) {         checked = true;          getnotificationsforuser();          $('.selectbox').slidetoggle(200).css('bordertop', 'none');         $('.selectbox li').click(function () {             $('.selectbox').slideup(200);         });          //$('.masterpagenotifier').val("0");     }     else if (checked == true) {         checked = false;         $('.selectbox').slideup(200);     }  } 

thats how looks: enter image description here

you can "container" <div> stay on same line <a> elements adding this:

#container {  display:inline-block; width:50px; } 

i tested in chrome. of course, can't tell if javascript still working after change, because posted not complete ("checked" not defined).


Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -