Solved

absolute positioning

Posted on 2000-02-29
10
215 Views
Last Modified: 2010-04-09
(sorry, very low on points)

I have a page that has tables and a bunch of other stuff on it.  What I need to do is load an image and it's going to be overlapping the table quite a bit.  What I would like to do is load the image after the rest of the page is loaded with an absolute position on the page.  How can I do this?  Is there a <position="x,y"> tag for images or anything comparable?  I can't get into frames on any of my pages because the concept is too new and unreliable.  Thanks, I'm desperate and I don't have my html book anymore!
0
Comment
Question by:GorGor1
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 6

Expert Comment

by:edey
ID: 2570246
there is using CSS, you would position it just like any other item (in ie), off the top of my head (prob not functional):

<img src=".." style="position: absolute;left :10px;top :10px">


GL
Mike
0
 
LVL 8

Accepted Solution

by:
jbirk earned 30 total points
ID: 2570761
To get it working properly with Netscape, you'll need to use layers...

<DIV id="layerName" style="position: absolute;left :10px;top :10px;height:100px;width:100px;"><img src="dsf.gif" height="100" width="100"></DIV>

-josh
0
 
LVL 6

Expert Comment

by:edey
ID: 2571355
Of course you could stick it on a layer and it should work in both 4.+ browsers :)


GL
Mike
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 1

Expert Comment

by:Assen
ID: 2571810
Hi

You can use absolute position to do this. If you want to work with IE & Netscape you have to use <div> or <span> tags, don't use <layer>.
Example:

<p><span style="position: absolute; left: 174; top: 126"><img border="0" src="rose.jpg" width="100" height="75"></span></p>

If you are going to position a form use the next example:

<span style="position: absolute; left: 321; top: 181; width: 83; height: 19">
      <form>
            <input type="radio" name="e" value="1" checked>
      </form>
</span>

regards
0
 
LVL 8

Expert Comment

by:jbirk
ID: 2572453
Assenn, the div tag which I suggested is considered a layer by netscape as long as the style specifies it as position:absolute.  And that will work on both browsers.
-Josh
0
 
LVL 1

Expert Comment

by:Assen
ID: 2572690
- Josh
Yes they are all considered as layers, but you can make so colled layers in 4 defferent ways, see the example in your browser.

Example:

<span id="Layer1" style="position:absolute; left:74px; top:135px; width:195px; height:127px; z-index:1">
<p>Sample 1 </p>
<p>span</p>
</span>
<div id="Layer2" style="position:absolute; left:70px; top:292px; width:197px; height:105px; z-index:2">
  <p>Sample2</p>
  <p>div</p>
</div>
<layer id="Layer3" left="70" top="419" width="197" height="116" z-index="3">
<p>Sample3</p>
<p>layer</p>
</layer>
<ilayer id="Layer4" left="5" top="551" width="192" height="90" z-index="4">
<p>Sample4</p>
<p>ilayer</p>
</ilayer>

some of them are not going to work!

regards

0
 
LVL 8

Expert Comment

by:jbirk
ID: 2572803
All four of those work in netscape, but the two layer and ilayer tags are Netscape specific.  All of those tags are considered layers by netscape...

I was just pointing out that your first post didn't really bring up anything that wasn't already stated by my post, other than using span instead of div.  But it doesn't really matter which is used in this case, cause they both do the same thing for this purpose.

-Josh
0
 
LVL 1

Expert Comment

by:Assen
ID: 2572845
-Joshh
b explicit ;-)
0
 
LVL 8

Expert Comment

by:jbirk
ID: 2574122
k, noted:)
0
 
LVL 1

Author Comment

by:GorGor1
ID: 2578960
Thanks guys!
0

Featured Post

Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question