[SOLVED] Positioning without absolute?

Azu · August 26, 2007

Hello

Can somebody please tell me how I need to change my position stuff so that it won't be absolute? So that I can put it at the end of my page without it overlapping stuff above it, since there isn't always the same amount of text on the page.

Here is and example of my code

It puts Xs over the image.

How do I change it so that it will work right with position set to relative instead of absolute?

I don't care how it's done as long as it works and obviously doesn't require some kind of javascript or something.

php_tom · August 26, 2007

How about:

<table border='0' background='image.jpg' width='100' height='18' 
cellpadding='0' cellspacing='0'>
  <tr>
    <td>
      <span style='font-size:12px; color:red;'>XXXXX</span>
    </td>
  </tr>
</table>

Maybe that helps?

Azu · August 26, 2007

You mean like this?

</td></tr></table>

Didn't work the table shows up but it doesn't have the image in it (the image is downloaded but not displayed) and the Xs just show all show up right smack in the middle of it. Can't position them.

Thanks anyways..

dbrimlow · August 27, 2007

First, fix your image style.

It goes AFTER you define the image source - exactly the way you would define the native image style - height, width and alt tags.

Now, it isn't clear what you want this to do.

Where do you want the Xs to be relative to the image?

It SOUNDS to me like you are seeking an alternative to "position:absolute".

Position:absolute takes the element OUT of the normal linear flow of the html and positions it exactly where on the page you are telling it to be (relative to the window), that's what the "left:220px;top:492px" is doing ... placing the element EXACTLY where you want it on the PAGE (regardless of where it is in the html).

"Position:relative", however, places the element WITHIN the linear flow of the html and relative to both the containing element (left and right) AND the element before it (top and bottom) .

So if you have something like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {width 160px; height:300px}
-->
</style>
</head>

<body>
<div id="container">
<p style="position:relative;left:25px;top:10px">something or other</p>
<img src="images/1956.jpg" alt="1956" style="position:relative;left:10px;top:20px" />
<p style="position:relative;left:10px;top:10px">X</p>
<p style="position:relative;left:10px;top:20px">X</p>
</div>
</body>
</html>

The first paragraph is 25px to the left of the container and 10px from it's top.

The image will be 10px from the left of the div container and 20px below the first paragraph.

The second paragraph will 10px from the left of the div container and 10px below the image,

The third paragraph will be 10px from the left of the div container and 20px below the the first "X".

Copy and paste my sample code and play with the spacings to see what I mean.

NOW, change the last two paragraphs to "position:absolute" and you will see how they leap out of the flow of the html and position themselves "relative" to the actual browser window. In Macromedia (dreamweaver, flash) absolute position elements are called "layers" because you can put one on top of another (like changing the page from two dimensional to three dimensional).

Hope this helped you to understand. But again, without knowing what you want the Xs to do in relation to the image, I can only show you how they act using "position" types.

It may be that what you are attempting requires a different style technique altogether, like "float".

Dave

Azu · August 27, 2007

Thanks for the reply. I'm going to try the code that you posted. And just to clarify; basically the image is a map and I want to put Xs over it to mark certain spots on it I have it working with absolute positioning except that I need to have it working with relative positioning, so that I can put it at the end of countless pages all varying in length, where absolute positioning won't work.

So ya I'm gonna go try that now and see if it works thanks ^^ brb

Edit: Didn't work the Xs show up as block level elements x_X and way down below the picture..

Tried changing them to inline but that didn't fix it either. They are still way down near the bottom of the screen and not working at all... =(

dbrimlow · August 27, 2007

The sample I posted was NOT intended to do what you wanted ... I didn't know what you wanted.

It was just to illustrate how position:absolute and position:relative work.

Know that we know what it is you ARE trying to do, it is easier to help.

What is needed is to make a container to force the absolute positioned elements to be relative to the container and NOT the window.

The key to correctly styling layout is to put everything within its proper containers.

If you are trying to use positions and floats to create boxes or columns, create a main container to hold them.

AND! Don't leave text dangling in the middle of a box ... text needs to be contained within a block element (paragraph, lists, etc.)

So here is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {
position:relative;
width: 160px;
height: 300px;
}
-->
</style>
</head>

<body>
<div id="container">
<img src="http://website.com/image.jpg alt="1956" />
<p style="position:absolute;left:40px;top:100px;color:#FF0000;font-weight:bold">X</p>
<p style="position:absolute;left:10px;top:20px;color:#FF0000font-weight:bold">X</p>
</div>
</body>
</html>

Now. By giving the container "position:relative", you can use "absolute:positioned" blocks within it ... absolute positioning will then be relative to its containing block.

Another crucial part is to set the width and height of the container. Use your map image's size to guide the container size.

Actually, you would then be able to even optimize your page's weight by including the image as background for the container instead of putting the image directly in the markup.

This will make it simply download once into the users cache, instead of re-downloading on every page. You would do it like this:

#container {
position:relative;
width: 160px;
height: 300px;
background:#000000 url(http://website.com/images/image.jpg) top left no-repeat;
}

Of course, change the width and height above to whatever the map image size is.

And if you add any margins, paddings or borders ... remember to increase the width and height of the container proportionately so the image will still view in its entirety.

Now, you can copy and paste the container ID div (including everything within it) in the proper flow of your markup, without having to worry about the absolute items aligning to the window.

This will do what you want.

Good luck,

Dave

Azu · August 27, 2007

Thank you it is working perfectly now! I was starting to worry that it might not be possible without javascript lol

Sign In

[SOLVED] Positioning without absolute?

Recommended Posts

Azu

Link to comment

Share on other sites

php_tom

Link to comment

Share on other sites

Azu

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Azu

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Azu

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information