Jump to content
Stef's Coding Community
moogle1979

CSS Positioning for multi screen resolution

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




Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Clear both doesn't achieve anything with a position: absolute div as they are taken out of the normal flow, so can't relate to a float of another div.

 

I don't think my solution achieves very much. I think you need a major restructuring.

Share this post


Link to post
Share on other sites

Yes, I am thinking the same thing. I really thought I knew my CSS until I found out absolute and relative positioning and floats are not the best way to go. I just keep sitting there and thinking, without positioning how is a layout supposed to look good?

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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...