Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
positioning an image 2
- Thread starter bikh
- Start date
Wrap the image inside of a DIV, and position the DIV element accordingly.
I.E. ...
.wrapperDIV {
position: relative ;
top: -20px ; /* relative to your table */
left: 100px ; /* relative to your table */
z-index: 1000 ; /* ensure it's on top of all */
}
then your HTML looks like:
<!-- more code here ... -->
<table>
<tr><td>blah blah blah</td></tr>
<!-- more table stuff here -->
</table>
<div class="wrapperDIV">
<img src="myImage.gif" height="100" width="100" alt="myImage">
</div>
<!-- more code here ... -->
HTH
Greg Tammi, IT Design & Consultation
Work: Home:
I.E. ...
.wrapperDIV {
position: relative ;
top: -20px ; /* relative to your table */
left: 100px ; /* relative to your table */
z-index: 1000 ; /* ensure it's on top of all */
}
then your HTML looks like:
<!-- more code here ... -->
<table>
<tr><td>blah blah blah</td></tr>
<!-- more table stuff here -->
</table>
<div class="wrapperDIV">
<img src="myImage.gif" height="100" width="100" alt="myImage">
</div>
<!-- more code here ... -->
HTH
Greg Tammi, IT Design & Consultation
Work: Home:
- Thread starter
- #3
thanks for the input grtammi.
I tried out your code and it positioned the image relative to the page and not the table. So when you expand the browser window, the table moves, but the image remained fixed. And I need the image to be positioned relative to the table.
I tried out your code and it positioned the image relative to the page and not the table. So when you expand the browser window, the table moves, but the image remained fixed. And I need the image to be positioned relative to the table.
Where's the image have to be?
You could also try creating a "wrapper" table around your original table ... the image would go into the wrapper table, and not the original table.
Greg Tammi, IT Design & Consultation
Work: Home:
You could also try creating a "wrapper" table around your original table ... the image would go into the wrapper table, and not the original table.
Greg Tammi, IT Design & Consultation
Work: Home:
-
1
- #5
BillyRayPreachersSon
Programmer
You'd want to do something like this:
Code:
<div style="position:relative;">
<table>
<tr><td>blah blah blah</td></tr>
</table>
<div style="position:relative;left:20px;top:20px;">
<img src="myImage.gif">
</div>
</div>Hope this helps!
Dan
-
1
- #6
As BillyRay shows in his example, when DIVs are relative, they are relative to their enclosing container.
If the DIV is sitting alone on the HTML page, then the enclosing container is the page itself. If the DIV sits within another DIV (called "outer", say), then the DIV (called "outer"
is the enclosing container.
This very simple rule will help you set up your DIVs without experiencing unexpected behaviour when you resize the page.
Jeff
If the DIV is sitting alone on the HTML page, then the enclosing container is the page itself. If the DIV sits within another DIV (called "outer", say), then the DIV (called "outer"
is the enclosing container.This very simple rule will help you set up your DIVs without experiencing unexpected behaviour when you resize the page.
Jeff
- Thread starter
- #7
- Status
Similar threads
- Question
- Locked
- Question