Question

我的网站上有一个水平的ASP菜单，当我触发页面加载时，它会垂直显示，看起来很丑，然后回到水平。我做了一些研究没有什么适用于我，我可以看到任何想法？

点击搜索按钮之前 enter image description here

按下搜索按钮后（页面加载期间）： enter image description here

这里的菜单通常如下： enter image description here

以下是页面来源：

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>

</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .style3
        {
            width: 884px;
        }
    </style>
       <script type="text/javascript">
           function popitup() {
               alert("Inventory successfully Reconciled.");
           }
</script>
</head>
<script type="text/javascript">
    function createRequestObject() {
        var tmpXmlHttpObject;

        //depending on what the browser supports, use the right way to create the XMLHttpRequest object
        if (window.XMLHttpRequest) {
            // Mozilla, Safari would use this method ...
            tmpXmlHttpObject = new XMLHttpRequest();

        } else if (window.ActiveXObject) {
            // IE would use this method ...
            tmpXmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
        }

        return tmpXmlHttpObject;
    }

    //call the above function to create the XMLHttpRequest object
    var http = createRequestObject();

    function getWinnerInfo(user) {
        //make a connection to the server ... specifying that you intend to make a GET request 
        //to the server. Specifiy the page name and the URL parameters to send
        //alert(user);

        //alert(urlencode(user));
        http.open('GET', 'http://...=' + urlencode(user),true);

        //assign a handler for the response
        http.onreadystatechange = processResponse;

        //actually send the request to the server
        http.send(null);
    }

    function pad(number, length) {
        var str = '' + number;
        while (str.length < length) {
            str = '0' + str;
        }
        return str;
    }

    function processResponse() {
        //check if the response has been received from the server

        if (http.readyState == 4) {

            //read and assign the response from the server
            var response = http.responseText;
            //alert(response);
            if (response == "") {
                alert("Winner not found.");
                return;
            }
            var temp = new Array();
            temp = response.split("|");
            document.getElementById('MainContent_txtFirstName').value = temp[0];
            document.getElementById('MainContent_txtLastName').value = temp[1];
            document.getElementById('MainContent_txtEmail').value = temp[2];
            document.getElementById('MainContent_txtDOB').value = temp[3];
            document.getElementById('MainContent_txtZip').value = temp[4];
            temp[5] = temp[5] * 1;
            if (temp[5] != 0)
                document.getElementById('MainContent_txtClubNumber').value = pad(temp[5] * 1, 7);
            else
                document.getElementById('MainContent_txtClubNumber').value = "";

        }
    }

    function urlencode(str) {
     str = (str + '').toString();
     // Tilde should be allowed unescaped in future versions of PHP (as reflected below), but if you want to reflect current
     // PHP behavior, you would need to add ".replace(/~/g, '%7E');" to the following.
     //<asp:MenuItem Text="Winners" Value="Winners" NavigateUrl="~/Admin.aspx?mode=winners"></asp:MenuItem>
    return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').
    replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
}
</script>
<body>
    <form method="post" action="PrizeListing.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="..." />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
    theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=B-QJDloFIH6zi9l6t6PpH3tJCi66A__bc3-sRxoPxVSkTx6dFqSzP7vc0UTTeTxnNed5xMVH1VGfUUa8qo1iAvLU818zxlfR19KIJrXeu-s1&amp;t=635418570520000000" type="text/javascript"></script>


<script src="/WebResource.axd?d=Zjc-yOHn6GSN5YhoDKpAACkCBJZA0BFJ0rLxEl9NWYKhSlgLrWwXsCQOh3EFm9TuxliNaZ0Q8yjbi4n-dUstE6STwKZlN_9Isg6oxpqz-_s1&amp;t=635418570520000000" type="text/javascript"></script>
<script src="/WebResource.axd?d=u9Gp6MH3YJqc8KOG915kFWSw3WNz_B2TnFMZwu7_YRr2f_zKzc3GQfm47NqumQbz-E7Q0AQkPdJ1bePyop_-lzI0ZJu4vkY9meYpFUDuXn41&amp;t=635418570520000000" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>

