PDA

Click to See Complete Forum and Search --> : Having trouble with relative positioning - Help really appreciated!

kathrynw
05-01-2009, 04:33 PM
Hello fellow web designers and developers! This is my first time posting to a forum for help.

Would you please take a look at my webpage (http://www.lifeionizers.com/kangen-vs-life1) and tell me how to fix the problem of the phone number at the top of the page moving left in different browser windows.

It works in browser widths of 1024, but wider browser widths make it move left. I've worked on this page for a week, because I'm still a newb, and there are lots of interruptions at work, but I really need a fresh pair of eyes to offer some insight. As far as I know, I have validated as far as I can without messing up a javascript form on the page.

I'm not sure if I should post the CSS, so I'll do it anyway in case you don't use Firebug for FF.

I am using absolute positioning, but I suspect the fix is in relative positioning. I already use some relative positioning on my page, so I'm stuck as to how the different divs will relate to each other. Any help you can offer is greatly appreciated!

CSS: These are the elements that I believe will make the difference...this is probably really obvious, but please be gentle with me. I'm relatively new with all of this.


#phone_number {
position:absolute;
left:864px;
top:60px;
width:138px;
height:31px;
z-index:2;
}


#mainnav {
position:relative;
margin-left:75px;
margin-top:139px;
width: 947px;
height:40px;
z-index:1;
}
.kangenvslife1 {
font: 75% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}

.kangenvslife1 #container {
width: 950px;
margin: 0 auto;
border: none;
text-align: left;
}

HTML (shorthand):

<body class="kangenvslife1">
<div id="container">
<div id="mainnav">
<div id="phone_number">
</div>
</div>
</div>
</body>
WebJoel
05-01-2009, 10:38 PM
That is the trouble with a "position:absolute" element, -it needs to be based upon a "position:relative" parent. "position:static" is the default and if you re-size your viewport, the 'absolute' goes wonky...

Make a wrapper (or use "kangenvslife1" for it) that wraps everything, give it "position:relative;" and the 'banner' section (whic appears to be the "position:absolute;") should be based from that instead, and behave correctly. .kangenvslife1 {position:relative;....} should work. I'm not a big fan of "position:absolute;" for elements unless they are small (logo, etc.) or are expected to move around the page on-purpose.

I note a lot of these:

<td width="125px">

"px" is invalid used this way, in HTML. Remove them. width="125" is HTML, style="width:125px;" is (inline)CSS and permitted.

:)
kathrynw
05-02-2009, 01:35 PM
Thank you for your response! I thought this much...here's hoping that I can place the phone number inside the container without messing up the other relative elements.

And thank you for letting me know about the px issue. I'll keep it to the inline style, I think.
WebJoel
05-02-2009, 04:12 PM
Your layout is fairly simple, -if you can't get it right post back & I'd be happy to work it out for you. :)