PDA

View Full Version : CSS screen resolution



moogle1979
Jan 25th, 2009, 12:46 AM
Here is my index page code



<?php require_once("includes/session.php"); ?>
<?php require_once("includes/connection.php"); ?>
<?php require_once("includes/functions.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Mordecai" />

<title>Rigganmore - Land of a Thousand Dreams</title>
<script type="text/javascript" src="javascript/general.js"></script>
<script type="text/javascript" src="javascript/mouseroll.js"></script>
<link type="text/css" rel="stylesheet" href="stylesheet/general.css" />
<link type="text/css" rel="stylesheet" href="stylesheet/default.css" />
</head>
<body>
<div class="wrapper">
<!-- Header Start-->
<div id="main_header">
<!-- Contains Main Image -->
<div id="header">
<!-- Start of User Information and Log in Form -->
<div id="header_user">
<?php
// checks to see if person is logged in
if ($_SESSION['login'] == 1){
?>
<div id="stats">
<img src="./images/avatars/<? echo $_SESSION['dp']; ?>" alt="<?php echo $_SESSION['name']; ?>'s Avatar" id="avatar" />
<span class="statmsg">
Welcome, <?php echo $SESSION['name'] . "! (" . $SESSION['userid'] . ")"?>
</span>
<br />
Status: <?php echo $_SESSION['status']; ?> <br />
Money: <?php echo $_SESSION['money']; ?> <br />
Bank: <?php echo $_SESSION['bank']; ?> <br />
Level: <?php echo $_SESSION['lvl']; ?> <br />
HP: <?php echo $_SESSION['hp']; ?> <br />
Exp: <?php echo $_SESSION['exp']; ?> <br />
<a href="/actions/logout.php" onmouseover="this.style.color = '#d9e1bc'" onmouseout="this.style.color = '#002a4c'">Logout</a>
</div>
<?php
}
else {
?>
<div id="welcomemsg">
Please Login to Start Playing
</div>
<form method="post" action="/actions/login.php" class="float_right" id="main_login">
Username: <input class="text" size="10" type="text" name="uname" maxlength="30" /><br />
Password: &nbsp;<input class="text" size="10" type="password" name="pass" maxlength="30" /><br /><br />
<input class="button" type="submit" name="login" value="Login" onclick="this.style.visibility = 'hidden';" />
<span id="lost">
<a href="actions/lostpassword.php" onmouseover="this.style.color = '#d9e1bc'" onmouseout="this.style.color = '#002a4c'">Lost Password?</a>
</span>
</form>
<?php
}
?>
</div>
<!-- End of User Information and Login
Start of Navigational Links -->
<div id="navigation">
&nbsp;
</div>
<!-- End of Navigational Links -->
</div>
</div>
<!-- End of Header -->
<!-- Start of Main Body -->
<div id="mainbody">
<div id="body">
<h1 class="center">Welcome to Rigganmore</h1>
<h2 class="center">The Land of a Thousand Dreams</h2>
</div>
<div id="side_nav">
<h4 class="center">Not a Member?</h4>
<a href="/prereg/" onmouseover="this.style.color = '#d9e1bc'" onmouseout="this.style.color = '#002a4c'"><img src="" alt="Pre-Registration" /></a>
</div>
</div>
<!-- End of Main Body -->
</div>
</body>
</html>



Here is my CSS page with the positioning problems



/*********************************
* Main Page Stuff *
*********************************/
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: tahoma, ariel, sans-serif;
font-size: 12px;
}
img {
border: none;
}
a {
color: #002a4c;
}
div.clear_float {
clear:both;
}
.float_right {
float: right;
}
.center {
text-align:center
}
div.wrapper {
width: 100%;
margin-left : 0px;
margin-right: 0px;
background-color: #002a4c;

}
/*********************************
* Main_Header *
*********************************/
div#main_header {
clear:both;
height: 200px;
position: absolute;
width: 100%;
}
/*********************************
* Header *
*********************************/
div#header {
clear:both;
height: 200px;
position: absolute;
width: 100%;
}
/*********************************
* Header_User *
*********************************/
div#header_user {
clear: both;
position: absolute;
height: 30px;
left: 50%;
top: 50px;
margin-left: -400px;
padding-top: 10px;
width: 780px;
font-size: 10pt;
}
#header_user form {
margin-right: 5px;
}
div#welcomemsg {
margin-left: 550px;
}
/*********************************
* Forms *
*********************************/
input.button {
font-size: 14px;
text-align: center;
background-color: #002a4c;
color: #d9e1bc;
border: none;
padding-top: 2px;
padding-bottom: 2px;
margin-left: 10%;
}
#main_login {
padding-right: 20px;
}
/*********************************
* Links *
*********************************/
span#lost {
position: relative;
left: 20px;
}
/*********************************
* Player Stats *
*********************************/
div#stats {
text-align: center;
position: absolute;
left: 515px;
height: 100px;
width: 260px;
font-size: 8pt;
}
span.statmsg {
font-size: 12px;
font-weight: bold;
}
img#avatar {
width: 100px;
height: 100px;
float: left;
border: solid #006699 1px;
}
/*********************************
* Navigation *
*********************************/
div#navigation {
position: absolute;
left: 20%;
margin-left: -150px;
top: 175px;
height: 30px;
width: 90%;
vertical-align: middle;
}
div#side_nav {
border: 1px solid #FFFFFF;
position: absolute;
left: 90%;
margin-left: -115px;
top: 200px;
width: 105px;
}
div#side_nav h4{
margin: 10px 0 5px 0;
padding: 0;
text-align: center;
}
div#side_nav a{
margin: 10px 0 5px 0;
padding: 0;
text-align: center;
}
/*********************************
* Main Body *
*********************************/
div#main_body {
clear:both;
top: 225px;
position: absolute;
width: 100%;
height: 100%;
}
div#body {
clear: both;
position: absolute;
left: 20%;
margin-left: -50px;
top: 215px;
width: 60%;
}