<div class="aspNetHidden">

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="E8DE4789" />
    <input type="hidden" name="__SCROLLPOSITIONX" id="__SCROLLPOSITIONX" value="0" />
    <input type="hidden" name="__SCROLLPOSITIONY" id="__SCROLLPOSITIONY" value="0" />
    <input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="wOzdhF/eGKSleu4J6re//kumvjMfcANGhpGNXxDLH6ZF567RK/R6xWQSGPvzrdYAvgEufb37SoRpmxSNiJVngxCebZJ4jO/5ezK2ENFZvpfPxYWtuvd2qDO5+oYQIJUbwS1TBa8Kwu5ie3OSH31TMWx14zMmnAcoo90MrzInzyqwv7DnklOzVkXuWeTaK2Mmu0njD6y3lyJwpwT+pZBG03IRRab6eJT8RhX/pDvLkRp/4OW2aS53r0Qkm8gGSpOFaHmogcaCtIlwTicCjxVfNZCUiZM/gJ59WZsp/s7X+i1wOOpBSw35bhUHN96bLLhkytNKNGLHOizkc4iAQR96ma6Qysck3GHL5X5GQW9UuL4=" />
</div>
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    <span id="lblTitle">Prize Listing</span><br />
                </h1>
            </div>
            <div class="loginDisplay">
                <span id="LoginStatus">Logged In</span>
            </div>
            <div class="clear hideSkiplink">
                 <a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=m02C1Q6nTsIZLUog_8kCKvFy0yOrkzLZW9lWMeWMwCMnE_VYP4eZpgYMdPiXeqFRBbB05RkUPxTN9-If8doBtl0m9WBrXZUY9kV2NLvD8f81&amp;t=635418570520000000" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu">
    <ul class="level1">
        <li><a class="level1" href="Home.aspx">Home</a></li><li><a class="level1" href="PrizeListing.aspx">Prize Listing</a></li><li><a class="popout level1">Administration</a><ul class="level2">
            <li><a class="level2" href="Admin.aspx?mode=users">Users</a></li><li><a class="popout level2" href="Admin.aspx?mode=prizes">Prizes ></a><ul class="level3">
                <li><a class="level3" href="PrizesGLCodes.aspx">Prizes GL Codes</a></li>
            </ul></li><li><a class="popout level2" href="tournaments.aspx">Tournaments  ></a><ul class="level3">
                <li><a class="level3" href="TournamentTemplates.aspx">Tournament Templates</a></li>
            </ul></li><li><a class="popout level2" href="Admin.aspx?mode=winners">Winners ></a><ul class="level3">
                <li><a class="level3" href="IssueBountyPrizes.aspx">Issue Bounty Prizes</a></li><li><a class="level3" href="BannedAndHiddenPlayers.aspx">Merged\Banned Players</a></li>
            </ul></li><li><a class="popout level2" href="Inventory.aspx">Inventory ></a><ul class="level3">
                <li><a class="level3" href="ReconciliationNotes.aspx">Reconciliation Notes</a></li>
            </ul></li><li><a class="level2" href="ReceiveInventory.aspx">Receive Inventory</a></li>
        </ul></li><li><a class="popout level1">Reports</a><ul class="level2">
            <li><a class="level2" href="ReportsAllPrizes.aspx">All Prizes</a></li><li><a class="level2" href="ReportsPhysicalPrizes.aspx">Physical Prize Audit</a></li><li><a class="level2" href="ReportsReconciliation.aspx">Reconciliation</a></li><li><a class="level2" href="ReportsExactTargetEmailHistory.aspx">ExactTarget Email History</a></li>
        </ul></li><li><a class="level1" href="About.aspx">About</a></li>
    </ul>
</div><a id="NavigationMenu_SkipLink"></a>
            </div>
        </div>
        <div class="main">

    <div id="MainContent_pnlSearch" onkeypress="javascript:return WebForm_FireDefaultButton(event, &#39;MainContent_btnSearch&#39;)">

    <table>
<tr>
    <td colspan="2" class="style3">Search for Winner:
        <input name="ctl00$MainContent$txtSearch" type="text" maxlength="220" id="MainContent_txtSearch" />
    </td>
</tr>

<tr>
    <td class="style3" >
    Start: <input name="ctl00$MainContent$txtStartDate" type="text" value="9/14/2011" maxlength="10" id="MainContent_txtStartDate" /> End: 
    <input name="ctl00$MainContent$txtEndDate" type="text" value="10/21/2014" maxlength="10" id="MainContent_txtEndDate" />
        Status: 
        <select name="ctl00$MainContent$ddStatus" id="MainContent_ddStatus">
        <option value="--Filter By Status--">--Filter By Status--</option>
        <option value="All">All</option>
        <option selected="selected" value="Available">Available</option>
        <option value="Issued">Issued</option>
        <option value="Redeemed">Redeemed</option>
        <option value="Void">Void</option>
        <option value="Expired">Expired</option>

    </select>
    <br />
    <span id="MainContent_RequiredFieldValidator1" style="color:Red;display:none;">Start date is required.</span>&nbsp;
    <span id="MainContent_RequiredFieldValidator2" style="color:Red;display:none;">End date is required.</span>&nbsp;
    <span id="MainContent_RangeValidator1" style="color:Red;display:none;">Start date must be a valid date.</span>&nbsp;
    <span id="MainContent_RangeValidator2" style="color:Red;display:none;">End date must be a valid date.</span><br />
        <input type="submit" name="ctl00$MainContent$btnSearch" value="Search" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$btnSearch&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="MainContent_btnSearch" />
            <br />

    </td>
