I'm working on a sort of an ad replacer script. Sometimes advertisements appear inside of tags like this:
<tr>
<td align="right" width="40%"><a><img src="ad.jpg"></a></td>
<td>123</td>
</tr>
The kicker is that I can't change the display values of the ad; for the purposes of this exercise I have to overlay it with an opaque div which needs to be absolutely positioned as well as inherit margins and floats and that sort of thing.
When an ad is found inside of a div and happens to be floated left or right, positioning a div over it with the appropriate left:0; or right:0; css attributes is pretty easy. However when the ad is styled by a td, it appears that Firefox doesn't render it quite right, even if the td is appended a position:relative; style.
Here's what it looks like in Chrome\IE:
(the grey cell is the first td, the red is the overlay, the inner borderless cell is an iframe that is to be overlayed - you can't see it very well because it's being overlayed :) )
Here's what it looks like in Firefox:
The code for the overlay is really simple...
<div style="right:0;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;position:absolute;z-index:9999;background:red;width:300px;height:280px;"></div>
... and it's being prepended to the td in question.
The right:0; property is making it shoot all the way out from inside the td even though it's been ordered to be relatively positioned.
What am I missing here?
You can add a position:relative wrapper div, like in the following fiddle: http://jsfiddle.net/qfquj/
You could also possibly set the image as a background-image instead of using an img tag... allowing you to add a div inside of there with a transparency or whatever you want.
Related
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 am using table-cell arrangement of div blocks in my code. There is a problem in my code.
Preview of how my html looks is here
When I have any content (text or image) in my first panel then the .inner div of the second and third panel have a top margin of some 10-15 pixels. Why is that ?
Can any one look and let me know what I am missing.
add vertical-align:top; in #wrapper > div
See Demo: http://jsbin.com/avozik/14/edit
I have a similar case, and vertical-align:top; solves the issue. However I want to elaborate reason behind this:
https://jsfiddle.net/46tyc48y/1/
Because table cells uses vertical-align:baseline; by default, the right cell text will align to the baseline(bottom) of the image, creating the phantom spacing on the top. So we need to explicitly set vertical-align to bypass this behavior.
I have this page: http://www.problemio.com/community/public_member_profile.php?member_id=1
It is supposed to have the gray background extend all the way below the footer. If you look at it in firebug, it shows that the layout div contains a number of other divs.
So I don't understand why the gray background doesn't extend all the way down. Any ideas?
Thanks!
Add <div style="clear:both;"></div> at the end (before the close tag) of div#layout.
clear:both has to be added because of the floating inner DIVs. See also: MDN: clear.
I believe with divs, the stack on top of each other. So your background div may have a grey color, when you open the next div it sits on top of it so to speak, which puts it in front of the colored div. Have you tried to apply the bg color class to another div inside the layout div to see if that is it?
You could add overflow:hidden to the container to clear it (if u have float children)
#layout{
overflow:hidden;
}
Edit: or put a clear:both element as last child as a clear fix.
Add overflow:hidden; to the containing div. This will ensure that the container will wrap around all of it's content.
A useful tip when debugging is to put a bright border border:solid 1px lime; around the containing element to see how it is wrapping around it's child content.
http://warhawkcomputers.com/Birenbaum/Projects/Pong/Pong.html
Hey guys, so I fixed all of my projects except for pong under the fourth quarter tab of the website. It's keypresses and movements work perfectly fine, but for some reason the positioning is off in firefox. Both IE and FF recognizing the elements are associated with the second table, but for some reason firefox continues to think that (0,0) is the upper left corner of the page, not the associated table. Thanks guys.
When giving items an absolute positioning, you are automatically assigning that absolute positioning from the next defined container. This container must also have absolute positioning for these child elements to have absolute positioning from the 0,0 position of the parent container.
Here is your code (from your page):
<table height="300" width="575" bordercolor="#000" border="1px" style="position:relative;">
<tr>
<td>
<img src="Images/Paddle1.JPG" style="position:absolute; top:5px; left:3px;" id="Paddle1" />
<img src="Images/Paddle2.JPG" style="position:absolute; top:5px; left:555px;" id="Paddle2" />
<img src="Images/Ball.JPG" style="position:absolute; top:120px; left:265px;" id="Ball" />
</td>
</tr>
</table>
In order for absolute positioning for the images to work the way you want them to in FF, you'd have to absolutely position the table containing them.
While I would suggest you use div layers for containing them, it would appear that in your case you could use an easier approach (albeit frowned upon) by creating three columns in your table and use left alignment on the paddle1's td and right alignment on the paddle2's td... Again, but I'd suggest you write it to use div layers to control layout as that's what's considered "proper" nowadays.
Here's a handy reference to view on positioning. Basically it's letting you know that the position property is pretty buggy in most browsers. I'm sure it works in IE because, well, there are a lot of odd coding samples that work in IE... It's strange, but always best to do it proper. :)
You can't relatively position a table cell, which is why absolute positioning does not work in a table ;)
I would suggest you put a container div inside that main table cell width: 575px height: 300px; or to match the inner width height of that cell and relatively position it instead
You will need to add position: relative; to a containing div for the paddles.
I'm having a problem positioning an absolute div outside a table, I'm not a big fan of table layout but I found an existing project with a table layout. The code is as follows
<td colspan="2" align="right" style="padding-top:3px; padding-right:15px; padding-bottom:15px;" width="600px">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td height="37px" width="600px" style="background-image:url('P--IMG--P/welcomepanel/header.png'); background-repeat:no-repeat; background-position:bottom left;"><span class="heading" id="I--heading_text--I" style="padding-top:3px;"></span></td></tr>
<tr>
<td align='left' valign='middle' width="600px" height="522px" style="background-image:url('P--IMG--P/welcomepanel/middelblock_repeat.png'); background-repeat: repeat-y; padding-top:0px">
<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
[--C--comp--C--]
</div>
</td>
</tr>
<tr><td><img src="P--IMG--P/welcomepanel/middelblock_roundcorners.png"/></td></tr>
</table>
</td>
Where [--C--comp--C--] is the replacement string for an fckEditor that contains an image inside a div, I have set that div's z-index to 10 but it doesn't want to go out of the table.. and its position absolute.
Please let me know what I might be doing wrong.
I've realised that the problem comes with the overflow-scroll on the td container, if you remove the overflow-y:scroll it works fine, but the problem is that I need to have that overflow since there is a lot of content inside that td. I don't know what to do now. :(..someone please help a brother out!
I need the small map to be outside the table and the big map to remain inside the table, it shows the small image when you hover on the big map using Jquery to zoom, which is loaded on the fckeditor. I hope this helps..
For z-index to work correctly, every element that has a z-index property must also have any position set ( e.g.position:relative ). Also, I'd assign the table a position and z-index for the two to compare.
In saying that you want to absolutely positioned element "to go out of the table", do you mean that you want it to be positioned outside the table, not based on the table's location? Or do you mean you want it located inside the table, but not clipped to the table's borders or overlapped with other content?
If it's the former, I'd suggest moving the absolutely-positioned DIV elsewhere in the code. Why put it inside the table if it's not going to be shown there? It just makes the stacking context and overflow properties harder to work around.
If it's the latter, you might want to adjust or remove the overflow-x and overflow-y properties on the div that contains your absolutely positioned element. It's conceivable that the browser would still apply the overflow clipping rules to child elements, even if they're absolutely positioned.
Also, keep in mind that z-index is only meant to affect the stacking order of sibling elements. Elements that are on the same level of the tree, in other words other elements inside your 500px-height div, will be stacked according to their z-order, but parent and child nodes play by different rules.
If this answer doesn't help, then maybe I'm misunderstanding what you want to do. Can you post a picture of how it's behaving and describe how you'd like it to behave?
Edit in reply to picture being posted:
I think what you want to do in this case is to get the small map outside of the scroll DIV somehow. Can you change this...
<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
[--C--comp--C--]
</div>
...to something like this?
[--C--compSmallMap--C--] <!-- Small map code goes here -->
<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
[--C--compBigMap--C--] <!-- Big map code goes here -->
</div>
If not, could you change the code that's getting inserted so that it creates the small map at a higher level in the code? For example, you can add elements to the root node using document.getElementsByTagName("body")[0].appendChild(element); (there might be a better way than that, just an example). Using that, or something like that, you might be able to put your small map higher up in the document tree, which would prevent it from clipping.