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.
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 have this classic <td> which has the style attribute overflow: hidden set. Inside the cell, I've put a <div> with position: relative, and inside the block there are absolutely positioned large images that I want to be clipped to the boundaries of the cell. Meaningful example:
...
<td style="overflow: hidden;">
<div style="position: relative;">
<img style="position: absolute; left: 0px; top: 50%;" src="verylargeimage.png" />
</div>
</td>
...
It seems to work fine in IE8, IE9, Firefox and Opera, but it fails on Chrome: the image spans over the boundaries of the cell.
I have the same behaviour when I print the page in IE.
I'm aware that the overflow attribute on table cells isn't well defined. Is there any way to obtain the desired effect without using background images? The result must be printable.
UPDATE I don't want to use Javascript either. I want it to be my last resort.
overflow : hidden has a meaning - which is hide everything which is going out of "defined" area. which means you will need to define what will be your width / height or both will be and it will hide anything which des not fit there.
Try using table-layout:fixed on the table element and defined width/height on the td. It stops the layout engine from trying to adjust the table cells based on their contents. It's still not gaurenteed to work but it's your best shot. Frankly though I don't think it can really be done.
I should point out that overflow on table cells is actually well-defined - the standard specifically doesn't support it. What you're doing is a hack.
You may want to make use of the CSS Clip property and it is not even CSS3. Looks like it fits in your kind of situation.
The clip property is like a mask. It allows you to mask the content of an element in a rectangle shape.
Check this link below and read the CSS Clip part.
http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties
I need to make some changes on a legacy web-based cms (which has table-based layout). I can only make changes to the content area of the website, which is inside several complex nested tables, but I suppose we can assume it is just 1 table here.
Given the (simplified) code below, is it possible to display ABC on the far right in IE6 and IE7?
<table>
<tr>
<td style="width:200px; border:solid 1px black;">
<!-- can only make changes inside here -->
<div style="border:solid 1px red; text-align:right;">ABC</div>
<input style="width:300px;" value="DEF">
</td>
</tr>
</table>
The <input> tag represents some content that may be longer than the preset width of the table cell. In IE8 or other modern browsers, the div can expand to match the input. But in IE6 and IE7, i cant seem to get it to expand beyond 200px using just css. I've tried using float, width, position relative, etc. Once again, I cannot remove the 200px width declaration or make any other changes to the table structure.
Anyone know how to do this? Thank you.
If you can change the structure inside the cell, you can wrap everything in a div that have float:left (or right, or is inline-block), so it would expand to the contents like this: http://jsfiddle.net/kizu/AkVqS/
If you can't wrap the input part, you can use the expression that run just one time (so it wouldn't cause any performance problems): http://jsfiddle.net/AkVqS/2/
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.
I am making a Web page with a slideshow, using the same technique used on http://zine.pocoo.org/. The person I'm making the site for wants the slideshow to be centered. However, some of the photos are portrait layout and some are landscape. (This was not my choice.) I need a position: absolute to get the li's containing the items in the right place, so centering them does not work. (At least, not by normal methods.)
So, I thought that it might work to insert a 124-pixel "spacer" before the image on the portrait pictures. I tried it with a <span style="width: 124px;"> </span>, but it only inserts a single space, not the full 124 pixels. The slideshow fades in and out OK, though, so I think that it would work if I could get the proper spacing.
My question is this: does anyone know a way to have 124px of space inline in HTML (preferably without using images), or another way to center the pictures in the li items?
This is way old, but I guess it's still worth answering. The reason your span isn't expanding is because it's still an inline element. set display:inline-block to get it to behave more like a block element
I think you need to add margin-left instead of padding-left, because the margin is outside an element, and the padding is inside.
Try to avoid putting large spacers on elements and especially on multiple elements. The only way to add a spacer on your element would be relative positioning or an inline-block element (use carefully.)
Your best bet for the slideshow is to have a relative positioned <ul>. Since the <ul> is relative positioned you can set the <li>s to be position:absolute; within the <ul>. At this point you can set the <li>s to width:100%; and text-align:center; so that anything inside is positioned in the horizontal center (vertical centering in CSS2 is tricky.) Check out http://jquery.malsup.com/cycle/ which outputs inline styling by default but is still really nice.