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:
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
Post a Comment