/    Sign up×
Community /Pin to ProfileBookmark

Having trouble with relative positioning – Help really appreciated!

Hello fellow web designers and developers! This is my first time posting to a forum for help.

Would you please take a look at [URL=”http://www.lifeionizers.com/kangen-vs-life1″]my webpage[/URL] 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>

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@WebJoelMay 02.2009 — 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 {[B]position:relative;[/B]....}[/QUOTE] 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="125[B][SIZE="4"]px[/SIZE][/B]">

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

?
Copy linkTweet thisAlerts:
@kathrynwauthorMay 02.2009 — 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 [B]px[/B] issue. I'll keep it to the inline style, I think.
Copy linkTweet thisAlerts:
@WebJoelMay 02.2009 — Your layout is fairly simple, -if you can't get it right post back & I'd be happy to work it out for you. ?
×

Success!

Help @kathrynw spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...