Forum Moderators: not2easy
#navigation
{
position:relative;
top:-42%;
margin-left:auto;
margin-right:auto;
float:left;
list-style:none;
display:inline;
}
#content
{
position:relative;
left:33.3%;
top:-99.5%;
width:66.6%;
height:100%;
}
Thank You
J
[edited by: SuzyUK at 6:55 am (utc) on May 15, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]
Marshall
was going to answer this on your other thread, sorry we don't allow URI's here, but the code you have posted so far, in both your threads suggest to me you are misunderstanding
position: relative;If you think of the HTML document "in the flow" - that is turn CSS off (disconnect any stylesheets) and then try to read your page, does it still make sense, do sections follow in a logical order that would make it comfortable reading?
If it does the you should not need to use positioning except maybe a sprinkle of absolute positioning.
Floats are the easiest things to come to grips with first they allow you to slide content into place.
Margins are a CSS basic and allow for elements to be moved up or down, without the need to use top, right, bottom, left co-ordinates all the time.
Relative Positioning Uses
The basic use of relative: positioning is to offset an element from it's original postion - Using it doesn't remove the space that the element would've taken up in the first place, the space is reserved. So building a layout using purely relative positioning is going to lead to woes.. even more so than one built entirely with absolute: positioning.
example of a relative positioning "offset":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
html, body {padding: 0; margin: 0;}
body {padding: 50px; 0;}
p {background: #ffc;}
.pr {position: relative; top: -100px; background: #dad;}
div {border: 1px solid #000;}
</style>
</head>
<body>
<div>
<p>This paragraph is normal, in the flow</p>
<p class="pr">This paragraph relatively positioned, top: -100px; - it should be between the two yellow paras, the "reserved" gap for it is still there!</p>
<p>This paragraph is normal, in the flow</p>
</div>
</body>
</html>
One practical use of this is to make things like drop shadow text, but as that involves duplicate HTML, it's not used that much ;)
The other use of position: relative, seen most in CSS, is to make an element into a containing block for a descendant, absolutely positioned element. (I'll leave containing blocks for later, or you can search). In short what that means is unless an absolutely positioned element has a relatively positioned parent/ancestor it will position itself with regards to your viewport/screen rather than where you want it.
Absolute: positioning
Absolute positioning differs from relative positioning in that it does remove the element from the flow, the other elements on the page no longer know it exists.
Take the example above and change the word relative to absolute, and change the top co-ordinate from -100px to 100px; this time there is no gap left for the element, but the purple paragraph now overlaps other content. That's the downside to AP for layout you have to know where you're positioning to and leave appropriate space for it to slot into. This is most used for positioning a side column beside a main content column, where the main content column has a margin big enough to allow space for the column to fit into.
Neither of these methods are particularly flexible, and can require quite precise measurements which means that any cross-browser differences in how they implement positioning can become very obvious.. this I think is what you're seeing!
I know you said in your last post you were new to this, so I would suggest avoiding positioning unless for smaller elements, for instance when you have the whole content column set at height 100% but with a negative top margin of -99.5% I'm afraid that will fall down as soon as the content overflows, it just doesn't feel right to me
alternatively if you can strip your page code down to the bare minimum of only the main columns with place holders for the logos/menus etc.. we might be able to help guide futher.. with CSS it's best to be loose, and work with the flow rather than against it, which those large negative margins/top co-ordinates suggest, to me anyway, you are doing?
maybe it would be an idea to search for some templates, that kind of look like what you want download, study, tweak ;)
hth..
