填充此窗口的顶部？ [英] Filling the top part of this window?

查看：130 发布时间：2017/2/13 17:17:56 html css

本文介绍了填充此窗口的顶部？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个弹出窗口，看起来像这样

现在我想要顶部的颜色是绿色的，并且说Sökefterärende对窗口的所有方式进行扩展，以便用于关闭窗口是正确的。我试图设置colspan一个更大的值，但没有工作。你有什么想法我能做什么吗？这是我的HTML窗口

 < div class =popupid =popupF
 style = display：none; > 
 
 
< table width =100％border =0cellspacing =0cellpadding =2
 align =centerclass =TB_nb > 
< tr> 
< td colspan =3class =pusher TB_nb>< h2>Sökefterärende< / h2> 
< / td> 
< td>< a href =javascript：void（0）
 onclick =document.getElementById（'popupF'）。style.display ='none';> / a> 
< / td> 
< / tr> 
< / table> 
< br> 
< br> 
< h2 class =pusher>Sökefterärende< / h2> 
< div id =FVsok> 
 
< div 
 style =text-align：right; width：100％; padding-right：5％; padding-top：5px;> 
< span 
 onClick =getElementById（'FsokF'）。style.display =''，getElementById（'FbottomA'）。style.display ='none'，getElementById（'FbottomV'）。 style.display =''，getElementById（'FVsok'）。style.display ='none'
 class =link_sm> Visa& ouml; kformul& auml; r< / span> 
< / div> 
 
< / div> 
 
< div id =FsokF> 
 
< div 
 style =text-align：right; width：100％; padding-right：5％; padding-top：5px ;; padding-bottom：5px; > 
< span 
 onClick =getElementById（'FsokF'）。style.display ='none'，getElementById（'FbottomA'）。style.display ='none'，getElementById（'FbottomV'） .style.display =''，getElementById（'FVsok'）。style.display =''
 class =link_sm> D& ouml; lj s& ouml; kformul& auml; r< / span> ; 
< / div> 
 
< div style =width：100％; margin-left：15px; margin-right：80px; 
 class =fontS80> 
 
< div class =fl30>& nbsp; S& ouml; k efterärende< / div> 
< div class =clear>< / div> 
< div class =fl30> 
< input type =textsize =60
 name =searchArende> 
< / div> 
< div class =clear>< / div> 
 
< div class =fl30> 
< input type =buttonvalue =Avbryt> 
< / div> 
< div class =fl10> 
< input type =buttonvalue =S& ouml; k
 onclick =javascript：doSubmit（'Arendesokning'，'search'）> 
< / div> 
< div class =clear>& nbsp;< / div> 
< / div> 
 
< / div> 
< div style =width：100％; margin-left：15px; margin-right：15px;> 
< table width =100％border =0cellspacing =0cellpadding =4
 align =center> 
< tr> 
< td>< h3>Sökresultat：< / h3> 
< / td> 
< td>& nbsp;< / td> 
< td>& nbsp;< / td> 
< td>& nbsp;< / td> 
< / tr> 
< tr> 
< td colspan =4> En massa text< span class =link> Hj& auml; lp！< / span> 
< / td> 
< / tr> 
< tr> 
< td>< input type =buttonvalue =Visa alla> 
< / td> 
< td>& nbsp;< / td> 
< td>& nbsp;< / td> 
< td>& nbsp;< / td> 
< / tr> 
 
< tr class =smallb> 
< td> Antal& auml; renden：0< / td> 
< td>& nbsp;< / td> 
< td> Visa& auml; renden：< a class =link
 href =javascript：doSubmit（'MenyNavigation'，'REW_includes / fullfoljd_fran_sok.jsp'） 
< / a> & nbsp; & nbsp; < a class =link
 href =javascript：doSubmit（'MenyNavigation'，'FWD_includes / fullfoljd_fran_sok.jsp'）> 
< / a>< / td> 
< td>& nbsp;< / td> 
< / tr> 
< / table> 
 
< table width =100％cellspacing =0align =centerclass =sortable
 id =unique_id> 
< tr> 
< th class =thkant>Ärende< / th> 
< th class =thkant> Ingivningsdag< / th> 
< th class =thkant>Sökande1< / th> 
< th class =thkant> Uppfinnare1< / th> 
< th class =thkant> Ombud1< / th> 
<！ -  
< th class =thkant>地区< / th> 
< th class =thkant>土地< / th> 
< th class =thkant> Telefonnummer< / th>  - > 
< / tr> 
 
 
 
< tr class =g2
 onmouseover =javascript：setStoreStyle（this）
; onmouseout =javascript：getStoreStyle（this）
 onclick =javascript：goToOversikt（''，''，''，''，''，''）
 style =cursor：pointer ;> 
 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
 
< / tr> 
 
 
< tr class =g2
 onmouseover =javascript：setStoreStyle（this）
; onmouseout =javascript：getStoreStyle（this）
 onclick =javascript：goToOversikt（''，''，''，''，''，''）
 style =cursor：pointer ;> 
 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
 
< / tr> 
 
 
< tr class =g2
 onmouseover =javascript：setStoreStyle（this）
; onmouseout =javascript：getStoreStyle（this）
 onclick =javascript：goToOversikt（''，''，''，''，''，''）
 style =cursor：pointer ;> 
 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
 
< / tr> 
 
 
< tr class =g2
 onmouseover =javascript：setStoreStyle（this）
; onmouseout =javascript：getStoreStyle（this）
 onclick =javascript：goToOversikt（''，''，''，''，''，''）
 style =cursor：pointer ;> 
 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
 
< / tr> 
 
 
< tr class =g2
 onmouseover =javascript：setStoreStyle（this）
; onmouseout =javascript：getStoreStyle（this）
 onclick =javascript：goToOversikt（''，''，''，''，''，''）
 style =cursor：pointer ;> 
 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
 
< / tr> 
 
 
< tr class =g2
 onmouseover =javascript：setStoreStyle（this）
; onmouseout =javascript：getStoreStyle（this）
 onclick =javascript：goToOversikt（''，''，''，''，''，''）
 style =cursor：pointer ;> 
 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
 
< / tr> 
 
 
< tr class =g2
 onmouseover =javascript：setStoreStyle（this）
; onmouseout =javascript：getStoreStyle（this）
 onclick =javascript：goToOversikt（''，''，''，''，''，''）
 style =cursor：pointer ;> 
 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
 
< / tr> 
 
 
< tr class =g2
 onmouseover =javascript：setStoreStyle（this）
; onmouseout =javascript：getStoreStyle（this）
 onclick =javascript：goToOversikt（''，''，''，''，''，''）
 style =cursor：pointer ;> 
 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
 
< / tr> 
 
 
< tr class =g2
 onmouseover =javascript：setStoreStyle（this）
; onmouseout =javascript：getStoreStyle（this）
 onclick =javascript：goToOversikt（''，''，''，''，''，''）
 style =cursor：pointer ;> 
 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
 
< / tr> 
 
 
< tr class =g2
 onmouseover =javascript：setStoreStyle（this）
; onmouseout =javascript：getStoreStyle（this）
 onclick =javascript：goToOversikt（''，''，''，''，''，''）
 style =cursor：pointer ;> 
 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
< td> 
 
< / td> 
 
< / tr> 
 
 
< / table> 
 
 
< div id =FbottomV> 
< table width =100％align =center> 
 < td align =left>< input type =buttonid =visaknapp
 value =Visadisabled style =width：150px; 
 onClick =getElementById（'sokR'）。style.display =''，getElementById（'bottomA'）。style.display =''，getElementById（'bottomV'）。style.display ='none'， getElementById（'Vsok'）。style.display =''，getElementById（'sokF'）。style.display ='none'> 
< / td> 
< td align =right>< input type =buttonvalue =Avbryt
 style =width：150px; class =checkmargin>< input 
 type =buttonvalue =Infogadisabled style =width：150px;> 
< / td> 
< / tr> 
< / table> 
< / div> 
 
< div id =FbottomAstyle =display：none> 
< table width =100％align =center> 
 < td align =left>< input type =button
 value =& Auml; ndra i registerstyle =width：150px;& 
< / td> 
< td align =right>< input type =buttonvalue =Avbryt
 style =width：150px; class =checkmargin>< input 
 type =buttonvalue =Infogastyle =width：150px;> 
< / td> 
< / tr> 
< / table> 
< / div> 
< / div> 
 
< / div>

