Jump to content

CSS Positioning for multi screen resolution


moogle1979

Recommended Posts









<?php
// checks to see if person is logged in
if ($_SESSION['login'] == 1){
?>

<?php echo $_SESSION['name']; ?>'s Avatar

Welcome, <?php echo $SESSION['name'] . "! (" . $SESSION['userid'] . ")"?>



Status: <?php echo $_SESSION['status']; ?>

Money: <?php echo $_SESSION['money']; ?>

Bank: <?php echo $_SESSION['bank']; ?>

Level: <?php echo $_SESSION['lvl']; ?>

HP: <?php echo $_SESSION['hp']; ?>

Exp: <?php echo $_SESSION['exp']; ?>

Logout

<?php
}
else {
?>

Please Login to Start Playing


Username:

Password:  




Lost Password?


<?php
}
?>



 








Welcome to Rigganmore


The Land of a Thousand Dreams




Not a Member?


Pre-Registration




Link to comment
Share on other sites

Your div#stats is inside div#header_user and stays in the same position relative to div#header_user when the resolution changes, but div#side_nav is not inside div#body so it moves to a different position at different resolutions. Change the closing tag and see if it does what you want:-

..............

The Land of a Thousand Dreams

/* moved below*/

 

If this doesn't work, I would change every div from position: absolute to position: relative and set them all related to each other. I don't really like the way you have so many nested position: absolute divs.

Link to comment
Share on other sites

I made a mistake with my edit above using /* instead of

 

 

I really thought I knew my CSS until I found out absolute and relative positioning and floats are not the best way to go.

 

Relative positioning and floats ARE the way to go in my opinion but position: absolute is useful sometimes INSIDE position: relative divs.

Edited by Wickham
Link to comment
Share on other sites

Everyone says margins, padding, absolutes, and floats are bad but I have everything working great will all those except this one little troublesome div.

 

Honestly I would not know how to position a layout without those items, I am sure there is a more professional way, but I am restructuring this website from deprecated css styles such as moz-opacity and opacity.

 

I am sure I am probably using styles not recommended by professionals but it does look really good besides that one troublesome div.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...