-2

How can I push the button down just after the text, as it stands now, it is stuck at the top before the text. It should go after the text:

Current result:enter image description here

Desired result:enter image description here

Here is the 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 the 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>
0

1 Answer 1

4

I don't see any reason why you are positioning the elements absolutely within the box. Get rid of that:

http://jsfiddle.net/qysTW/1

#alertBox_text {
  width: 100%;
  height: auto;
  text-align: center;
}

#alertBox_div_btn_OK {
  width: 100%;
  height: auto;
  text-align: center;
}

You can then use margin to space them out properly. Even the width and height shouldn't be needed unless there's something else on your greater page which this is overriding.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.