Object Positioning Trouble

[JellyFishBoy]

Hello,

 

I am having some trouble with my CSS positioning for some of the objects on my website. It is on several pages, but I'm going to link one page and also the live URL so I can understand it and implement it elsewhere.

 

I havent done CSS in a long while (PHP junkie ) so hence the stumble. The 2 parts I will copy and paste are moving position when I change the size of the window. I am sure there is a simple fix for this, any help?

 

 

The welcome message is moving:

echo "<p class='Body-text-P'><span class='Body-text2-T'>You are now logged in, <b>".$_COOKIE['firstname']." ".$_COOKIE['lastname']."</b></span</p>";
} else {
echo '<p class="Body-text-P"><span class="Body-text-T">You are not logged in at this current time. Please login or register.</span</p>';

 

And so is the menu:

<div id="menu" style="position:absolute; left:728px; top:44px; width:530px; height:51px; z-index:1;"><span class="Body-Navlist">
<ul id="navlist">
<li id="active">
<a href="./index.php">Home</a></li>
<?php
if (isset($_COOKIE['firstname']) AND (substr($_SERVER['PHP_SELF'], -10) != './logout.php')) {
        echo '<li><a href="./logout.php">Logout</a></li>
<li><a href="./cpass.php">Change Password</a></li>
';
} else {
        echo '<li><a href="./register.php">Register</a></li>
<li><a href="./login.php">Login</a></li>
<li><a href="./fpass.php">Forgot Password</a></li>
';
}
?>
<li><a href="./buy.php">Buy</a></li>
<li><a href="./sell.php">Sell</a></li>
<li><a href='./help.php'>Help</a></li>
</ul>
</span>
</div>

 

Here is the raw file: http://pastebin.com/Ev4bRt1p

 

And here is the link to the live site : http://jfbsystems.co.uk/secure/index.php

 

Thanks for any help

[raknjak]

position: absolute;
left: 728px;

is the cause: it is pushing from the left of the viewport.

 

suggestion:

- create a containing header div and make it centered (fixed with + margin: 0 auto)

- what I would do is create 2 inner divs and float them to the left (and clear floats below them). The first div contains a link to the home page (on the logo), the second div contains the menu. you can use any relative positioning you like inside these divs to place the items inside them correctly, for example margins..

- set the logo image as background for the header div

 

good luck

 

ps: and use a doctype!

[JellyFishBoy]

Thanks for the help. I ended up moving the two PHP elements (menu and login check) within the body element so it flowed with the rest of the layout.

 

I understand how it works now