If you notice all of them position correctly except div#side_nav. For some reason I cannot get that one div to position correctly for all screen resolutions however I have the whole rest of the page positioned correctly based on screen resolution.

Can someone help me?

Apostropartheid
Jan 25th, 2009, 12:55 AM
Post parsed XHTML code, please: PHP is rather useless. If you don't know how to do this, go to this page in your browser, view its source and copy that.

moogle1979
Jan 25th, 2009, 01:02 AM
I went to XAMPP server displayed the page and then viewed and copied source code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Mordecai" />

<title>Rigganmore - Land of a Thousand Dreams</title>
<script type="text/javascript" src="javascript/general.js"></script>
<script type="text/javascript" src="javascript/mouseroll.js"></script>

<link type="text/css" rel="stylesheet" href="stylesheet/general.css" />
<link type="text/css" rel="stylesheet" href="stylesheet/default.css" />
</head>
<body>
<div class="wrapper">
<!-- Header Start-->
<div id="main_header">
<!-- Contains Main Image -->
<div id="header">
<!-- Start of User Information and Log in Form -->
<div id="header_user">

<div id="welcomemsg">
Please Login to Start Playing
</div>
<form method="post" action="/actions/login.php" class="float_right" id="main_login">
Username: <input class="text" size="10" type="text" name="uname" maxlength="30" /><br />
Password: &nbsp;<input class="text" size="10" type="password" name="pass" maxlength="30" /><br /><br />
<input class="button" type="submit" name="login" value="Login" onclick="this.style.visibility = 'hidden';" />
<span id="lost">

<a href="actions/lostpassword.php" onmouseover="this.style.color = '#d9e1bc'" onmouseout="this.style.color = '#002a4c'">Lost Password?</a>
</span>
</form>
</div>
<!-- End of User Information and Login
Start of Navigational Links -->
<div id="navigation">
&nbsp;
</div>

<!-- End of Navigational Links -->
</div>
</div>
<!-- End of Header -->
<!-- Start of Main Body -->
<div id="mainbody">
<div id="body">
<h1 class="center">Welcome to Rigganmore</h1>
<h2 class="center">The Land of a Thousand Dreams</h2>
</div>

<div id="side_nav">
<h4 class="center">Not a Member?</h4>
<a href="/prereg/" onmouseover="this.style.color = '#d9e1bc'" onmouseout="this.style.color = '#002a4c'"><img src="" alt="Pre-Registration" /></a>
</div>
</div>
<!-- End of Main Body -->
</div>
</body>
</html>