I have a table with many rows.
I want to have an on hover effect on the rows. When someone hovers over a row a popup div displays with some additonal information about that row.
I was planning on doing this with a div and on hover making the div visible/invisible.
Now my problem is with the html/css.
How do I make the table with a div that appears on hover but does not affect the look of the table.
I was thinking z index, with position relative. But I cannot get it working.
You should use position:abolute; top: 10px; left: 20px; z-index: 1 for the div and position: relative for the tr. (top and left are only assumptions. use these for positioning the div relative to your row)
Relative positioning the row, holds it in the context. Absolute positioning the div makes its position absolute to its parent (here the row). If the row doesn't have relative the div would be positioned absolute to the body or an parent element which has set a position.
If the elements have the same z-index then the browser will display them in the order they appear in the html. So you don't have to set z-index at all. You can do something like this DEMO. (Hover over the top left cell, or the 3rd from top in the second column.) So long as the divs you want to display are below the table in which you wish to highlight.
Is it important to use only html and css in your project ? If not you could handle the hover functionality over to Javascript.
Related
I have a table with some data but I want to use one cell for displaying more divs. Each of divs has different exact width and position from the left.
I tried it with position:relative but position of each next div depends on the divs on the left and I don't want that I want each div in that cell to be exactly x pixels from left of the cell border.
I also tried position:absolute but this does go really to the <html> tag as they write here http://www.w3schools.com/css/css_positioning.asp:
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such
element is found, the containing block is <html>
Now I'm not sure how to solve my problem.
My example: http://jsfiddle.net/6wSAJ/465/
(Made from accepted answer from here: Relative positioning of two divs)
Edit: I guess I forgot to mention that I need it to work in IE8.
Edit 2: http://jsfiddle.net/6wSAJ/468/ The problem I was dealing with is that if I set the cell relative it completely ruins my real problem table so I have to make divs with relative position around the divs I want to be positioned absolutely. I didn't do that at first cause I always want to try to style the elements I have and add new ones only if really necessary.
You should make the wrapping divs a relative position so the absolute position will apply on inner elements:
position: relative;
jsFiddle Demo
Note that you can't give a table-cell a relative position for it's not standardized and will work unexpectedly.
For further reading:
position - CSS | MDN
Learn CSS Positioning in Ten Steps
What I'm trying to do is literally as the question says, float a span outside of a table, but keeping the span tag within it (for per row reuse purposes).
My understanding was that I needed to use something like overflow: visible;, but this does not seem to be having the desired effect (it's currently everywhere in the fiddle below as I was messing with testing it, but I think if it was working, I'd only need it in the inner div (the one using divStyle2)?
http://jsfiddle.net/uVQHr/
You simply need to add position: relative to the span's parent <td>.
Here's an updated Fiddle.
The problem is not to do with overflow - you were positioning the <span> outside the viewport. If you had inspected the element using your dev tools you would've seen it positioned off the left edge of the screen. You can remove all the overflow: visible properties now too.
position: absolute positions the element relative to the closest parent element with a position attribute that's something other than static (default). Your code was positioning the span relative to the <body> as no element with a position was found.
Generally speaking, HTML layout is flow-based. Each element gets positioned after the one before it, either to the right of it or beneath it. There are plenty of exceptions, of course, that you can get by playing with styles, but even then, if you change the order of something, most things "flow" around it and make room for it.
But occasionally I see things that behave very differently, such as pages coming up with "dialog boxes" that float in the middle of the screen, that aren't constrained by the dimensions of the div they're parented by and don't displace other layout elements around them.
I'm trying to figure out a way to do something similar, but not quite the same. I've got a table that I'm using to display a grid (yes, actually using tables correctly) and I'd like to place an image on top of one of the grid cells. I can't put it in the cell, because it's larger than the cell and I don't want to stretch my grid out, but I want it to always display at the same position relative to the grid, even if the browser window scrolls or is resized.
I figure there has to be some way that I can do this. If I put an ID or Class on one of the <TD> cells, how do I create an <Image> that is not part of the <TD> or even the <TABLE> that it belongs to, but will always position itself over the top of that <TD> cell without displacing anything or affecting its layout?
To expand on both CJGreen and Napolux's suggestions, you can still place the image in the table cell, but position it absolutely.
[Edit] Since defining the position of table cells is supposedly illegal (therefore ignored by Firefox), you can wrap the content of each <td> in a <div> element (preferably with JS so you don't have to make massive changes) and then set the <div> position to relative:
CSS:
table td > div {
position: relative;
}
table td > div img {
position: absolute;
z-index: 999;
}
JS:
$(document).ready(function() {
$("td").wrapInner('<div />');
});
See the (updated) fiddle here - http://jsfiddle.net/teddyrised/qyu3g/
If you use
table {position:relative;}
then you can use:
table img {
position:absolute;
top: #px;
left: #px;
}
This will offset the image to a particular location within the containing table and take it out of the flow of the rest of the table around it.
If I understand it correctly you need to use offset properties together with position:absolute.
The absolute position takes your image out of the flow, the offset can give you the position of the element you want to overlay (the TD in your question).
Having the offset (px from left and top of the page for the TD) you can the move the image to the correct position.
Look here: http://jsfiddle.net/jrUsM/
jQuery documentation explains it very well.
I have a div with which I display basic user information. The 'search-person' div has a height of 'auto'. This is so that profile pictures can be dynamic in size, up to 170px tall. Now, I would like to have a button displayed over the profile picture, and I thought to add relative positioning to the contents in the div and move it up and under the button, button it doesn't seem to want to work right. What can I do wrong?
here is my problem:
http://jsfiddle.net/C9Zj5/
#wrap {
position: relative
height: auto;
width: auto;
}
Make the #person-wrap position:relative and then the #buttons div position:absolute. That should give you the effect you're looking for.
div containing relative position should contain within another div having absolute position so that it can float correctly
If you set position:absolute to #buttons them you will have the button over the profile picture. Use left and top to positioning the button wherever you want inside #person-wrap.
I'm not sure what you mean with "and I thought to add relative positioning to the contents in the div and move it up and under the button", but if you want to show the info inside #person-wrap you can use position absolute or negative margin.
Aside: Is not a good practice to have div elements inside the link tag. Also why you need a button? Maybe you need to rethink the html structure as well ;)
I have a website, and I want to add a picture up in the top right corner (well 100 margin from the top and right).
I have all my content inside a table (I already know this is bad).
Here is the question: How can I position a DIV at exact the place I want, and without the table taking up the "gap" of the DIV.
For instance, if I have a table, and I place a DIV inside it and position it relatively, the amount of space the DIV "WOULD" have taken up is still taken up in the table column. Why?
How can I fix this?
Absolute positioning outside the table?
The table align is set to center, so I think absolute positioning wouldn't work outside the table...
Thanks
Try setting the table cell to position:relative;, then you can have the div as position:absolute; with the left and top as they were before.
Although, last time I tried this Firefox didn't like it, and I had to put a <div> inside the table cell first and have THAT as the relative-position block.
I wont get into the fact that you should probably recode your page...
Put the div outside the table so that body is the divs parent. Then when you absolutely position it it will be positioned relative to the body...
#id_of_div { position:absolute; top: 100px; right: 100px; }
Getting rid of that gap may not be possible. You can't control the positioning of cell elements besides the basic css for tables that is available: http://w3schools.com/TAGS/tag_td.asp
Can you convert the area to use a table-less design? I'm sure you can get plenty of help on how to do it on here :-)