Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   problems with relative positioning (http://www.velocityreviews.com/forums/t155884-problems-with-relative-positioning.html)

Fredo Vincentis 11-21-2003 11:24 AM

problems with relative positioning
 
Hi,

I am having difficulties positioning a DIV relative to the previous DIV in
the code. I am not quite sure why this isn't working, but I tested in IE 5
and NN 7 and both refuse to do what I want (guess it must be my fault,
hey?).

I want the bottom DIV (containing text links, copyright, disclaimer, etc) to
appear after everything else. For some unusual reason he puts it to the
bottom of the page, but still overlaps the previous DIV:

http://www.addictivemedia.com.au/rmit/contacts.htm

Any idea why this is and how I can fix it?

Thanks heaps!



Steve Pugh 11-21-2003 12:13 PM

Re: problems with relative positioning
 
"Fredo Vincentis" <yahoda21@hotmailNoSpam.com> wrote:

>I am having difficulties positioning a DIV relative to the previous DIV in
>the code. I am not quite sure why this isn't working, but I tested in IE 5
>and NN 7 and both refuse to do what I want (guess it must be my fault,
>hey?).
>
>I want the bottom DIV (containing text links, copyright, disclaimer, etc) to
>appear after everything else. For some unusual reason he puts it to the
>bottom of the page, but still overlaps the previous DIV:
>
>http://www.addictivemedia.com.au/rmit/contacts.htm
>


Way too much positioning.

Absolute positioning moves the element right out of the document flow
and so it's height isn't counted at all.

Relative position moves the element but leaves a space where it would
have been.

You have an absolutely positioned header
Then a relatively positioned content area.
Then a footer.

The footer is placed after where the content area would be if it had
not been moved via relative positioning. This is what should happen
for the styles you have used.

I don't think you need to use positioning at all in your page. It can
all be done with floats and margins.

You also have multiple id="contact" and id="contactline". IDs must be
unique within a document. Change them to class.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

Fredo Vincentis 11-21-2003 09:50 PM

Re: problems with relative positioning
 
"Steve Pugh" <steve@pugh.net> wrote in message
news:a4vrrvke4ppq6kj1bjgmtl71i7fe97j9rd@4ax.com...
> "Fredo Vincentis" <yahoda21@hotmailNoSpam.com> wrote:
>
> >I am having difficulties positioning a DIV relative to the previous DIV

in
> >the code. I am not quite sure why this isn't working, but I tested in IE

5
> >and NN 7 and both refuse to do what I want (guess it must be my fault,
> >hey?).
> >
> >I want the bottom DIV (containing text links, copyright, disclaimer, etc)

to
> >appear after everything else. For some unusual reason he puts it to the
> >bottom of the page, but still overlaps the previous DIV:
> >
> >http://www.addictivemedia.com.au/rmit/contacts.htm
> >

>
> Way too much positioning.
>
> Absolute positioning moves the element right out of the document flow
> and so it's height isn't counted at all.
>
> Relative position moves the element but leaves a space where it would
> have been.
>
> You have an absolutely positioned header
> Then a relatively positioned content area.
> Then a footer.
>
> The footer is placed after where the content area would be if it had
> not been moved via relative positioning. This is what should happen
> for the styles you have used.
>
> I don't think you need to use positioning at all in your page. It can
> all be done with floats and margins.


The only thing I ever used floats for is to put two DIVs next to each other.
Can you give me an example of how to position the elements with floats and
margins?

> You also have multiple id="contact" and id="contactline". IDs must be
> unique within a document. Change them to class.


Ooops, I knew I was going to forget about changing the id to class. I
originallky only had one contact and then it changed to multiples. I will
make that change. Thanks!

> Steve
>
> --
> "My theories appal you, my heresies outrage you,
> I never answer letters and you don't like my tie." - The Doctor
>
> Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>




rf 11-21-2003 10:23 PM

Re: problems with relative positioning
 

"Fredo Vincentis" <yahoda21@hotmailNoSpam.com> wrote in message
news:bpksl1$2ac6$1@otis.netspace.net.au...
> Hi,
>
> I am having difficulties positioning a DIV relative to the previous DIV in
> the code. I am not quite sure why this isn't working, but I tested in IE 5
> and NN 7 and both refuse to do what I want (guess it must be my fault,
> hey?).
>
> I want the bottom DIV (containing text links, copyright, disclaimer, etc)

to
> appear after everything else. For some unusual reason he puts it to the
> bottom of the page, but still overlaps the previous DIV:
>
> http://www.addictivemedia.com.au/rmit/contacts.htm
>
> Any idea why this is and how I can fix it?


Way way too much positioning, especially relative. You should only use
relative positioning in exceptional circumstances, like to superscript
something (top -.3em) or to provide a containing element (top: 0) so child
elements may be positioned absolutely within that element, which doesn't
work properly with IE anyway.

Your problem is better stated the other way round: the bottom div is
positioned correctly in the flow but the main content div is overlapping
this bottom div, because you have relatively it positioned 116 pixels down
from where it would have been. It is therefore overlapping the bottom div by
116 pixels.

Go to the spec and read up on what absolute and relative positioning does to
the flow. To sum it up the sequence is: 1) remove any absolutely positioned
elements from the flow 2) lay out the rest of the elements as per the normal
flow 3) move any relatively positioned elements away from where they
currently are.

If you remove all relative positioning then the page will flow correctly. If
you feel you need to position something relatively, for example to achieve
some spacing, don't, use margin or padding. Margins and padding *are* taken
into account in the flow, in step 2 above.

Cheers
Richard.





Leif K-Brooks 11-22-2003 02:33 AM

Re: problems with relative positioning
 
rf wrote:
> Way way too much positioning, especially relative. You should only use
> relative positioning in exceptional circumstances, like to superscript
> something (top -.3em) or to provide a containing element (top: 0) so child
> elements may be positioned absolutely within that element, which doesn't
> work properly with IE anyway.


Works in IE 6 standards mode.



All times are GMT. The time now is 10:14 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.