</tr>
<tr>
    <td colspan="2" class="style3">
        <br />


    </td>
</tr>
<tr>
<td colspan="2" class="style3">

</td>
</tr>
</table>

</div>

        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">

    </div>

<script type="text/javascript">
//<![CDATA[
var Page_Validators =  new Array(document.getElementById("MainContent_RequiredFieldValidator1"), document.getElementById("MainContent_RequiredFieldValidator2"), document.getElementById("MainContent_RangeValidator1"), document.getElementById("MainContent_RangeValidator2"));
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
var MainContent_RequiredFieldValidator1 = document.all ? document.all["MainContent_RequiredFieldValidator1"] : document.getElementById("MainContent_RequiredFieldValidator1");
MainContent_RequiredFieldValidator1.controltovalidate = "MainContent_txtStartDate";
MainContent_RequiredFieldValidator1.focusOnError = "t";
MainContent_RequiredFieldValidator1.errormessage = "Start date is required.";
MainContent_RequiredFieldValidator1.display = "Dynamic";
MainContent_RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_RequiredFieldValidator1.initialvalue = "";
var MainContent_RequiredFieldValidator2 = document.all ? document.all["MainContent_RequiredFieldValidator2"] : document.getElementById("MainContent_RequiredFieldValidator2");
MainContent_RequiredFieldValidator2.controltovalidate = "MainContent_txtEndDate";
MainContent_RequiredFieldValidator2.errormessage = "End date is required.";
MainContent_RequiredFieldValidator2.display = "Dynamic";
MainContent_RequiredFieldValidator2.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_RequiredFieldValidator2.initialvalue = "";
var MainContent_RangeValidator1 = document.all ? document.all["MainContent_RangeValidator1"] : document.getElementById("MainContent_RangeValidator1");
MainContent_RangeValidator1.controltovalidate = "MainContent_txtStartDate";
MainContent_RangeValidator1.focusOnError = "t";
MainContent_RangeValidator1.errormessage = "Start date must be a valid date.";
MainContent_RangeValidator1.display = "Dynamic";
MainContent_RangeValidator1.type = "Date";
MainContent_RangeValidator1.dateorder = "mdy";
MainContent_RangeValidator1.cutoffyear = "2029";
MainContent_RangeValidator1.century = "2000";
MainContent_RangeValidator1.evaluationfunction = "RangeValidatorEvaluateIsValid";
MainContent_RangeValidator1.maximumvalue = "01/01/2050";
MainContent_RangeValidator1.minimumvalue = "01/01/1900";
var MainContent_RangeValidator2 = document.all ? document.all["MainContent_RangeValidator2"] : document.getElementById("MainContent_RangeValidator2");
MainContent_RangeValidator2.controltovalidate = "MainContent_txtEndDate";
MainContent_RangeValidator2.focusOnError = "t";
MainContent_RangeValidator2.errormessage = "End date must be a valid date.";
MainContent_RangeValidator2.display = "Dynamic";
MainContent_RangeValidator2.type = "Date";
MainContent_RangeValidator2.dateorder = "mdy";
MainContent_RangeValidator2.cutoffyear = "2029";
MainContent_RangeValidator2.century = "2000";
MainContent_RangeValidator2.evaluationfunction = "RangeValidatorEvaluateIsValid";
MainContent_RangeValidator2.maximumvalue = "01/01/2025";
MainContent_RangeValidator2.minimumvalue = "01/01/1900";
//]]>
</script>

<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>
<script type="text/javascript">
//<![CDATA[

var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}

function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}

theForm.oldSubmit = theForm.submit;
theForm.submit = WebForm_SaveScrollPositionSubmit;

theForm.oldOnSubmit = theForm.onsubmit;
theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit;
//]]>
</script>
</form>
</body>
</html>

这是style.css：

/* DEFAULTS
----------------------------------------------------------*/

body   
{
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #034af3;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
    width: 100%;
    background-color: #fff;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
    width: 100%;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.main
{
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}


/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}

/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
}

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.submitButton
{
    text-align: right;
    padding-right: 10px;
}

.loginDiv
{
    position: absolute;
    left: 200px;
    top: 150px;
    height: 18px;
    width: 72px;
}

ASP菜单垂直加载

0 个答案: