填充此窗口的顶部? [英] Filling the top part of this window?
问题描述
我有一个弹出窗口,看起来像这样
现在我想要顶部的颜色是绿色的,并且说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ökformulä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ölj sökformulär</span>
</div>
<div style="width: 100%; margin-left: 15px; margin-right: 80px;"
class="fontS80">
<div class="fl30"> Sö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ök "
onclick="javascript:doSubmit('Arendesokning', 'search')">
</div>
<div class="clear"> </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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4">En massa text <span class="link">Hjälp!</span>
</td>
</tr>
<tr>
<td><input type="button" value="Visa alla">
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="smallb">
<td>Antal ärenden: 0</td>
<td> </td>
<td>Visa ärenden: <a class="link"
href="javascript:doSubmit('MenyNavigation', 'REW_includes/fullfoljd_fran_sok.jsp')">
</a> <a class="link"
href="javascript:doSubmit('MenyNavigation', 'FWD_includes/fullfoljd_fran_sok.jsp')">
</a></td>
<td> </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="Ä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屋!