Keep Content All Together

Place for questions and answers for all newcomers and new coders. This is a free for all forum, no question is too stupid and to noob.
Post Reply
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Keep Content All Together

Post by Epiales »

Okay, this is what the page should look like when you start the game and click on attack:

Image


But when you join and start the game it is looking like this:

Image

How do I make it where it stays at one place at all times, even when the page is scrolled? Right now the only way to fix it is to hit the CTRL key and scroll the mouse out to line the divs up to where it looks normal...Can't even see the attack information until you scroll it out :( :( :(

Any ideas? Driving me mad...
Nothing fancy, but a work in progress!

http://gameplaytoday.net
Sim
Posts: 412
Joined: Sat Dec 26, 2009 5:37 pm

Re: Keep Content All Together

Post by Sim »

I don't understand. You got a link with a login?
oRPG Creator - Make Your Own Browser Game
oRPG Creator on Facebook
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Keep Content All Together

Post by Epiales »

Sim wrote:I don't understand. You got a link with a login?
http://gameplaytoday.net

test@test.com
test
Nothing fancy, but a work in progress!

http://gameplaytoday.net
Sim
Posts: 412
Joined: Sat Dec 26, 2009 5:37 pm

Re: Keep Content All Together

Post by Sim »

I still don't understand what your asking.

I see a problem with all URL's that go like this:

http://gameplaytoday.net/user.php?u={name}

The menu's are missing..
oRPG Creator - Make Your Own Browser Game
oRPG Creator on Facebook
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Keep Content All Together

Post by Epiales »

Sim wrote:I still don't understand what your asking.

I see a problem with all URL's that go like this:

http://gameplaytoday.net/user.php?u={name}

The menu's are missing..
That's the thing, there is nothing missing on my end. It's because the screen has to be scrolled in or out to line it all up. CTRL + your mouse wheel scrolling it until it lines up.
Nothing fancy, but a work in progress!

http://gameplaytoday.net
User avatar
MikuzA
Posts: 395
Joined: Thu Aug 08, 2013 8:57 am

Re: Keep Content All Together

Post by MikuzA »

I see your <div>-tags are a bit broken..

Start by Removing all the <center></center>, since you have already started with <div>'s use css to align the content.

<div id="left"> is above all the meta/title stuff, which makes it a bit unlogical but works thought..
<div id="right"> is by itself on the right.
<div id="pageMiddle"> covers the whole area but is with a 'set width of 50%'


What my suggestion would be is that,

but all the 3 areas of your page to one big div. Make them with that stick together.
Also good thing to know is to use min-width/height and max-width/height to control different resolutions/zoomings in order to keep your page 'nice and tidy'.

Example:
http://jsfiddle.net/hup0d3cz/
Why so serious?

Business Intelligence, Data Engineering, Data Mining
PHP, HTML, JavaScript, Bash/KornShell, Python, C#, PL/SQL
MySQL, DB2, Oracle, Snowflake
Pentaho, DataStage, Matillion, Unity3D, Blender
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Keep Content All Together

Post by Epiales »

MikuzA wrote:I see your <div>-tags are a bit broken..

Start by Removing all the <center></center>, since you have already started with <div>'s use css to align the content.

<div id="left"> is above all the meta/title stuff, which makes it a bit unlogical but works thought..
<div id="right"> is by itself on the right.
<div id="pageMiddle"> covers the whole area but is with a 'set width of 50%'


What my suggestion would be is that,

but all the 3 areas of your page to one big div. Make them with that stick together.
Also good thing to know is to use min-width/height and max-width/height to control different resolutions/zoomings in order to keep your page 'nice and tidy'.

Example:
http://jsfiddle.net/hup0d3cz/
Okay, I am working on u're suggestions. But I CANNOT get the page to center at all. I can get the toppage.php file to center, but not the rest of the screen. Sorry so much code, but have to give it all for someone to figure out why it won't center.


Main Page That holds all the divs:

Code: Select all

<?php include_once("php_includes/check_login_status.php")?>
<?php include_once("includes/functions.php");  ?> 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mafia Wars Kingdom</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style/style.css">

<left>
<?php include_once("template_pageTop.php"); ?>
</left>

<div id="left">
<?php include_once("leftbar.php")?>
</div>

<center>
<div id="pageMiddle">

<br />
<br />

</center>
</div>

<div id="right">
<?php include_once("rightbar.php");  ?>  
</div>

</body>
</html>
My Style Sheet Info

Code: Select all

