Relative, absolute positioning help please

[UncleMortis]

I've been fiddling with the positioning of links on a web site I'm re-vamping. I had my links positioned absolutely and noticed that by doing that, when I increased the screen resolution that the links were coming across the title GIF I have between them. How can I make it so that if someone is using a higher screen resolution than I am, the links will stay where they are supposed to; either side of the central gif?

 

[dwarfthrower]

You could:

a) position the gif absolutely as well, or,

b) position everything relatively so the page scales nicely across all resolutions.

Failing either of those options you could use tables for positioning.

 

[UncleMortis]

Thanks, I've never used css for positioning of text, etc before, mainly it's been left, right or centered. I'll see how I go with positioning the gif as well. I'll be back if it goes haywire

 

[UncleMortis]

Just another thing. I've been confused with the positioning relatively. Does this mean that the first element will be positioned from the top left of screen and then anything else after that will be positioned from the top left of the first element? Am I able to use % to position the elements? because I've found that if the screen is small it will only show what it can from the top left, so the right side can only be found by making the browser bigger. I want it so that if the browser opens up small, the whole page will fit in and I can see it and then when I make it bigger it fills out to it's correct size.

 

[MorganGreylock]

I personally find that absolute positioning is better
because I know exactly where someting is going to be.
The way I usually do this is with a layer (DIV).
Dreamweaver makes this relatively easy, but you could
also insert one manually. You give it the length and
width in pixels, as well as the left and top value.

You can then decide how it will react to the page being
resize where it clips the layer. It can scroll, hide the
part that got clipped, resize itself, or whatever.

They act as a container, and while they do add a minor
level of complexity, they are compatible with NS6+ IE5+
and Mozilla browsers. NS4 (which, for some reason, is
still popular around my workplace) sometimes has a problem
with them. (They use the deprecated LAYER tag, which isn't
part of the W3C standard)

Hope that makes sense, good luck.
MG

 

[StephanieCC]

MG: I have the same problem on my site--an absolutely postioned element overlapping another element at different resolutions--the ab item does resize itself--that's how it overlaps--so not sure how then to apply your suggestions--

http://www.provlib.org/indexmoon.htm

Stephanie

 

[theocraticmind]

position:relative;
where something goes when it is like this really depends on what it is. if it is display:inline; (doesn't break after itself) then is will go right after (to the left) of what comes before it (eg. <span>). if it is display:block; (does break after itself) it will go under what comes before it (eg. <div>). there are exeptions to this, however. for exemple: float:right; this will go to the right, any way it can, and as long as then don't interfere with each other, most relativle positioned elements will move around it. Really, trial and error is you best bet for figuring out how it all works.

as for your page. it seems that you've done simething like this:
position:absolute;left:50%;top:0px;margin-left:-200px;width:400px;
or something like that (I didn't check your css) this will center your layer, so that a non centered layer would still hit it. what you could do is something similar to your menu:
position:absolute;left:50%;top:0px;margin-left:-3500px;width:100px;
This would set your menu to be 50px away from your main content bit, of move with it.

 

[StephanieCC]

Only the navbar is absolutely positioned and with no negative margin as you suggest--I have also tried to position both (the content and navabrar) absolutely but the same overlap occurs--here's the relevant CSS for

http://www.provlib.org/indexmoon.htm

.box {border: solid navy 1px;margin: 0; padding: 0;width: 450px;background: #ffffcc;}

.navbar {position: absolute; top: 59px; left: 2px; width: 112px; padding: 3px; margin: 0; }

.navbar ul{ margin-left: 0; list-style-type: none; margin-top: 0 }

.navbar ul li{ margin-left: 0; }

.navbar ul, .navbar ul li { padding: 0; }

.navbar a {display: block; }

 

[theocraticmind]

try this:

.box {position:absolute;left:50%;top:0px;margin-left:-225px;width:450px; border: solid navy 1px;margin: 0; padding: 0; background: #ffffcc;}

.navbar {position: absolute; top: 59px; left: 50%px; width: 112px; padding: 3px; margin: 0; margin-left:-250px;}

It will have your whols page centered, and your .navbar will be positioned absolutely, but still remain relative to your .box as far as the resolution is concerned.

 

[StephanieCC]

Since we've come this far I figured I'd ask if you know what's wrong with the page.

I changed the CSS as you suggested above--whether I encase it in a relative parent or not that is what I get--I am trying to convert a messy tabled page into a partial CSS page until I can redesign so I know this isn't the best practice--but it seems to me this should work somehow--I saved it as a different file:

http://www.provlib.org/indexmoon3.htm

Thanks