0
私はページにタイルであるいくつかのdivがあるウェブページを持っています。 これらはすべて左側に浮動し、ページにログオンするユーザーの権限に応じて、多くのタイルだけが表示されます。html CSSが重複しているdivs
タイルをホバーすると、ユーザーがクリックしてナビゲートできるサブオプションが表示されます。
Javascriptを使用して上にホバリングしたときに、このタイルのCSSクラスを変更した、拡張したいページの1つのタイルがあります。
私の問題は、この新しい大きなタイルがページの他の小さなタイルと重なり合って欲しいということです。私が現時点で行うことができる唯一のことは、ページ上の他のタイルの下に表示し、それらを重ならないことです。私はこれらのdiv要素内のいくつかのイメージがあるが、これらを削除した
<center>
<asp:Table id="Table2" height="1000" align="center" table-layout="auto" style="margin-top: 25px;" max-width="1000" runat="server">
<asp:TableRow>
<asp:TableCell width="1000">
<xsl:if test="contains($allowedPermissions, '2147483569') or contains($allowedPermissions, '2147483560') or contains($allowedPermissions, '2147483497')">
<div class="smalltile" align="center" id="receipting" style="padding-right: 10px;" onmouseover="receiptingHover();" onmouseout="receiptingHoverOut();">
<br/>
<label id="receiptlabel" style="position: relative; top: 37px;" class="menuLabelFont">Receipting</label>
<xsl:if test="contains($allowedPermissions, '2147483569')">
<a href="javascript:Submit('../Payments/CashIntranetPayments.aspx','../Common/','');" title="Take customer present and customer not present payments using all payment types" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="browserreceiptinglabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Receipting</a>
<br/>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483560')">
<a href="javascript:Submit('javascript:Submit('../Sales/LaunchIntranet.aspx','../Common/','');" title="Display your sale forms in Intranet (not internet) mode and pay using the Card Payments module" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="intraneteformslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Intranet eForms</a>
<br/>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483497')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=CCPProfiles.xml','../Common/','');" title="CCPPlan Configuration" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="ccpplans" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">CCP Instalment Plans</a>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483568')">
<a href="javascript:Submit('../Reporting/SelectReport.aspx','../Common/','');" title="PARIS Reports Library">
<div class="smalltile" align="center" id="reporting" style="cursor: pointer; padding-top: 57px; padding-right: 10px;" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">
<span id="reportinglabel" class="menuLabelFont">Reporting</span>
</div>
</a>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483565') or contains($allowedPermissions, '2147483567') or contains($allowedPermissions, '2147483565') or contains($allowedPermissions, '2147483567')">
<div class="smalltile" align="center" id="sundryincomereturns" style="padding-right: 10px;" onmouseover="sundryIncomeHover();" onmouseout="sundryIncomeHoverOut();">
<br/>
<label id="sundrydebtorslabel" style="position: relative; top: 37px;" class="menuLabelFont">Sundry Income Returns</label>
<!--<xsl:if test="contains($allowedPermissions, '2147483565')">
<a href="javascript:Submit('../PARISMVC/Reconciliation/Reconciliation/index','../Common/','');" title="Manage Reconciliation of Sundry Income Returns" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="reconciliationlabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Reconciliation</a>
<br/>
<br/>
</xsl:if>-->
<!--<xsl:if test="contains($allowedPermissions, '2147483567')">
<a href="javascript:Submit('../PARISMVC/Returns/Home/Index','../Common/','');" title="Manage Sundry Income Returns" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="sundryincomelabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Returns</a>
<br/>
<br/>
</xsl:if>-->
<xsl:if test="contains($allowedPermissions, '2147483565')">
<a href="javascript:Submit('../PARISMVC/Reconciliation/Reconciliation/index','../Common/','');" title="Manage Reconciliation of Online Returns" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="reconversionone" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Reconciliation</a>
<br/>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483567')">
<a href="javascript:Submit('../PARISMVC/Returns/Home/Index','../Common/','');" title="Manage Online Returns" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="returnsversionone" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Returns</a>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483566')">
<div class="smalltile" align="center" id="transactions" style="padding-right: 10px;" onmouseover="transactionsHover();" onmouseout="transactionsHoverOut();">
<br/>
<label id="transactionslabel" style="position: relative; top: 37px;" class="menuLabelFont">Transactions</label>
<xsl:if test="contains($allowedPermissions, '2147483566')">
<a href="javascript:Submit('../Explorer/SelectTable.aspx?tablemenufile=transactions%20table%20menu.xml','../Common/','');" title="Examine the receipting transactions" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="viewtransactiondatalabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">View Transactions</a>
<br/>
<br/>
<a href="javascript:Submit('../Explorer/SelectTable.aspx?tablemenufile=saleforms.xml&foldername=Sales/Transactions','../Common/','');" title="View sale form transactions by type of sale form" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="vieweformtransactiondatalabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">View eForm Transactions</a>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483613') or contains($allowedPermissions, '2147483564')">
<div class="smalltile" align="center" id="suspense" style="padding-right: 10px;" onmouseover="suspenseHover();" onmouseout="suspenseHoverOut();">
<br/>
<label id="suspenselabel" style="position: relative; top: 37px;" class="menuLabelFont">Suspense</label>
<xsl:if test="contains($allowedPermissions, '2147483613')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=suspenseclearing.xml','../Common/','');" title="Manage your suspended transaction" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="commonsuspenseclearanceslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Common Suspense Clearances</a>
<br/>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483564')">
<a href="javascript:Submit('../Suspense/EditSuspenseTran.aspx','../Common/','');" title="Manage your suspended transaction" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="suspendedtransactionslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Suspended Transactions</a>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483594')">
<a href="javascript:Submit('../Transfer/Transfer.aspx','../Common/','');" title="Manage transaction transfers">
<div class="smalltile" align="center" id="transfer" style="cursor: pointer; padding-top: 57px; padding-right: 10px;" onmouseover="highlightOrange(this);" onmouseleave="unHighlightOrange(this);">
<img class="images" id="transfericon"
<span id ="transferlabel" class="menuLabelFont">Transfer</span>
</div>
</a>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483642') or contains($allowedPermissions, '2147483640') or contains($allowedPermissions, '2147483536') or contains($allowedPermissions, '2147483499') or contains($allowedPermissions, '2147483511') or contains($allowedPermissions, '2147483577') or contains($allowedPermissions, '2147483576') or contains($allowedPermissions, '2147483630') or contains($allowedPermissions, '2147483627') or contains($allowedPermissions, '2147483586') or contains($allowedPermissions, '2147483617') or contains($allowedPermissions, '2147483584') or contains($allowedPermissions, '2147483605') or contains($allowedPermissions, '2147483608') or contains($allowedPermissions, '2147483606') or contains($allowedPermissions, '2147483500') or contains($allowedPermissions, '2147483498')">
<center>
<div class="smalltile" align="center" id="admin" style="overflow: hidden; padding-right: 10px;" onmouseover="adminHover();" onmouseleave="outOfAdmin(); adminHoverOut();">
<br/>
<img class="imageswithsub" id="adminicon"
<label id="adminlabel" style="position: relative; padding-bottom: 4px;" class="adminFont">Admin</label>
<xsl:if test="contains($allowedPermissions, '2147483642') or contains($allowedPermissions, '2147483640')">
<div class="smalladmintile" align="center" id="admin1" style="overflow: hidden; padding-right: 10px; display: none;">
<br/>
<xsl:if test="contains($allowedPermissions, '2147483642')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=bankaccounts.xml','../Common/','');" title="Bank Account Configuration" style="cursor: pointer;" class="adminlabel" id="bankaccountslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Bank Accounts</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483640')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=bankitems.xml','../Common/','');" title="Bank Item Configuration" style="cursor: pointer;" class="adminlabel" id="bankitemconfigurationlabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Bank Item Configuration</a>
<br/>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483536') or contains($allowedPermissions, '2147483499')">
<div class="smalladmintile" align="center" id="admin2" style="overflow: hidden; padding-right: 10px; display: none;">
<br/>
<xsl:if test="contains($allowedPermissions, '2147483536')">
<a href="javascript:Submit('../ParisConfiguration/Bureau.aspx','../Common/','');" title="Bureau" style="cursor: pointer; width: 250px;" class="adminlabel" id="bureaulabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Bureau</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483499')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=bureaupaymentcard.xml','../Common/','');" title="Bureau Payment Card Configuration" style="cursor: pointer;" class="adminlabel" id="bureaupaymentcardlabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Bureau Payment Card</a>
<br/>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483498') or contains($allowedPermissions, '2147483511')">
<div class="smalladmintile" align="center" id="admin3" style="overflow: hidden; padding-right: 10px; display: none;">
<br/>
<xsl:if test="contains($allowedPermissions, '2147483498')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=CCPTemplates.xml','../Common/','');" title="CCPTemplate Configuration" style="cursor: pointer;" class="adminlabel" id="ccptemplateslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">CCP Templates</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483511')">
<a href="javascript:Submit('../ParisConfiguration/PayPal.aspx','../Common/','');" title="PayPal" style="cursor: pointer;" class="adminlabel" id="paypallabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">PayPal</a>
<br/>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483577') or contains($allowedPermissions, '2147483576')">
<div class="smalladmintile" align="center" id="admin4" style="overflow: hidden; padding-right: 10px; display: none;">
<br/>
<xsl:if test="contains($allowedPermissions, '2147483577')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=depositmethods.xml','../Common/','');" title="Deposit Methods Configuration" style="cursor: pointer;" class="adminlabel" id="depositmethodslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Deposit Methods</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483576')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=financialperiod.xml','../Common/','');" title="Financial Periods Configuration" style="cursor: pointer;" class="adminlabel" id="financialperiodslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Financial Periods</a>
<br/>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483630') or contains($allowedPermissions, '2147483584') or contains($allowedPermissions, '2147483627')">
<div class="smalladmintile" align="center" id="admin5" style="overflow: hidden; padding-right: 10px; display: none;">
<br/>
<xsl:if test="contains($allowedPermissions, '2147483584')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=returnform.xml','../Common/','');" title="Return Form" style="cursor: pointer;" class="adminlabel" id="returnformlabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Return Form</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483630')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=grouping.xml','../Common/','');" title="Grouping Configuration" style="cursor: pointer;" class="adminlabel" id="groupinglabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Grouping</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483627')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=location.xml','../Common/','');" title="Locations Configuration" style="cursor: pointer;" class="adminlabel" id="locationslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Locations</a>
<br/>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483586')">
<div class="smalladmintile" align="center" id="admin6" style="overflow: hidden; padding-right: 10px; display: none;">
<br/>
<xsl:if test="contains($allowedPermissions, '2147483586')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=miscellaneouscode.xml','../Common/','');" title="Miscellaneous Configuration" style="cursor: pointer;" class="adminlabel" id="miscconfiglabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Miscellaneous Configuration</a>
<br/>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483500')">
<div class="smalladmintile" align="center" id="admin7" style="overflow: hidden; padding-right: 10px; display: none;">
<xsl:if test="contains($allowedPermissions, '2147483500')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=integrator.xml','../Common/','');" title="Integrator Configuration" style="cursor: pointer;" class="adminlabel" id="integratorslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Integrators</a>
<br/>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483617') or contains($allowedPermissions, '2147483605') or contains($allowedPermissions, '2147483608') or contains($allowedPermissions, '2147483606')">
<div class="smalladmintile" align="center" id="admin8" style="overflow: hidden; padding-right: 10px; display: none;">
<xsl:if test="contains($allowedPermissions, '2147483605')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=group.xml','../Common/','');" title="Security Groups" style="cursor: pointer;" class="adminlabel" id="securitygroupslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Security Groups</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483608')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=user.xml','../Common/','');" title="User Management Configuration" style="cursor: pointer;" class="adminlabel" id="usermanagementlabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">User Management</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483617')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=restrictedtask.xml','../Common/','');" title="Restricted Task" style="cursor: pointer;" class="adminlabel" id="restrictedtasklabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Restricted Task</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483606')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=workstations.xml','../Common/','');" title="Workstations Configuration" style="cursor: pointer;" class="adminlabel" id="workstationslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Workstations</a>
<br/>
</xsl:if>
</div>
</xsl:if>
</div>
</center>
</xsl:if>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</center>
：
以下は私のコードです。
CSS：私のJavascriptの関数内で
.smalltile
{
height: 20%;
width: 30%;
background-color: #493084;
float: left;
margin: 5px;
list-style-type: none;
z-index: -1;
/*position: relative;*/
}
.smalladmintile
{
height: 25%;
width: 32%;
background-color: #493084;
float: left;
margin: 5px;
list-style-type: none;
z-index: -1;
}
.largetile
{
height: 60%;
width: 80%;
background-color: #493084;
margin: 5px;
text-align: center;
/*position: absolute;*/
float: left;
top: auto;
border-style: solid;
border-color: white;
padding-top: 15px;
padding-left: 35px;
padding-right: 15px;
z-index: 1000;
}
.adminlabel
{
font-family: Verdana,Arial,"serif";
font-size: 18px;
display: none;
color: white;
}
.menuLabelFont
{
color: white;
float: left;
padding-top: 50px;
padding-left: 10px;
font-family : Verdana,Arial,"serif";
font-size: 18px;
}
.adminFont
{
color: white;
float: left;
padding-top: 93px;
padding-left: 10px;
font-family : Verdana,Arial,"serif";
font-size: 18px;
}
.menuLabelInitiallyHidden
{
color: white;
float: right;
font-family: Verdana,Arial,"serif";
font-size: 18px;
display: none;
}
私は、管理タイルのCSSクラスを変更するには、次のコード行を持っている：
setTimeout(function(){document.getElementById('admin').className = 'largetile'; }, menuDelayTimeout);
は、どのように私は、この大規模なタイルを取得しに行きますかページ上の他のdivタイルと重なり、下に表示されませんか？
ご協力いただければ幸いです。
乾杯、 マイク
あなたがそこにコードのかなり多くを持って、マイク。あなたが持っている問題のライブサンプルを作成した場合は、デバッグが簡単になります。 – Shomz
合意。私は彼のコードを使いたがっていましたが、再作成したくありませんでした。 私はまだ完全にとして働いフィドルを取得することができたhaventはが https://jsfiddle.net/latherrarge/9v7de9cb/3/ 、Javascriptの機能が起動に失敗している：ここに –
は、私が働いてきたバイオリンです管理タイルの上にマウスを移動するとこのタイルの上にカーソルを置くと、管理タイルのCSSクラスが大きなタイルクラスに変更され、タイルのレイアウトに影響を与えない他のすべてのタイルと重なり合うはずです。 – Mike