body { margin: 0px; font-family: Tahoma, Geneva, sans-serif; font-size: 14px; 
background-color:#404040  }
/* PAGE TOP */

#pageTop {

/*background:url(headerSliver.png) repeat-x;*/
background-color:red;
background:url('ban.jpg');
height: 120px;
width:69.5%;
}

#pageTop > #pageTopWrap {
width: 1000px;
margin: 0px auto;
height: 100px;
}
#pageTop > #pageTopWrap > #pageTopLogo {
float: left;
height: 90px;
width: 108px;
}
#pageTop > #pageTopWrap > #pageTopRest {
float: left;
height: 90px;
width: 892px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 {
height: 44px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div {
margin-top: 8px;
padding: 4px;
text-align:right;

}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div > img {
top: 6px;
position:relative;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div > a {
color: #CCC;
text-decoration: none;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div > a:hover {
color: #C0E73D;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 {
height: 44px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div {
margin-top: 2px;
padding: 4px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div > a {
display: block;
float: left;
color:#CCC;
text-decoration: none;
margin: 0px 16px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div > a:hover {
color: #C0E73D;
}
#pageTop > #pageTopWrap > #pageTopRest >#menu2 > div > a > img{
position:relative;
top:-3px;}

#left {
float:left;
margin-top:5px;
width:auto;
background-color:#ccc;
	height:auto;

}

/* GAME PAGE MIDDLE */
#pageMiddle{
	float:left;
	width: 50%;
	height:928px;
	margin: 5px 10px 0px 10px;
	background-color:#ccc;
	border:2px;
	border-color:#660000;
}

#right {
float:left;
margin-top:5px;
width:auto;
height:auto;
background-color:#ccc;
}

My leftbar php include file

Code: Select all

<?php

$username = $_SESSION["username"];

// Select the member from the users table
$sql = "SELECT * FROM users WHERE username='$username' AND activated='1' LIMIT 1";
$user_query = mysqli_query($db_conx, $sql);
// Now make sure that user exists in the table
$numrows = mysqli_num_rows($user_query);
if($numrows < 1){
header("location: filenotfound.php");
    exit();
}
?>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mafia Wars Kingdom</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style/style.css">
<script src="js/main.js"></script>
<style type="text/css">
<!--
.style4 {font-family: Tahoma, GeneVerdana, Arial, Helvetica, sans-serifva, sans-serif; font-size: 16px; color: #FFFFFF;}
-->
</style>
</head>
<body>

<center>
<div>
<ul class="menu">
  <li><a href="" class="active"><span>GENERAL</span></a></li>
  <li><a href="index.php"><span>Home</span></a></li>
  <li><a href=""><span>Forums</span></a></li>
  <li><a href="mafiawarskingdom.php?members=1"><span>Members</span></a></li>  
  <li><a href=""><span>Contact GM</span></a></li>
</ul>


<ul class="menu">
  <li><a href="" class="active"><span>MEMBERS</span></a></li>
  <li><a href="mafiawarskingdom.php?rankings=1"><span>Rankings</span></a></li>
  <li><a href=""><span>Travel</span></a></li>
  <li><a href="mafiawarskingdom.php?bank=1"><span>Bank</span></a></li>
  <li><a href=""><span>Safe</span></a></li>
  <li><a href="mafiawarskingdom.php?donate=1"><span>Donate</span></a></li>
  <li><a href="mafiawarskingdom.php?usershop=1"><span>Shops</span></a></li>
  <li><a href="quests.php"><span>Quests</span></a></li>
</ul>


<ul class="menu">
  <li><a href="" class="active"><span>MAFIA FAMILY</span></a></li>
  <li><a href="forums.php"><span>Information</span></a></li>
  <li><a href="contactgm.php"><span>Income</span></a></li>
  <li><a href="contactgm.php"><span>Bank</span></a></li>
  <li><a href="contactgm.php"><span>Donations</span></a></li>
  <li><a href="contactgm.php"><span>Shop</span></a></li>
</ul>

<ul class="menu">
  <li><a href="" class="active"><span>JUDICIAL</span></a></li>
  <li><a href=""><span>Jail</span></a></li>
  <li><a href=""><span>Prison</span></a></li>
</ul>

</div>
My Rightbar php file

Code: Select all

<?php

include_once("includes/functions.php");    

$username = $_SESSION["username"];

// Select the member from the users table
$sql = "SELECT * FROM users WHERE username='$username' AND activated='1' LIMIT 1";
$user_query = mysqli_query($db_conx, $sql);
// Now make sure that user exists in the table
$numrows = mysqli_num_rows($user_query);
if($numrows < 1){
header("location: filenotfound.php");
    exit();
}
?>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mafia Wars Kingdom</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style/style.css">
<script src="js/main.js"></script>
<style type="text/css">
<!--
.style4 {font-family: Tahoma, GeneVerdana, Arial, Helvetica, sans-serifva, sans-serif; font-size: 16px; color: #FFFFFF;}
-->
</style>
</head>
<body>

<center>
<div>
    <ul class="menu1">
    <li><a href="" class="active"><span>RANKING</span></a></li>
    <li><a href=""><span><left><img src="images/rankings1.png" width="15" height="30">  <?php echo $user_ranking; ?></span></a></li>

    </ul>
    
<ul class="menu">
  <li><a href="" class="active"><span>NOTIFICATIONS</span></a></li>
  <li><a href="mafiawarskingdom.php?messages=1"><span>Messages</span></a></li>
  <li><a href=""><span>Friend Reqs</span></a></li>
  <li><a href="atklogs.php"><span>Attack Logs</span></a></li>  
</ul>

<ul class="menu">
  <li><a href="" class="active"><span>USER STATS</span></a></li>
</ul>

<div style="text-align:center">

<?php
$profile_pic = "";
$username = $_SESSION["username"];

// Select the member from the users table
$sql = "SELECT * FROM users WHERE username='$username' AND activated='1' LIMIT 1";
$user_query = mysqli_query($db_conx, $sql);
// Now make sure that user exists in the table
$numrows = mysqli_num_rows($user_query);
$row = mysqli_fetch_array($user_query, MYSQLI_ASSOC);

if($row['avatar'] == NULL){
    $profile_pic = '<img src="images/avatardefault.png" width="166" height="130">';
    echo $profile_pic;
}
else {
    $profile_pic = '<center><img src="user/'.$_SESSION["username"].'/'.$row['avatar'].'" width="166" height="130">';
    echo $profile_pic;
}
//************************* BEGINNING OF HEALTH STAT BAR *************************//
?>

    <ul class="menu2">
    <li><a href=""><span><img src="images/weap-pots/64/potionGreen.png" width='43' height='40' align="absmiddle">Health</span> <?php $width = ($row['hpoints'] / $row['maxhp']) * 100; $rounded = round($width); echo $rounded; ?>%</a></li><br>
    <li><a href=""><span><img src="images/weap-pots/64/potionRed.png" width='43' height='40' align="absmiddle">Experience</span></a></li>
    </ul>


<div id= "hpointsback">
<span><?php
echo "<img src='images/barback.png'>";
?></span>
</div>
<div id= "hpoints">
<?php
$width = ($row['hpoints'] / $row['maxhp']) * 150;

echo "<div style='float:left'><img src='images/hpoints.png' width='$width' height='10'> <div style='float:right'></div></div>";
?>
</div>

<br>

<div style="text-align:center">
<?php 
$width = ($row['hpoints'] / $row['maxhp']) * 100;
?>

</div>

<div id= "expback">
<span><?php
echo "<img src='images/expback.png'>";
?></span>
</div>
<div id= "experience">
<?php
$width = ($row['userexp'] / $row['maxexp']) * 150;

echo "<div style='float:left'><img src='images/experience.png' width='$width' height='10'> <div style='float:right'></div></div>";
?>

<?php
 $expneeded = ($user_level * 100) * $user_level;
  if ($row['userexp'] >= $expneeded)
 {    echo "<br><a href='mafiawarskingdom.php?levelup=1'>Level Up!!</a>";
 } else {
 echo  $expneeded - $row['userexp'];
 }
?>
</div>
<br />


    <ul class="menu2">
    <li><a href=""><span><img src="images/strength.png">Strength</span> <?php echo $row['strength'] ?></a></li>
    <li><a href=""><span><img src="images/defense.png">Defense</span> <?php echo $row['defense'] ?></a></li>
    <li><a href=""><span><img src="images/money.png">Money</span> <?php echo my_number_format($row['money']) ?></a></li>
    <li><a href=""><span><img src="images/bank.png">Bank</span> $<?php echo my_number_format($row['bank']) ?></a></li>
    </ul>
  
    <ul class="menu">
    <li><a href="" class="active"><span>CRIME-SPREE</span></a></li>
    <li><a href=""><span>Break-Ins</span></a></li>
    <li><a href=""><span>Robberies</span></a></li>
    <li><a href=""><span>Hit List</span></a></li>
    </ul>

    <ul class="menu2">
    <li><a href="" class="active"><span>AMMUNITION</span></a></li>
    
    <div id="posts">
    <li><a href=""><span><img src="images/usershops/bulletsicon.png" width='43' height='20' align="absmiddle" >Bullets</span> <?php echo $row['bullets']; ?></a></li></div>
    <li><a href=""><span><img src="images/usershops/AK-47bullets.png" width='48' height='20' align="absmiddle" >AK-47</span> <?php echo $row['AK-47'] ?></a></li>
    </ul>    
  
</div>
</div>
</body>
</html>

The top template header php

Code: Select all

<?php
$envelope = '<img src="images/new-message.png" width="25" height="25" alt="Notes" title="This envelope is for logged in members">';
$loginLink = '<a href="login.php">Log In</a>   |   <a href="signup.php">Sign Up</a>';
if($user_ok == true) {
$sql = "SELECT notescheck FROM users WHERE username='$log_username' LIMIT 1";
$query = mysqli_query($db_conx, $sql);
$row = mysqli_fetch_row($query);
$notescheck = $row[0];
$sql = "SELECT id FROM notifications WHERE username='$log_username' AND date_time > '$notescheck' LIMIT 1";
$query = mysqli_query($db_conx, $sql);
$numrows = mysqli_num_rows($query);
    if ($numrows == 0) {
$envelope = '<a href="notifications.php" title="Your notifications and friend requests"><img src="images/message-already-read.png" width="25" height="25" alt="Notes" ></a>';
    } else {
$envelope = '<a href="notifications.php" title="You have new notifications"><img src="images/notification.gif" width="25" height="25" alt="Notes"></a>';
}
    $loginLink = '<a href="mafiawarskingdom.php?game=1">Game'.'</a>   | <a href="user.php?u='.$log_username.'">'.$log_username.'</a>   |   <a href="logout.php">Log Out</a>';
}
?>
<style type="text/css">
<!--
.style1 {
    color: #CCCCCC;
    font-weight: bold;
    font-size: 14px;
}
-->
</style>
<left>
<div id="pageTop">
  <div id="pageTopWrap">
    <div id="pageTopLogo">
      <a href="index.php"></a>    </div>
    <div id="pageTopRest">
      <div id="menu1">
        <div>
          <?php echo $envelope; ?>     <?php echo $loginLink; ?>
        </div>
      </div>
      <div id="menu2">
        <div>
          <a href="index.php">
            <img src="images/home.png" alt="home" title="Home">
          </a>

          <!--<a href="#">Menu_Item_1</a>
          <a href="#">Menu_Item_2</a> -->
        </div>
      </div>
    </div>
  </div>
</div>

I have no idea why I can't center the page, but maybe someone can see it... Thx
Nothing fancy, but a work in progress!

http://gameplaytoday.net
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Keep Content All Together

Post by Epiales »

Anyone have any idea why I can't center page? I kind of stopped until I can fix this, as I have to redo the setup once I figure it out. No since in continuing until I get this resolved :cry: :cry:
Nothing fancy, but a work in progress!

http://gameplaytoday.net
User avatar
MikuzA
Posts: 395
Joined: Thu Aug 08, 2013 8:57 am

Re: Keep Content All Together

Post by MikuzA »

Hello,

Since this is a HTML/CSS problem, can you put the site where the problem is online and throw the link here?
It's hard to see from the code, without actually 'seeing' it.

Or me guide me through at your game-site to the section where this issue sits.

[EDIT] Or I am looking at your game at http://gameplaytoday.net/mafiawarskingdom.php?game=1 and trying to understand what part is not centered.
Why so serious?

Business Intelligence, Data Engineering, Data Mining
PHP, HTML, JavaScript, Bash/KornShell, Python, C#, PL/SQL
MySQL, DB2, Oracle, Snowflake
Pentaho, DataStage, Matillion, Unity3D, Blender
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Keep Content All Together

Post by Epiales »

MikuzA wrote:Hello,

Since this is a HTML/CSS problem, can you put the site where the problem is online and throw the link here?
It's hard to see from the code, without actually 'seeing' it.

Or me guide me through at your game-site to the section where this issue sits.

[EDIT] Or I am looking at your game at http://gameplaytoday.net/mafiawarskingdom.php?game=1 and trying to understand what part is not centered.
That is the game site server, but not the files I'm working with currently, that is why I put the code above. The game sites php is messed up so I'm working on new code on my localhost to upload to game server onine.
Nothing fancy, but a work in progress!

http://gameplaytoday.net
Post Reply

Return to “Beginner Help and Support”