I have a table where each cell has some text in it. I want a div to pop up and to cover the table but when the div pops up, it covers the table's borders, but not the text. It looks as if the text in just on the div. I have played around with the background-color and opacity, but nothing seems to work. Can anyone help me?
P.S. I can not make the table disappear in anyway because the overlapping div will go away eventually.
Since you didn't post your code, I'm going to assume the problem is somehow related to
z-index:*;
so I created a fiddle where you can change the z-index and see the difference that makes using this code.
<html>
<head>
<style>
p{
margin:0;
position:relative;
z-index:3;
}
table, div{
width:100px;
height:100px;
}
div{
background-color:blue;
position:relative;
top:-100px;
z-index:2;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td><p>1</p></td>
<td><p>2</p></td>
</tr>
<tr>
<td><p>3</p></td>
<td><p>4</p></td>
</tr>
</table>
</body>
</html>
JsFiddle
Note that for z-index to work position has to be set, like this
position:relative;
or
position:absolute;
or
position:fixed;
though I don't think fixed might fit your needs.
Your Question is Not Cleared.
Any way i hope that, this what u asked for...
HTML
<table cellspacing="0">
<tr>
<td>Hellossss
<span></span>
</td>
<td>English
<span></span>
</td>
<td>French
<span></span>
</td>
</tr>
</table>
CSS
table td{ border:3px grey solid; padding:0px; position:relative; width:100px}
span{content:"";position:absolute; width:100%;height:98%; background:green;
left:0;top:0; display:none}
td:hover span{display:block}
http://jsfiddle.net/edBQh/
Related
I made a box in my website but after making the box everything I do is happening at the bottom of the box. I want to work on the other side of the box. Here is the demo code
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 200px;
padding: 25px;
border: 3px light grey;
margin: 25px;
}
</style>
</head>
<body>
<img src="s.png" style="width:900px;height:100px" />
<div>
how to work on the<br/>
other side of box
</div>
<p>
the paragraph i am wriiting i want this on the other side of my box
</p>
</body>
</html>
You'll need float left for your Div and Paragraph. Is that the other side of the box that you're looking for?
I guess you want to "float" the div/box to the left/right.
float:left;
See here: http://jsfiddle.net/p9y9v4kz/
why don't you just use table
<table>
<tr>
<td>
how to work on the other side of box
</td>
<td>
the paragraph i am writing i want this on the other side of my box
</td>
</tr>
</table>
Other side , you mean to say left or right side?
You need to use float:left or float:right.
Fiddle
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
How do I get divs within table cells to occupy the full height of the cell?
Setting div height=100% won't work unless the table cell has a fixed height on it, but I can't do this because the cells must have a liquid height depending on variable content.
I am trying to get all divs in each row to be the same full height of the row.
The code is below, see live example at
http://www.songtricks.com/CellDivBug.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
td
{
padding:0px;
vertical-align:top;
height:auto;
}
.box
{
margin:0px;
border:solid 2px red;
height:100%;
}
</style>
</head>
<body>
<table border="1" width="50%">
<tr>
<td width="50%">
<div class="box">
This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text.
</div>
</td><td width="50%">
<div class="box">
This box has a little text.
</div>
</td>
</tr>
</table>
</body>
</html>
After some more research and experimentation I came up with what may be the only solution using CSS. I'm too new to answer my own question, so I'm posting it here.
It basically consists of:
Put position:relative on table cells
Put position:absolute; top:0; left:0; right:0; bottom:0; on contained divs
Put content directly within cell, alongside div, not within it, to force cells to take height of content
See demo at
http://jsfiddle.net/ehLVM/
Could you use this? It makes all of the divs with this attached to it the same height.
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
Source: http://www.cssnewbie.com/equal-height-columns-with-jquery/
Try this:
table { height: 100%; }
td
{
padding:0px;
vertical-align:top;
height:100%;
}
.box
{
margin:0px;
border:solid 2px red;
height:100%;
}
Working Sample (tested on FF4)
Did some Googling and found this thread in a forum. It seems to be impossible to do it via CSS. But this has a JavaScript solution. As suggested in my comment above, why not move the border CSS to the td?
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;}