Fatal编程技术网
  • html/
  • Html div文本与另一个div重叠

Html div文本与另一个div重叠

html css

Html div文本与另一个div重叠,html,css,Html,Css,我无法让我的div文本停止重叠，我不知道为什么。文本是从JS文件中提取的，以防没有填充任何内容 由于某些原因，我无法使div.subheader类中的文本停止与div.resource类重叠 HTML 您必须尝试向添加样式规则。subHeader溢出：auto您必须尝试向添加样式规则。subHeader溢出：auto是的，如果可能的话，我想说您需要在这里设置JS小提琴，或者至少尝试在您的问题中构建代码。抱歉，它的格式不正确。现在应该可以修复了。我建议你从你提供的代码中去掉一些不相关的东西，比如你

我无法让我的div文本停止重叠，我不知道为什么。文本是从JS文件中提取的，以防没有填充任何内容

由于某些原因，我无法使div.subheader类中的文本停止与div.resource类重叠

HTML

您必须尝试向
添加样式规则。subHeader
溢出：auto
您必须尝试向
添加样式规则。subHeader
溢出：auto

是的，如果可能的话，我想说您需要在这里设置JS小提琴，或者至少尝试在您的问题中构建代码。抱歉，它的格式不正确。现在应该可以修复了。我建议你从你提供的代码中去掉一些不相关的东西，比如你的问题不需要的grand parent div或css。欢迎来到Stack Overflow！寻求代码帮助的问题必须包括所需的行为、特定的问题或错误以及在问题本身中重现这些问题所需的最短代码。是的，如果可能的话，我想说你需要在这里设置JS小提琴，或者至少尝试在问题中构造代码。抱歉，它格式不正确。现在应该可以修复了。我建议你从你提供的代码中去掉一些不相关的东西，比如你的问题不需要的grand parent div或css。欢迎来到Stack Overflow！寻求代码帮助的问题必须包括所需的行为、特定的问题或错误以及在问题本身中重现这些问题所需的最短代码。 
<body>
        <div class="loading" id="loading"><img src="./images/dash-loading-graphic.gif"/></div>
        <div class="contactsScreen" id="contactsScreen"></div><div style="text-align:center;" id="popupTbl"></div> 
        <table class="maintable">
            <tr style="vertical-align: top; height: 130px;">
                <td class="header"><div id="qcntntTbl"></div><div class="mainHeader" id="mainHeader"></div>
                <br/>
                <div class="subHeader" id="subHeader"></div>
                </br>
                <div class="resource">
                    <div class="resourcesVideo"><a href="javascript: openVidWin();"><script type="text/javascript">document.write("<img alt=\"\" src=\"" + imgpath + "playbutton.gif\" class=\"playButton\">");</script> <span class="resourceTxt" id="videoTxt"></span></a></div>
                    <div class="resourcesEE"><a href="javascript: setHelpContent(0);"><script type="text/javascript">document.write("<img alt=\"\" src=\"" + imgpath + "documentIcon.gif\" class=\"docIcon\"/>");</script> <span class="resourceTxt" id="empRsrcs"></span></a></div>
                    <div class="resourcesMgr" id="divMgrResource"><a href="javascript: setHelpContent(1);"><script type="text/javascript">document.write("<img alt=\"\" src=\"" + imgpath + "documentIcon.gif\" class=\"docIcon\"/>");</script><span class="resourceTxt" id="mgrRsrcs"></span></a></div>
                </div></td>
            </tr>
            <tr>
                <td><div id="ActnContent"></div></td>
            </tr>
        </table>
        <script type="text/javascript">
        function findObj(){
            if (filesloaded !=4) {  
                cntrnum = cntrnum + 1;
                setTimeout(findObj,2000);
                if (cntrnum == 20){
                    alert(" - Please contact your local IT Helpdesk for assistance viewing the What's Happening Now content. \n The content object is not defined.");
                }
            }
            else{
                document.getElementById("loading").style.display = "none";
                if (qryStrArr.length == 3 && frameQuarterIndicator.length == 1 && checkValidQuarter(frameQuarterIndicator) == true){
                    changeQ(frameQuarterIndicator);
                }
                else{
                changeQ(getThisQ());}
            }
        }
            //test to see if the js file loaded
        findObj();  
        </script>

    </body>

