html - Pushing the button down, just center after the text -
how can push button down after text, stands now, stuck @ top before text. should go after text:
current result:
desired result:
here html/css markup:
<!doctype html> <html> <head> <meta charset="utf-8"> <style type="text/css"> /*-------------------------------------------------------------------------------------------------- custom alert box --------------------------------------------------------------------------------------------------*/ #alertbox_container { left: 50%; padding: 10px; top: 50%; margin: 0; padding: 0; height: 100%; border: 1px solid #808080; position: relative; color: rgb(11,63,113); } #alertbox { height: 100px; width: 400px; bottom: 50%; right: 50%; position: absolute; font-family: arial; font-size: 9pt; } #alertbox_titlebar { line-height:24px; width: 100%; filter:progid:dximagetransform.microsoft.gradient(startcolorstr="#ffffff", endcolorstr="#cdcdcd"); font-weight: bold; } .alertbox_button { color: #464646; border: 1px solid; border-color: #999 #666 #666 #999; background-color:#ccc; filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffff', endcolorstr='#e7e7e7'); } .alertbox_button:hover { background-color: #ddd; filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#fafafa', endcolorstr='#dddddd'); color: #000000; } #alertbox_close { line-height: 10px; width: 18px; font-size: 8pt; font-weight: bold; margin-top: 2px; margin-right: 2px; padding-left: 2px; padding-top: 2px; position:absolute; top:0; right:0; } #alertbox_text { position: absolute; width: 100%; height: auto; top: 50%; text-align: center; } #alertbox_div_btn_ok { position: absolute; width: 100%; height: auto; text-align: center; } #alertbox_btn_ok { height: 20px; width: 50px; font-size: 9pt; } </style> </head> <body> <!-- start of custom alertbox --> <div id="alertbox"> <div id="alertbox_container"> <div id="alertbox_titlebar"><span style="padding-left: 3px;">imts</span></div> <div><input class="alertbox_button" id="alertbox_close" type="button" value="x" onclick="alertbox_hide()"></div> <div id="alertbox_text">searching database...</div> <div id="alertbox_div_btn_ok"><input class="alertbox_button" id="alertbox_btn_ok" type="button" value="ok" onclick="alertbox_hide()"></div> </div> </div> </div> <!-- end of custom alertbox --> </body> </html>
i don't see reason why positioning elements absolutely within box. rid of that:
#alertbox_text { width: 100%; height: auto; text-align: center; } #alertbox_div_btn_ok { width: 100%; height: auto; text-align: center; }
you can use margin
space them out properly. width , height shouldn't needed unless there's else on greater page overriding.
Comments
Post a Comment