I have a table, which I want to hide and show using jQuery. I want to add a 'close' button to the top right.
But the close button always appears behind the table, so not able to visible
How can I make the close button appear in front of the table please (not above/to the side), and therefore available to be clicked on?
<style>
table
{
border: 3px solid #000000;
align: center;
text-align: center;
color:#000000;
}
th,td
{
border-width: 2px;
border-color: #000000;
border-style: solid;
}
#RCLPage
{
display:block;
position:absolute;
z-index:100;
}
.close_box
{
background-image:url('../tsTest2/images/close.gif');
background-repeat:no-repeat;
background-position:right top;
position:relative;
z-index:101;
//height:10px;
}
#CPSTab
{
padding:10;
width:20em;
}
</style>
<div id="RCLPage">
<div class="close_box"></div>
<table id="CPSTab">
<thead>
<tr>
<th colspan="2">The Header</th>
</tr>
</thead>
<tbody>
<tr><td>Item1</td><td>2</td></tr>
<tr><td>Item2</td><td>5</td></tr>
<tr><td>Item3</td><td>3</td></tr>
</tbody>
</table>
</div>
You need to add z-index to the divs, with a positive number for the top div and negative for the div below
example
give css like this
table{position:relative}
And for the Close Button
.closeButton{ position:absolute; top:0; right:0; z-index:999}
You need to change the top and right value according to your requirements
http://jsfiddle.net/Lubuu/5/
Set position:relative; for the close button container.
Set position:absolute for the button.
Set z-index for both (higher index for button).
Use: right: 0; top: 0; for button.
Change the position of .close_box to 'absolute'
Fiddle here: http://jsfiddle.net/9kXmq/
position:absolute;
Related
I have a dynamically generated div.
I have to add a dynamically generated HTML table on it.
The problem is when I'm add the table, it display as left aligned.
But the div is center aligned for text contents.
Assuming you have your table as a fixed width element, you can set margin-left/right to auto to center a block element in it's container. (Fiddle here: http://jsfiddle.net/SWakJ/)
HTML
<div id="div1">
<table id="tab">
<tr>
<td>test</td>
</tr>
</table>
</div>
CSS
#tab {
border:solid 1px black;
width: 200px;
height: 100px;
margin:2px auto;
}
You may try to add some css to your outer div.
I actually wrote a similar answer here:
Position this div in the center of it's container?
Give your code or just go quick to your code and check this. Put a div above table and set text-align= center. or if your table is in any td then assign text-align:center.
Also you can put tag and put table between it.
If you want to just center the table column than also provide text-align:center
I dont know about your code but as per problem this could help you.
function makeTable() {
row=new Array();
cell=new Array();
row_num=12; //edit this value to suit
cell_num=12; //edit this value to suit
tab=document.createElement('table');
tab.setAttribute('id','newtable');
tbo=document.createElement('tbody');
for(c=0;c<row_num;c++){
row[c]=document.createElement('tr');
for(k=0;k<cell_num;k++) {
cell[k]=document.createElement('td');
cont=document.createTextNode((c+1)*(k+1))
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
tbo.appendChild(row[c]);
}
tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);
}
the you can set allignment through CSS as below:
#newtable{
border:2px solid #999;
font-family:verdana,arial,helvetica,sans-serif;
font-size:18px;
margin:auto;
}
#newtable td{
width:50px;
line-height:50px;
border:1px solid #000;
text-align:center;
}
or see this link "http://www.webmasterworld.com/javascript/3614377.htm"
You can use like this
<div id="div1">
<table id="tab">
<tr>
<td>test</td>
</tr>
</table>
</div>
CSS
#div1
{
width:500px;
text-align:center;
}
#tab {
border:solid 1px black;
width: 200px;
height: 100px;
margin:2px auto;
}
#tab td
{
/* width: 200px;
text-align:center;*/
}
Running Demo Jsfiddle
Please see the following example:
http://jsfiddle.net/6t6hq/7/
when I use td with position relative to move it,
it only move the content but not the border.
How can I move the border with the content?
<table>
<tr>
<td id="relativeTD">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<div id="expected">expected</div>
<style>
td{
border:1px solid #000;
min-width:100px;
}
#relativeTD{
position:relative;
left:60px;
}
#expected{
border:1px solid #000;
position:relative;
left:60px;
}
</style>
TD is of display: table-cell;!
So you can't move it using relative positioning. Instead, create another <div> inside the <td> and give border and stuff.
Instead, give position: absolute for the td. It works! Also, you need to give position: relative to the table.
Fiddle: http://jsfiddle.net/6t6hq/9/
Else, you can use margin-left too to the td.
You cannot move a single td border you need to move the whole table
Demo
table {
margin-left: 60px;
}
Either what you can do is give your table border: 0;, place a div inside your td
give it some width, border and position: relative with left: 60px; and you are good to go
I have a sign in button as shown below and when I try to click that the menu opens in which I am having an ASP.Net login control which is shown below my slider and not above it.So I would like to position it on top of my slider.And between my slider and sign in button I have menu bar.
So how do I do that?
I have followed this question on SO but did not succeed
This is my CSS:
#container {
width:780px;
margin:0 auto;
position: relative;
}
#topnavsignin {
padding:10px 0px 12px;
font-size:11px;
line-height:23px;
text-align:right;
margin-top:-60px;
margin-left:120px;
}
#topnavsignin a.signin {
background:#88bbd4;
padding:4px 6px 6px;
text-decoration:none;
font-weight:bold;
color:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url('../images/signin-nav-bg-ie.png') no-repeat 0 0;
*padding:4px 12px 6px;
margin-left:420px;
}
#signin_menu {
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
display:none;
background-color:#ddeef6;
position:absolute;
width:350px;
z-index:100;
border:1px transparent;
text-align:left;
top: 24.5px;
right: 171px;
margin-top:-55px;
margin-right: 0px;
*margin-right: -1px;
color:#789;
font-size:11px;
padding: 5px;
}
This is how I'm showing it:
<div id="container">
<fieldset id="signin_menu">
//Asp.Net Login Control
</fieldset>
</div>
//Here goes my Navigation menu
This is my slider part
<div id="slider_wrap">
<div id="wowslider-container1">
</div>
</div>
To position one Div over the other you use the z-index on the css, together with position: absolute or relative or fixed
Some examples:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
http://www.w3schools.com/css/css_positioning.asp
On the container that you like to be front set a bigger z-index than the containers that you like to be on back.
Note that: the z-index works only for position: absolute, relative, or fixed, and the divs that you like to control have this attributes. The example that you mention try to fix order of divs with out having one of this attributes (or with out using the z-index), so in example can not use z-index and its a tricky how to place one in front of other with out the z-index enabled.
As I see you do not have set index in one of them.
On the container that you like to be front set a bigger z-index than the containers that you like to be on back.
Note that: the z-index works only with position: absolute/relative/fixed; on the same element. The example that you mention try to fix order of divs without having one of this properties (or without using z-index); it is not possible to place one element in front of other without defining z-index together with position.
I'm not really sure what I need here but I want to position a div at the bottom of a nested table.
I have an outer table that is 100% wide and no height attribute. I have another table within that outer table where I am using the div. I want the div content to rest on the bottom of the inner table. I currently have the div in a <td> tag.
I've tried to use position:absolute; bottom:0; left:0; but it puts the div and its content at the very bottom of my screen.
How can I do this?
BTW: I know that I should be using 100% css on this project but I'm making a gradual transition. :)
Here is my code for the div
#messageBox {
width:95%;
height:35px;
margin:10px;
padding:10px;
font-family:Arial;
font-size:18px;
}
Here is the table code
<table cellpadding="0" cellspacing="0" border="0" style="width:60%;margin-left:auto;margin-right:auto;margin-top:30px;border:0px solid">
<tr>
<td colspan="2" style="height:85px;"><div id="messageBox">test</div></td>
</tr>
</table>
You need to set the <td> element in question to position: relative;. This way any absolutely positioned element will be positioned relative to it.
#messageBox {
width:95%; /* wrong calculation when you add with margin/padding makes overflow */
height:35px;
margin:10px;
padding:10px;
font-family:Arial;
font-size:18px;
border:1px solid red;
}
<table>
<tr>
<td colspan="2" style="height:185px; border:1px solid black; vertical-align:bottom;">
<div id="messageBox">test</div>
</td>
</tr>
</table>
I changed your td's height from 85px to 185px to make it obvious.
Preview:
Request (not overflow):
I'm using additional wrapper.
<table>
<tr>
<td colspan="2" style="height:185px; border:1px solid green; vertical-align:bottom;">
<div style="overflow:hidden; border:1px solid red;">
<div style="border:1px solid black; float:left; width:100px; margin:10px; padding:0px;">Test</div>
</div>
</td>
</tr>
</table>
Preview:
Oh the joys of working with tables. It seems that this won't work unless you set the display property of the table to block
You can try giving the outer innermost (my eyes failed me, sorry) table this style:
position: relative;
display: block;
You'll also need to add back in the position: absolute (I see you've taken that out, that is actually the correct method to use for this)
#messageBox {
position: absolute;
bottom: 0;
}
Do remember that this will change how the table works, and will probably break your site. See: http://jsfiddle.net/5xTXU/
I have the following :
HTML
<th class="sort">
<div>
<div class="sort"></div>Last Name
</div>
</th>
css:
table.tablesorter thead th.sort
{
padding:0;
}
table.tablesorter thead th div.sort
{
margin:0;
width:15px;
height:30px;
float:left;
background: url("/Content/images/admin/sort.png") no-repeat;
background-position: 0px center;
cursor:pointer;
}
table.tablesorter thead tr th.sort a
{
cursor:pointer;
color:inherit;
vertical-align:middle;
float: left;
padding-top: 7px;
}
I want to display inner and inside vertically aligned middle and always on ONE line so that when a browser window is resized (small) it will not break and will not more underneath inner (which is what is happening now).
thanks
use the "display inline" command...
<div style="display:inline;float left;">First name</div>
<div style="display:inline;float right;">Last name</div>
Its not clear to me what "inner" and "inside" youre referring to (you mught want to update and elaborate a bit, as well as post the complete markup for the table) but it sounds like you basically want everything in the th to be in one continuous line regardless of avialable space. You can turn off the text from wrapping with whitespace: nowrap;. However your content is going to overflow the th because thats how table cells work, so you need to set overflow: hidden on something that wraps the text. Unless yo need more than one elemment inside the cells you dont need the float.
The markup might look like this:
<thead>
<th><div class="clip sort">First Name</th>
<th><div class="clip sort">Last Name</th>
</thead>
Whith the css like so:
.clip {width: 100%; overflow: hidden; whitespace: nowrap;}
th {vertical-align: middle; height: 30px;}