a.sfLink {font-family: Segoe Print; size; 10}
a {text-decoration:none;}
a:hover {text-decoration: underline;}
a.qLink:hover {text-decoration:none;}
a.whtNavLinks {color:#FFFFFF; font-family: Corbel; font-size: 14px; text-decoration: none; font-weight: bold;}
div {box-sizing: border-box;}
div.actnHeader {position: absolute; top: 12px; right: 285px;}
div.contactsScreen {display: none; z-index:-4; position: absolute; top: 0px; right: 0px; width:582px; height:100%; background-color :#ffffff; opacity: 0.70; filter: alpha(opacity=70);}
div.contactsTbl {display: none; z-index:-5; position: absolute; top: 15px; width: 530px; background-color :#cfcfcf; padding: 1px; border-style: solid; border-radius: 10px; border-width: 1px 2px 3px 1px; border-color: #aeaeae #aeaeae #989898 #aeaeae; font-family: Corbel;}
div.emplHeader {position: absolute; top: 15px; right: 62px;}
div.hlpCtgDiv {border-radius: 10px; border-width: 1px; border-style:dotted; border-color: #ffffff; display: none; width:494px;}
div.loading {z-index: 100; position: absolute; top: 5px; right: 0px; width: 100%; height: 390px; background-color: 2195DF; text-align: center; vertical-align: middle;}
div.mgrHeader {position: absolute; top: 15px; right: -8px; width: 60px; text-align:center;}
div.processBlurb {font-family: Segoe Print; font-size: 16px; text-align: center; width:430px; margin-bottom:10px;}
div.subHeader {z-index: 0; float: left; clear: both; height: 26px; width: 530px; font-family: Calibri, Arial; font-style: italic; font-size:12px; font-weight:bold; text-align: center;}
div.mainHeader {float: left; height: 30px; width: 530px; font-family: Calibri, Arial; font-size: 14pt; font-weight:bold; color:#ffffff; text-align: center; vertical-align: middle; border-style: solid; border-bottom-left-radius: 7px; border-bottom-right-radius:7px; border-width: 0px 2px 3px 1px; border-color: #c6c6c6 #c6c6c6 #888888 #c6c6c6;}
div.q {float: left; vertical-align:top; background-color: #fffce7; border-style: solid; border-top-left-radius: 10px; border-top-right-radius:10px; border-width: 1px 2px 0px 1px; border-color: #fff8c4 #fff8c4 #ece39c #fff8c4; width: 90px; height: 60px; color:#c6c6c6;}
div.qCurrent {float: left; vertical-align:top; border-style: solid; border-top-left-radius: 10px; border-top-right-radius:10px; border-width: 1px 2px 0px 1px; border-color: #c6c6c6 #c6c6c6 #666666 #c6c6c6; width: 248px;  height: 60px; color:#3f3f3f;}
div.qcontentTbl {float: left; align: center; width: 440px;}
div.qcontentTbl {float: left; align: center; width: 440px;}
div.qspacerRow {float: left; width: 4px; height: 60px; padding:0px}
div.quarterTitle {position: relative; top: 10px; text-align:center; font-family: Corbel; font-size: 14px;}
div.quarterTitle:hover {position: relative; top: 10px; text-align:center; font-family: Corbel; font-size: 14px; border-radius: 5px; border: solid; border-width: 1px 2px 2px 1px; background-color :#fff; border-color: #fff8c4 #fff8c4 #ece39c #fff8c4;}
div.quarterText {position: relative; top: 10px; text-align:center;  font-family: Corbel; font-size: 14px;}
div.quarterTitleCurrent {position: relative; top: -1px; text-align: center; font-family: Corbel; font-size: 32px; color:#ffffff;}
div.quarterTextCurrent {position: relative; top: -1px;  text-align:center; vertical-align:top; font-family: Corbel; font-size: 14px; color:#ffffff; line-height: 110%;}
div.resource {z-index: 2; left; clear: both; width: 530px; height: 30px; background-color: #fffce7; border-style: solid; border-radius: 7px; border-width: 1px 2px 3px 1px; border-color: #fff8c4 #fff8c4 #ece39c #fff8c4; font-family: Corbel, Arial;}
div.resourcesVideo{position: absolute; left: 85px;font-family: Corbel; font-size:11px; font-weight: bold; text-align: left; line-height: 70%; }
div.resourcesEE {position: absolute; left: 220px;font-family: Corbel; font-size:11px; font-weight: bold; line-height: 23px; text-align: left; line-height: 70%;}
div.resourcesMgr {position: absolute; left: 355px;font-family: Corbel; font-size:11px; font-weight: bold;  text-align: left; line-height: 70%;}
div.subHeaderBlurb {position: absolute; top: 80px; left: 130px; width: 400px; font-family: Segoe Print; font-size:12px; color:#3f3f3f;}
img.docIcon {vertical-align: middle; height: 23px; border: 0;}
img.docIconSmall {position: relative; left: 8px; height: 20px; border: 0;}
img.emailimg {height: 20px; border:0;}
img.empHdLn {position: absolute; top: 27px; right: 40px; width: 2px; height: 10px;}
img.mgrHdLn {position: absolute; top: 13px; right: 12px; width: 2px; height: 26px;}
img.playButton {vertical-align: middle; height: 20px; border: 0;}
img.helpicon {float: left;  height:20px; border:0;}
span.resourceTxt {width: 100px; height: 20px; vertical-align: middle;}
table.contactsGrid {width:500px;}
table.helpTbl {width:500px; border-color:#FFFFFF; border-radius: 10px; border-width: 1px; border-style: dotted; padding: 0px; border-spacing: 0px}
table.hlpCtgTbl {padding: 0px; border-spacing: 0px; border-width: 0px; border-radius: 10px; width: 100%; background-color: #fffce7;}
table.maintable {position: absolute; top: 0px; left: 0px; width: 530px; border-width: 0px; border-color: #000; padding: 0px; border-spacing: 0px;}
td.actnMgrSpc {padding-left: 5px;} 
td.actnVertLn {border-right: dotted 1px; border-color: #ededed; padding-left: 5px; padding-right: 5px;}
td.contacts {color:#FFFFFF;  text-align: left; vertical-align:top; margin: 20px; border-color:#a0a6a7; border-bottom: dotted 1px; font-family: Corbel; font-size: 12px;}
td.contactshdr {color:#FFFFFF; text-align: left; vertical-align:top; margin: 20px; border-color:#a0a6a7; border-bottom: dotted 1px; font-family: Corbel; font-weight: bold; font-size: 12px;}
td.gridheader {position: relative; font-family: Corbel; font-size:12px; font-weight: bold; background:url("images/ActionTableGradient.gif");  background-repeat: repeat; background-size: 462px 35px;}
td.gridsubheader {font-family: Corbel; font-size:13px; font-weight: bold; color: #3f3f3f; padding-right: 4px;}
td.gridtext {font-family: Corbel; font-size:12px; color: #000000; height: 35px;}
td.divider {border-bottom: dotted 2px; border-color: #c5c5c5 #ededed #c5c5c5 #ededed;}
td.header {width: 530px; padding: 0px;}
td.helpborder {border-right: double 3px; border-color: #fc1919; width: 35px;}
td.helpList {z-index: 5; background-color: #fffce7; border-style: solid; border-radius: 10px; border-width: 1px 2px 3px 1px; border-color: #fff8c4 #fff8c4 #ece39c #fff8c4; font-family: Corbel; font-size:8px; font-weight:normal; vertical-align: top; width: 400px; height: 100%;}
td.linksList {vertical-align:top;}
tr.helpItem {font-family: Corbel; font-size:12px; font-weight:normal; vertical-align: middle; height: 25px;}
tr.helpItemHiglight {font-family: Corbel; font-size:12px; font-weight:normal; vertical-align: middle; height: 25px; background-color: #FFFEF4; cursor:pointer; border-radius: 10px; border-width: 1px 2px 3px 1px;}
ul, li {list-style-type: circle; padding: 0; margin-left: 10; font-weight: bold;}