这是CSS

  * {font-family：arial;} 
 
 .avnamn {
颜色：＃90002b; 
 font-size：140％; 
 display：inline; 
 vertical-align：3％; 
 margin-left：1％; 
} 
 
 .b {border：1px solid＃000;} 
 
 .readonly {background-color：#CCC;} 
 
 .Webdings {
 font-family：Webdings; 
} 
 
 ul {margin-top：0px} 
 
 .mt3 {margin-top：-3px;} 
 .mt5p {margin-top ：5px;} 
 
 .fontS80 {font-size：80％;} 
a：link {color：＃000; text-decoration：none; } 
 a：visited {color：＃000; text-decoration：none; } 
 a：hover {color：＃000; text-decoration：none; } 
 a：active {color：＃000; text-decoration：none; } 
 
 .fontS75 {font-size：75％;} 
 
 .link {color：＃003366; 
 text-decoration：underline; 
 cursor：pointer; 
 font-weight：bold;} 
 
 .link_sm {color：＃003366; 
 text-decoration：underline; 
 cursor：pointer;} 
 
 .link_sm {font-size：70％; cursor：pointer;} 
 
 .small {font-size：75％; } 
 
 .smallg {font-size：75％; 
 color：＃555;} 
 
 .ssmall {
 font-size：65％; 
 font-weight：bold; 
 color：＃555; 
} 
 .small60 {font-size：60％;} 
 .small50 {
 font-size：50％; 
 color：＃333; 
} 
 .smallb {font-size：85％;} 
 table {display：inline;} 
 
 h1 {font-size：130％ inline;} 
 h2 {font-size：100％; display：inline;} 
 h3 {
 font-size：80％; 
 display：inline; 
 font-family：Arial Unicode MS，Arial，Helvetica，sans-serif; 
} 
 h4 {font-size：70％; display：inline;} 
 h5 {
 font-size：80％; 
 display：inline; 
 font-family：Arial Unicode MS，Arial，Helvetica，sans-serif; 
} 
 
 .hthin {
 font-size：125％; 
} 
 
 .th {text-align：left;} 
 
 td，th {font-size：75％; 
 vertical-align：text-top;} 
 .td_link {cursor：pointer;} 
 .td40 {height：40px;} 
 .td60 {height：60px;} 
 
 
 
 .thkant {
 border-top：1px solid＃000; 
 border-bottom：1px solid＃000; 
 font-size：70％; 
 text-align：left; 
} 
 
 .labb {F0F0E3; c1c1b3} 
 
 .bb {border-bottom：1px solid＃000;} 
 .bbV {border-bottom：1px solid #FFF;} 
 .TB_nbA {background-color ：#CCC;} 
 .TB_bt，.TB_nb，.TB_db，.TB_bb {background-color：#efefdc;} 
 
 .hk {background-color：＃d9ddb3;} 
 
 .hknot {background-color：＃f9faf2;} 
 / *<！ -  F8F8F1  - > * / 
 .TB_bt {border-top：1px solid #FFF ;} 
 .TB_bt5 {border-top：5px solid #FFF;} 
 .TB_bb {border-bottom：1px solid＃999;} 
 .TB_bb2 {border-bottom：2px solid＃ c1c1b3;} 
 .TB_db {border-bottom：1px solid＃000; border-top：1px solid＃000;} 
 .TB_tb {border-top：2px solid #efefdc;} 
 
 .TB_bo {border：2px solid #efefdc;} 
 .TB_bo_hk {border-top：1px solid #efefdc;} 
 
 
 .TB_bo2 {border：1px solid #efefdc;} 
 
 .TB_bo2B {
 border-top：2px solid＃c1c1b3; 
 border-left：3px solid #efefdc; 
 border-right：3px solid #efefdc; 
 border-bottom：2px solid＃c1c1b3; 
} 
 
 .TD_bo {
 border-right：1px solid＃c1c1b3; 
 width：9％; 
 font-size：70％; 
 text-align：center; 
} 
 
 .TD_bo2 {
 
 border-right：0; 
 width：9％; 
 font-size：70％; 
 text-align：center; 
} 
 
 .ytb {
 border-left：3px solid #efefdc; 
 border-right：3px solid #efefdc; 
} 
 
 .datum {
 font-size：70％; 
 padding-right：5px; 
 vertical-align：text-top;} 
 .sub {background：#EAEAEA;} 
 .sub_meny，.sub_meny_r，.sub_meny_active，.sub_meny_sm {
 font-size： 70％; 
 padding-left：20px; 
 padding-right：20px; 
 vertical-align：text-top;} 
 
 .sub_meny_sm {
 font-size：60％; 
 vertical-align：middle; 
 padding-left：10px; 
 padding-right：10px; 
} 
 
 .sub_meny_r {
 float：right; 
 font-size：70％; 
 padding-left：8px; 
 padding-right：8px;} 
 
 .sub_meny_rm {margin-top：4px;} 
 .sub_meny_active {font-weight：bold;} 
 
 .flikkant1 {
 background-image：url（../ images / fl1k.jpg）; 
 background-position：center; 
 z-index：-1;} 
 
 .inl_namn {
 font-weight：bold; 
 font-size：70％; 
 color：Black; 
 text-decoration：none;} 
 
 .th {text-align：left;} 
 .tr {text-align：right;} 
 $ b b .g1 {
 background-color：#FFF; 
 line-height：20px; 
} 
 
 .g2 {
 background-color：#EEE; 
 line-height：20px; 
} 
 
 .g3 {
 background-color：#DCDCDC; 
 line-height：20px; 
 font-weight：bold; 
 font-size：100％; 
} 
 .g4 {
 background-color：#CCC; 
 line-height：20px; 
} 
 
 .popup {
 border-color：＃000; 
 border-style：groove; 
 border-width：2px; 
 padding：0px; 
 background-color：#FFF; 
 font-size：70％; 
} 
 
 .popuphandlaggare {
 border-color：＃000; 
 border-style：groove; 
 border-width：2px; 
 padding：0px; 
 background-color：#FFF; 
 font-size：70％; 
 position：absolute; 
 top：900px; 
} 
 
 .popupN {
 background-color：＃F0F0E3; 
 color：＃000; 
 width：100％; 
 display：inline; 
 font-weight：bold; 
 height：auto; 
 padding：2px; 
 border-bottom：1px solid＃000; 
} 
 .pin {padding：6px;} 
 
 .fl10，.fl20，.fl30，.fl40，.fl50，.fl60，.fl70，.fl80， fl90，.fl100 {
 padding-bottom：4px; color：＃000000; 
} 
 
 .over {
 background-color：#EFEFDC; 
 line-height：20px; 
} 
 
 .half {
 line-height：50％; 
} 
 
 .quarter {
 line-height：25％; 
} 
 
 .lh10 {
 line-height：10％; 
} 
 
 .checkmargin {margin-right：25px;} 
 .checkmarginL {margin-left：25px;} 
 
 .pusher {padding- left：15px;} 
 .pusherR {margin-right：40px;} 
 
 .rand3 {background-color：#FFF; line-height：3px;} 
 .rand1 {background-color：#FFF; line-height：1px;} 
 
 .whiteborder {color：#ffffff; border：4px solid #ffffff; padding：10px; margin：10px; } 
 #details {width：700; color：#ffffff; } 
 .column1 {color：＃000000; margin：0; padding：0; width：600px; border：0; float：left; } 
 .column2 {color：＃000000; margin：0; padding：0; border：0; width：80px; float：right; } 
 
 .f200 {
 color：＃000000; 
} 
 
 .f210 {
 color：＃000000; float：left; 
} 
 .f220 {
 width：400; 
} 
 .f1450 {
 width：600; 
 float：left; 
} 
 .f1550 {
 width：150; 
 float：left; 
 padding：15px; 
} 
 .paddedcell {
 padding：15px; 
} 
 .b2 {border：2px solid #efefdc;} 
 .inp_sel {width：80％;} 
 
 .fl21 {float：left; padding：5px; margin：5px; width：150px;} .fl455 {float：left; padding：5px; margin：5px; width：120px;} 
 
 .form-bg {
 background：#eeefdf; 
 width：1000px; 
 overflow：hidden; 
} 
 .form-bg2 {
 background：#eeefdf; 
 width：100％; 
 overflow：hidden; 
} 
 .data-bar {
 border-bottom：1px solid＃fbfbf7; 
 display：inline-block; 
 padding：10px 10px; 
} 
 
 .left {
 float：left; 
 width：200px; 
 
} 
 .discount {
 float：right; 
 width：500px; 
 
} 
 .discounts {
 width：900px; 
 
} 
 .right {
 float：right; 
 width：700px; 
} 
 .yta20 {
 background：#eeefdf; 
 width：1100px; 
} 
 
 .yta2 {
 
 width：1100px; 
} 
 
 .data-box {
 width：650px; 
 height：100px; 
 border：1px solid #cbcbcb; 
} 
 #table td {
 margin：120px; 
} 
 
 #personName {float：left; width：300px; } #otherDetails {float：right; width：450px; } 
 
 .th_rad_sort {border-bottom：2px solid＃000000; text-decoration：none;} 
 
a img {border：0; outline：0;} 
 
 .horizontal-gradient2 {
 background：＃1a2adb; *旧版本浏览器* / 
背景：-moz-linear-gradient（left，＃1a2adb 0％，＃a1e6ed 100％）; / * FF3.6 + * / 
背景：-webkit-gradient线性，左上角，右上角，停止颜色（0％，＃1a2adb），停止颜色（100％，＃a1e6ed））; / * Chrome，Safari4 + * / 
背景：-webkit- （left，＃1a2adb 0％，＃a1e6ed 100％）; / * Chrome10 +，Safari5.1 + * / 
 background：-o-linear-gradient（left，＃1a2adb 0％，＃a1e6ed 100％）; / * Opera 11.10+ * / 
 background：-ms-linear-gradient（left，＃1a2adb 0％，＃a1e6ed 100％）; / * IE10 + * / 
 background：linear- ＃1a2adb 0％，＃a1e6ed 100％）; / * W3C * / 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃1a2adb'，endColorstr ='＃a1e6ed'，GradientType = 1）; / * IE6-9 * / 
 color：white; 
 width：1015px; 
} 
 .f {float：right; color：white;} 
 $ b b 
 .handlaggare {width：1000px; } 
 
 div.data-box-nat {
 margin-bottom：10px; 
 border：2px solid gray; 
 width：600px; 
} 
 div.data-box-pct {
 margin-bottom：10px; 
 border：2px solid gray; 
 width：600px; 
} 
 .newpopup {
 z-index：100; 
 position：absolute; 
 top：50％; 
 left：50％; 
 background-color：#ffffff; // not working 
 
}

解决方案

p>将顶部（麻烦）表更改为div：

 < div id =topBar> 
< span class =pusher TB_nb>< h2>Sökefterärende< / h2>< / span> 
< span id =close> 
< a href =javascript：void（0）onclick =document.getElementById（'popupF'）。style.display ='none';> X< / a> 
< / span> 
< / div>

然后添加此css：

  #topBar {width：100％; background-color：#EFEFDC;} 
 #close {position：absolute; right：5px;}

举个例子： http://jsfiddle.net/FSra3/

在旁注 ，你真的不应该使用表。表格仅用于表格数据，不用于布局。

I've got a popup window that looks like this

Now I want to top part where the color is green and it says "Sök efter ärende" to strech all the way of the window so that the X that is used to close the window is right at the very right. I tried setting colspan to a larger value but that did not work. Do you have any idea what I could do? This is my HTML for the window

<div class="popup" id="popupF" 
            style="display: none;" >


<table width="100%" border="0" cellspacing="0" cellpadding="2"
    align="center" class="TB_nb">
    <tr>
        <td colspan="3" class="pusher TB_nb"><h2>Sök efter ärende</h2>
        </td>
        <td><a href="javascript:void(0)"
            onclick="document.getElementById('popupF').style.display = 'none';">X</a>
        </td>
    </tr>
</table>
<br>
<br>
<h2 class="pusher">Sök efter ärende</h2>
<div id="FVsok">

    <div
        style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;">
        <span
            onClick="getElementById('FsokF').style.display='', getElementById('FbottomA').style.display='none', getElementById('FbottomV').style.display='', getElementById('FVsok').style.display='none'"
            class="link_sm">Visa s&ouml;kformul&auml;r</span>
    </div>

</div>

<div id="FsokF">

    <div
        style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;">
        <span
            onClick="getElementById('FsokF').style.display='none', getElementById('FbottomA').style.display='none', getElementById('FbottomV').style.display='', getElementById('FVsok').style.display=''"
            class="link_sm">D&ouml;lj s&ouml;kformul&auml;r</span>
    </div>

    <div style="width: 100%; margin-left: 15px; margin-right: 80px;"
        class="fontS80">

        <div class="fl30">&nbsp;S&ouml;k efter ärende</div>
        <div class="clear"></div>
        <div class="fl30">
            <input type="text" size="60"
                name="searchArende">
        </div>
        <div class="clear"></div>

        <div class="fl30">
            <input type="button" value="Avbryt">
        </div>
        <div class="fl10">
            <input type="button" value="  S&ouml;k  "
                onclick="javascript:doSubmit('Arendesokning', 'search')">
        </div>
        <div class="clear">&nbsp;</div>
    </div>

</div>
<div style="width: 100%; margin-left: 15px; margin-right: 15px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="4"
        align="center">
        <tr>
            <td><h3>Sökresultat:</h3>
            </td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="4">En massa text <span class="link">Hj&auml;lp!</span>
            </td>
        </tr>
        <tr>
            <td><input type="button" value="Visa alla">
            </td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr class="smallb">
            <td>Antal &auml;renden: 0</td>
            <td>&nbsp;</td>
            <td>Visa &auml;renden: <a class="link"
                href="javascript:doSubmit('MenyNavigation', 'REW_includes/fullfoljd_fran_sok.jsp')">
                     </a> &nbsp;  &nbsp; <a class="link"
                href="javascript:doSubmit('MenyNavigation', 'FWD_includes/fullfoljd_fran_sok.jsp')">
                     </a></td>
            <td>&nbsp;</td>
        </tr>
    </table>

    <table width="100%" cellspacing="0" align="center" class="sortable"
        id="unique_id">
        <tr>
            <th class="thkant">Ärende</th>
            <th class="thkant">Ingivningsdag</th>
            <th class="thkant">Sökande1</th>
            <th class="thkant">Uppfinnare1</th>
            <th class="thkant">Ombud1</th>
            <!--
    <th class="thkant">Region</th>
    <th class="thkant">Land</th>
    <th class="thkant">Telefonnummer</th>-->
        </tr>



        <tr  class="g2"
            onmouseover="javascript:setStoreStyle(this)"
            ; onmouseout="javascript:getStoreStyle(this)" 
            onclick="javascript:goToOversikt('','','','','','')"
            style="cursor: pointer;">

            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>

        </tr>


        <tr  class="g2"
            onmouseover="javascript:setStoreStyle(this)"
            ; onmouseout="javascript:getStoreStyle(this)" 
            onclick="javascript:goToOversikt('','','','','','')"
            style="cursor: pointer;">

            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>

        </tr>


        <tr  class="g2"
            onmouseover="javascript:setStoreStyle(this)"
            ; onmouseout="javascript:getStoreStyle(this)" 
            onclick="javascript:goToOversikt('','','','','','')"
            style="cursor: pointer;">

            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>

        </tr>


        <tr  class="g2"
            onmouseover="javascript:setStoreStyle(this)"
            ; onmouseout="javascript:getStoreStyle(this)" 
            onclick="javascript:goToOversikt('','','','','','')"
            style="cursor: pointer;">

            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>

        </tr>


        <tr  class="g2"
            onmouseover="javascript:setStoreStyle(this)"
            ; onmouseout="javascript:getStoreStyle(this)" 
            onclick="javascript:goToOversikt('','','','','','')"
            style="cursor: pointer;">

            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>

        </tr>


        <tr  class="g2"
            onmouseover="javascript:setStoreStyle(this)"
            ; onmouseout="javascript:getStoreStyle(this)" 
            onclick="javascript:goToOversikt('','','','','','')"
            style="cursor: pointer;">

            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>

        </tr>


        <tr  class="g2"
            onmouseover="javascript:setStoreStyle(this)"
            ; onmouseout="javascript:getStoreStyle(this)" 
            onclick="javascript:goToOversikt('','','','','','')"
            style="cursor: pointer;">

            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>

        </tr>


        <tr  class="g2"
            onmouseover="javascript:setStoreStyle(this)"
            ; onmouseout="javascript:getStoreStyle(this)" 
            onclick="javascript:goToOversikt('','','','','','')"
            style="cursor: pointer;">

            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>

        </tr>


        <tr  class="g2"
            onmouseover="javascript:setStoreStyle(this)"
            ; onmouseout="javascript:getStoreStyle(this)" 
            onclick="javascript:goToOversikt('','','','','','')"
            style="cursor: pointer;">

            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>

        </tr>


        <tr  class="g2"
            onmouseover="javascript:setStoreStyle(this)"
            ; onmouseout="javascript:getStoreStyle(this)" 
            onclick="javascript:goToOversikt('','','','','','')"
            style="cursor: pointer;">

            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>

        </tr>


    </table>


    <div id="FbottomV">
        <table width="100%" align="center">
            <tr>
                <td align="left"><input type="button" id="visaknapp"
                    value="Visa" disabled style="width: 150px;"
                    onClick="getElementById('sokR').style.display='', getElementById('bottomA').style.display='', getElementById('bottomV').style.display='none', getElementById('Vsok').style.display='', getElementById('sokF').style.display='none'">
                </td>
                <td align="right"><input type="button" value="Avbryt"
                    style="width: 150px;" class="checkmargin"><input
                    type="button" value="Infoga" disabled style="width: 150px;">
                </td>
            </tr>
        </table>
    </div>

    <div id="FbottomA" style="display: none">
        <table width="100%" align="center">
            <tr>
                <td align="left"><input type="button"
                    value="&Auml;ndra i register" style="width: 150px;">
                </td>
                <td align="right"><input type="button" value="Avbryt"
                    style="width: 150px;" class="checkmargin"><input
                    type="button" value="Infoga" style="width: 150px;">
                </td>
            </tr>
        </table>
    </div>
</div>

        </div>

And this is the CSS

*  {font-family:arial;}

.avnamn{ 
                color: #90002b; 
                font-size: 140%; 
                display: inline; 
                vertical-align: 3%; 
                margin-left: 1%;
                }

.b{border:1px solid #000;}

.readonly{background-color: #CCC;}

.Webdings{
    font-family: Webdings;
    }

ul{margin-top: 0px}

.mt3{margin-top:-3px;}
.mt5p{margin-top:5px;}

.fontS80 {font-size: 80%;} 
a:link{color:#000; text-decoration:none; }
a:visited{color:#000; text-decoration:none; }
a:hover{color:#000; text-decoration:none; }
a:active{color:#000; text-decoration:none; }

.fontS75 {font-size: 75%;} 

.link{color: #003366;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;}

.link_sm{color: #003366;
    text-decoration: underline;
    cursor: pointer;}

.link_sm{font-size: 70%;cursor: pointer;}

.small{font-size: 75%;}

.smallg{font-size: 75%;
color: #555;}

.ssmall{
    font-size: 65%;
    font-weight: bold;
    color: #555;
}
.small60{font-size: 60%;}
.small50{
    font-size: 50%;
    color: #333;
}
.smallb{font-size: 85%;}
table{display:inline;}

h1{font-size: 130%;display:inline;}
h2{font-size: 100%;display:inline;}
h3{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}
h4{font-size: 70%;display:inline;}
h5{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}

.hthin{
    font-size: 125%;
}

.th {text-align: left;}

td, th{font-size: 75%;
    vertical-align: text-top;}
.td_link{cursor: pointer;}
.td40{height:40px;}
.td60{height:60px;}



.thkant{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 70%;
        text-align: left;
}

.labb{F0F0E3; c1c1b3 }

.bb{border-bottom: 1px solid #000;}
.bbV{border-bottom: 1px solid #FFF;}
.TB_nbA {background-color:#CCC;}
.TB_bt, .TB_nb, .TB_db, .TB_bb {background-color:#efefdc;}

.hk {background-color:#d9ddb3;}

.hknot {background-color:#f9faf2;}
/*<!--F8F8F1-->*/
.TB_bt{border-top: 1px solid #FFF;}
.TB_bt5{border-top: 5px solid #FFF;}
.TB_bb{border-bottom: 1px solid #999;}
.TB_bb2{border-bottom: 2px solid #c1c1b3;}
.TB_db{border-bottom: 1px solid #000; border-top: 1px solid #000;}
.TB_tb{border-top: 2px solid #efefdc;}

.TB_bo{border: 2px solid #efefdc;}
.TB_bo_hk{border-top: 1px solid #efefdc;}


.TB_bo2{border: 1px solid #efefdc;}

.TB_bo2B{
border-top: 2px solid #c1c1b3;
border-left: 3px solid #efefdc;
border-right: 3px solid #efefdc;
border-bottom: 2px solid #c1c1b3;
}

.TD_bo{
    border-right: 1px solid #c1c1b3;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.TD_bo2{

    border-right: 0;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.ytb{
    border-left:3px solid #efefdc;
    border-right:3px solid #efefdc;
}

.datum {
    font-size: 70%;
    padding-right: 5px;
    vertical-align: text-top;} 
.sub {background:#EAEAEA;}
.sub_meny, .sub_meny_r, .sub_meny_active, .sub_meny_sm{
    font-size: 70%;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: text-top;}

.sub_meny_sm {
    font-size: 60%;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
}   

.sub_meny_r{
    float:right;
    font-size: 70%;
    padding-left: 8px;
    padding-right: 8px;}

.sub_meny_rm{margin-top:4px;}
.sub_meny_active{font-weight: bold;}

.flikkant1 {
    background-image: url(../images/fl1k.jpg);
    background-position: center;
    z-index: -1;}

.inl_namn{
    font-weight: bold;
    font-size: 70%;
    color: Black;
    text-decoration: none;}

.th{text-align: left;}
.tr{text-align: right;}

.g1{
    background-color: #FFF;
    line-height: 20px;
}

.g2{
    background-color: #EEE;
    line-height: 20px;
}

.g3{
    background-color: #DCDCDC;
    line-height: 20px;
    font-weight: bold;
    font-size: 100%;
}
.g4{
    background-color: #CCC;
    line-height: 20px;
}

.popup{
    border-color: #000; 
    border-style: groove; 
    border-width: 2px; 
    padding: 0px; 
    background-color: #FFF;
    font-size: 70%;
}

.popuphandlaggare{ 
    border-color: #000;
    border-style: groove;      
    border-width: 2px;      
    padding: 0px;      
    background-color: #FFF;     
    font-size: 70%;     
    position: absolute;     
    top: 900px; 
    }

.popupN{
    background-color: #F0F0E3;
    color: #000;
    width: 100%;
    display: inline;
    font-weight: bold;
    height: auto;
    padding: 2px;
    border-bottom: 1px solid #000;
}
.pin{padding: 6px;}

.fl10, .fl20, .fl30, .fl40, .fl50, .fl60, .fl70, .fl80, .fl90, .fl100 {
    padding-bottom:4px;color: #000000;
}

.over{
    background-color: #EFEFDC;
    line-height: 20px;
}

.half{
line-height:50%;
}

.quarter{
line-height:25%;
}

.lh10{
line-height:10%;
}

.checkmargin {margin-right: 25px;}  
.checkmarginL {margin-left: 25px;}  

.pusher {padding-left: 15px;"}
.pusherR {margin-right: 40px;"}

.rand3{background-color: #FFF; line-height: 3px;}
.rand1{background-color: #FFF; line-height: 1px;}

.whiteborder {     color: #ffffff;      border: 4px solid #ffffff;      padding: 10px;      margin: 10px; }
#details { width: 700; color: #ffffff; }
.column1 {     color: #000000; margin: 0;      padding: 0;     width: 600px;     border:0;     float: left; }
.column2 {     color: #000000;margin: 0;      padding: 0;     border:0;     width: 80px;     float: right; }

.f200 {
    color: #000000;
}

.f210 {
    color: #000000;float: left;
}
.f220 {
    width: 400;
}
.f1450 {
    width: 600;
    float:left;
}
.f1550 {
    width: 150;
    float:left;
    padding:15px;
}
.paddedcell {
    padding:15px;
}
.b2{border:2px solid #efefdc;}
.inp_sel{width: 80%;}

.fl21{float:left; padding:5px; margin:5px; width:150px;} .fl455{float:left; padding:5px; margin:5px; width:120px;} 

.form-bg {
  background: #eeefdf;
  width:1000px;
  overflow:hidden;
}
.form-bg2 {
  background: #eeefdf;
  width:100%;
  overflow:hidden;
}
.data-bar {
  border-bottom:1px solid #fbfbf7;
  display:inline-block;
  padding:10px 10px;
}

.left {
float:left;
width:200px;

}
.discount {
float:right;
width:500px;

}
.discounts {
width:900px;

}
.right {
float:right;
width:700px;
}
.yta20 {
background: #eeefdf;
width:1100px;
}

.yta2 {

width:1100px;
}

.data-box {
width:650px;
height:100px;
border:1px solid #cbcbcb;
}
#table td { 
margin:120px; 
} 

#personName {     float:left;     width:300px;   }  #otherDetails {     float:right;     width:450px;      }

.th_rad_sort {border-bottom: 2px solid #000000; text-decoration: none;"}

a img { border: 0; outline:0;}

.horizontal-gradient2 {
    background: #1a2adb; /* Old browsers */
    background: -moz-linear-gradient(left,  #1a2adb 0%, #a1e6ed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1a2adb), color-stop(100%,#a1e6ed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* IE10+ */
    background: linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a2adb', endColorstr='#a1e6ed',GradientType=1 ); /* IE6-9 */
    color: white;
    width: 1015px;
}
.f { float: right;     color: white; }


.handlaggare { width: 1000px; }

div.data-box-nat{
    margin-bottom: 10px;
    border: 2px solid gray;
    width: 600px;
}
div.data-box-pct{
    margin-bottom: 10px;
    border: 2px solid gray;
    width: 600px;
}
.newpopup {
z-index:100;
 position: absolute; 
  top:50%;
  left:50%;
  background-color:#ffffff; //not working

}

解决方案

Change the top (troublesome) table to div:

<div id="topBar">
  <span class="pusher TB_nb"><h2>Sök efter ärende</h2></span>
  <span id="close">
    <a href="javascript:void(0)" onclick="document.getElementById('popupF').style.display = 'none';">X</a>
  </span>
</div>

Then add this css:

#topBar {width:100%; background-color:#EFEFDC;}
#close {position:absolute; right:5px;}

Heres an example: http://jsfiddle.net/FSra3/

On a side note, you really should not be using tables. Tables are for tabular data only, not to be used for layout.

这篇关于填充此窗口的顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

填充此窗口的顶部？ [英] Filling the top part of this window?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

填充此窗口的顶部？ [英] Filling the top part of this window?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