Staff Page Help

[zubboH123]

Hey, Devbest i need help with my staff page im using Aurora CMS skin for Revcms my (edit) and i cant seem to fix the staff page problem. If you could help that would be great below will be a screenie and the staff page please help.

screenie:

You must be registered for see links

staff page below:

<div id="black_bar">
<div class="container">
Welcome Back, {username}
<span class="online_users"> <img
src="../app/tpl/skins/HubboCMS/images/users.png" border="0" style="float:left; padding-left:15px;position:relative;left:-7px;" />
{online} Zubbo's Online!
</span>
</div>
</div>
<div id="blue_bar">
<div class="container">
<a href="index.php">
<img src="../app/tpl/skins/HubboCMS/images/logo.gif" border="0" style="float:left; padding-top:15px;position:relative;left:-7px;" />
</a>
<div id="user_avatar" class="avatar" style="background:url(

You must be registered for see links

) -75px 0px;"> </div>
<div id="enter_area">
<div class="enterButton">
<center>
<a href="client" onClick"mango.client.popup(); return false;">Enter {hotelName} Hotel</a>
</center>
</div>
</div>
</div>
</div>
<div id="menu">
<div class="container">
<ul>
<li><a href="me">Me</a></li>
<li><a href="account">My Account</a></li>
<li><a href="news">News</a></li>
<li><a href="staff">Staff</a></li>
<li><a href="rules">Rules</a></li>
<li><a href="vip">Vip</a></li>
<li><a href="tinychat">Tinychat</a>
{housekeeping}
<li><a href="logout">Logout</a></li>
</ul>
</div>
</div>
<div id="container"
<div id="main_left">
<div id="main_content" style="width:578px;">
<h2 class="title">{hotelname} Owner's</h2><br />
<hr />
<?php
$querylist = mysql_query("SELECT * FROM users WHERE rank = 7");
while($row = mysql_fetch_array($querylist))
{
echo "<div id=\"StaffBox\"><div id=\"StaffBox\">";
echo "<img src=\"

You must be registered for see links

";
echo $row['look'];
echo "\"style=\"float:left\"/>";
echo "<div id=\"staff_online\">";
if($row['online'] == 0){
echo "<div id=\"offline\">Offline</div>";
}
else{
echo "<div id=\"online\">On Duty</div>";

}
echo "</div><div id=\"staff_username\">";
$username = $row['username'];
echo ucwords($username);
echo "</div>";
echo $row['motto'];
echo "</br>";
echo "<img src=\"app/tpl/skins/HubboCMS/images/owner.bmp\">";
echo "</div></div>";
}
?>
</div>
<br />
<div id="main_content" style="width:578px;">
<h2 class="title">{hotelname} Admin's</h2>
<hr />
<?php
$querylist = mysql_query("SELECT * FROM users WHERE rank = 6");
while($row = mysql_fetch_array($querylist))
{
echo "<div id=\"StaffBox\"><div id=\"StaffBox\">";
echo "<img src=\"

You must be registered for see links

";
echo $row['look'];
echo "\"style=\"float:left\"/>";
echo "<div id=\"staff_online\">";
if($row['online'] == 0){
echo "<div id=\"offline\">Offline</div>";
}
else{
echo "<div id=\"online\">On Duty</div>";
}
echo "</div><div id=\"staff_username\">";
$username = $row['username'];
echo ucwords($username);
echo "</div>";
echo $row['motto'];
echo "</br>";
echo "<img src=\"app/tpl/skins/HubboCMS/images/admin.bmp\">";
echo "</div></div>";
}
?>
</div>
<br />
<div id="main_content" style="width:578px;">
<h2 class="title">{hotelname} Moderator's </h2>
<hr />
<?php
$querylist = mysql_query("SELECT * FROM users WHERE rank = 5");
while($row = mysql_fetch_array($querylist))
{
echo "<div id=\"StaffBox\"><div id=\"StaffBox\">";
echo "<img src=\"

You must be registered for see links

";
echo $row['look'];
echo "\"style=\"float:left\"/>";
echo "<div id=\"staff_online\">";
if($row['online'] == 0){
echo "<div id=\"offline\">Offline</div>";
}
else{
echo "<div id=\"online\">On Duty</div>";
}
echo "</div><div id=\"staff_username\">";
$username = $row['username'];
echo ucwords($username);
echo "</div>";
echo $row['motto'];
echo "</br>";
echo "<img src=\"app/tpl/skins/HubboCMS/images/mod.bmp\">";
echo "</div></div>";
}
?>
</div>
<br />
<div id="main_content" style="width:578px;">
<h2 class="title">{hotelname} Trial Moderators </h2>
<hr />
<?php
$querylist = mysql_query("SELECT * FROM users WHERE rank = 4");
while($row = mysql_fetch_array($querylist))
{
echo "<div id=\"StaffBox\"><div id=\"StaffBox\">";
echo "<img src=\"

You must be registered for see links

";
echo $row['look'];
echo "\"style=\"float:left\"/>";
echo "<div id=\"staff_online\">";
if($row['online'] == 0){
echo "<div id=\"offline\">Offline</div>";
}
else{
echo "<div id=\"online\">On Duty</div>";
}
echo "</div><div id=\"staff_username\">";
$username = $row['username'];
echo ucwords($username);
echo "</div>";
echo $row['motto'];
echo "</br>";
echo "<img src=\"app/tpl/skins/HubboCMS/images/trial mod.bmp\">";
echo "</div></div>";
}
?>
</div>
<br />
<div id="main_content" style="width:578px;">
<h2 class="title">{hotelname} Event Staff </h2>
<hr />
<?php
$querylist = mysql_query("SELECT * FROM users WHERE rank = 3");
while($row = mysql_fetch_array($querylist))
{
echo "<div id=\"StaffBox\"><div id=\"StaffBox\">";
echo "<img src=\"

You must be registered for see links

";
echo $row['look'];
echo "\"style=\"float:left\"/>";
echo "<div id=\"staff_online\">";
if($row['online'] == 0){
echo "<div id=\"offline\">Offline</div>";
}
else{
echo "<div id=\"online\">On Duty</div>";
}
echo "</div><div id=\"staff_username\">";
$username = $row['username'];
echo ucwords($username);
echo "</div>";
echo $row['motto'];
echo "</br>";
echo "<img src=\"app/tpl/skins/HubboCMS/images/event staff.bmp\">";
echo "</div></div>";
}
?>
</div><br/>
<div style="clear:both;"></div>
<hr/>
<div style="clear:both;"></div></div>
</div>
<div id="footer">
<hr />
<strong>Copyright {hotelName} 2012, All rights reserved go to their respective owner(s).<strong/><br/>
<br/>
</div>

 

[Ryabs]

is the problem the characters are too low?

 

[Heaplink]

Your problem is that you don't clearfix your float. Also that theres not enough space for the div's (which got floats on it). Remove this: \"style=\"float:left\"

 

[zubboH123]

it didn't work

 

[Heaplink]

Are you sure you removed EVERY line of the above... every line.

 

[zubboH123]

I need it to look normal like the avatar images on the right and the info and badge on the left like all staff page's are how can i do that please help.

 

[zubboH123]

Yes i did and it kinda made it worse

 

[Heaplink]

Before going into too much detail, go read some tutorials of HTML & CSS this will help you to understand the setup.

Basically you need one DIV ("parent") with two DIVs ("childs") inside. The parent div don't really need any properties. The child divs should be floated left and have a fixed width (e.g. 150px) and you should be good to go. Again if you don't know what I'm talking about, do as I said above.

 

[zubboH123]

cant you just tell me how to fix it

 

[Heaplink]

<div> <!-- Parent div-->
<div style="float:left; width:150px;"> <!-- Child div (avatar) -->
<!-- Your avatar image here -->
</div> <!-- End of child div (avatar) -->
 
<div style="float:left width:150px">
<!-- Your badges and info here -->
</div>
<div> <!-- End of Parent div -->

Note: this is just a basic setup, but that is how I explained it. You can adjust the width to the desired.

 

[zubboH123]

do you think you could just copy that staff page code above that i supplied and paste into note pad add the code and copy and paste it on here so i can just copy it onto my staff page after i wipe it please im not good a coding im only good a graphics

 

[Heaplink]

No. As I said you should go read about HTML & CSS. If you wan't to get your bugs fixed, you should be able to do it yourself. It's really simple and you get to use it in the future.

 

[Jake7282]

Characters are all fucked up somewhere in the code you need to raise where it says to fetch it!

 

[FarLock]

Simple. Use this and replace all the texts found in your app/tpl/skins/{skin folder}/styles/global.css to this one:

@charset "UTF-8";body#me, body#account, body#news{background:#E3E3DB;font-family:Tahoma,Geneva,sans-serif;font-size:13px;margin:0;padding:0;}#maintenance_enabled{padding-top:5px;padding-bottom:5px;color:#bc532a;width:100%;height:20px;background:#fffde5;border:#f2e2c2 1px solid;margin-top:15px;}#header_bar{height:40px;font-size:15px;width:100%;margin:auto;background:#333333;}#container-me{width:950px;margin:auto;}#content{border:#D0D0D0 1px solid;width:910px;min-height: 400px;background:#FFFFFF;margin:auto;padding:20px;padding-top:10px;}#featured_campaign{width:910px;height:140px;margin-top:15px;background:url(../images/featured_1.png);}#content hr{border:none;border-top:#d0d0d0 1px solid;}#footer{border-left:#1d1d1d 1px solid;border-right:#1d1d1d 1px solid;color:#FFFFFF;font-size:16px;width:950px;height:130px;background:#333333;margin:auto;}#footer ul{padding:0;float:left;margin:0;height:120px;margin:15px 0 0 20px;}#footer li{font-size:13px;list-style:none;}#footer a{color:#FFF;text-decoration:none;}#footer a:hover{text-decoration:underline;}#header_bar .mid{width:950px;margin:auto;padding-top:10px;color:#FFFFFF;}#header_bar .lefts{width:400px;float:left;margin-right:10px;}#header_bar .right{width:530px;text-align:right;height:25px;float:right;}h3{font-size:13px;margin:0;padding:0;float:right;}#footer .left{float:left;width:150px;}#logo{float:left;}#menu{font-size:16px;float:right;margin:0;padding:0;}#menu li{float:left;padding-top:21px;padding-left:12px;list-style:none;}#clear{clear:both;}#menu a{color:#333;text-decoration:none;}#menu a:hover{text-decoration:underline;}.content-box{width:590px;border:#d0d0d0 1px solid;border-bottom:#d0d0d0 4px solid;border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;}.news-articles-box{width:300px;border:#d0d0d0 1px solid;border-bottom:#d0d0d0 4px solid;}.content-box-black{width:580px;background:#333333;margin:5px;height:35px;border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;}.content-box-deep-blue{background:#2767a7;width:580px;margin:5px;height:35px;border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;}.news-articles-box-green{width:290px;background:#343434;margin:5px;border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;}.content-box-content{padding:10px;}.content-box-content p{padding:0;margin:0;}.title{text-align:center;color:#FFFFFF;font-size:14px;height:26px;margin:0;padding:0;padding-top:5px;}#avatar-plate{background:url(../images/info_habbo_plate.png) no-repeat 2px -162px;height:138px;width:96px;position:relative;left:15px;float:left;}#main_left{width:600px;float:left;}#main_right{width:300px;float:right;}#user_info{width:130px;float:left;}#avatar-plate:hover{background-position:2px 75px;}#user{padding-left:13px;}#top_stories{float:right;width:300px;}#top-story{width:260px;height:147px;font-size:18px;color:#FFFFFF;padding:10px 20px;}#top-headlines-holder{width:298px;border-bottom:#d0d0d0 4px solid;border-right:#d0d0d0 1px solid;border-left:#d0d0d0 1px solid;border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-moz-border-b-left-radius:5px;-o-border-top-left-radius:5px;-moz-border-top-right-radius:5px;-o-border-top-right-radius:5px;-webkit-border-radius:5px;border-top-right-radius:0;border-top-left-radius:0;}#enter{background-image:url(../images/enter.png);width:142px;height:49px;float:right;}input#register,textarea,select{outline:none;border:1px #e0e0e0 solid;padding:5px;font-size:14px;font-weight:bold;width:200px;}input:focus{border-color:#ccc;background-color:#fafafa;}input[type=submit],input.button{color:#888;border-color:#ddd;background:#f0f0f0;cursor:pointer;padding:3px;height:40px;width:90px;}input[type=submit]:hover,input.button:hover{background-color:#e6e6e6;border-color:#d6d6d6;}#user_infos{margin-top:40px;width:250px;background:#333333;float:left;}#message{padding:5px;color:#bc532a;min-height:17px;max-height:34px;background:#fffde5;border:#f2e2c2 1px solid;margin-bottom:5px;}#menu_left{width:260px;float:left;}#menu_right{width:590px;float:left;}#enter_area{float:right;height:90px;width:400px;padding-top:24px;margin-right:50px;margin-top:25px;}.snippet{color:#FFFFFF;font-size:12px;width:150px;margin:0;}.subnews_1{padding:5px;height:30px;background:#ececec;}.subnews_0{padding:5px;height:30px;}.sub-news-date{font-size:11px;}#top-story a{color:#FFFFFF;text-decoration:none;}.subnews_0 a,.subnews_1 a{color:#000000;}.campaign_content{float:left;margin-left:5px;width:400px;min-height:45px;}.campaign_images{float:left;}h2{font-size:16px;margin:0;padding:0;}.gothere{float:right;}.gothere a{color:#000;}.campaign_light{padding-bottom:10px;}.campaign_dark{background:#ececec;}.news-articles-box a{color:#000;}.content-box-orange{background:#f66200;width:580px;margin:5px;height:35px;border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;}.buttonContainer{width:515px;;height:52px;float:right;}.enterButton a{display:block;font-weight:500;float:right;width:auto;height:38px;background-image:url(../images/enterButton.png);border-radius:7px;-moz-border-radius:7px;background-repeat:repeat-x;-o-border-radius:7px;-webkit-border-radius:7px;border:2px solid #007A00;padding-top:14px;background-color:#007a00;padding-left:15px;padding-right:15px;color:#FFF;font-size:18px;text-decoration:none;}.enterButton a:hover{float:right;background-position:0 -53px;background-repeat:repeat-x;background-color:#007a00;width:auto;height:38px;background-image:url(../images/enterButton.png);border-radius:7px;-moz-border-radius:7px;-o-border-radius:7px;-webkit-border-radius:7px;border:2px solid #007A00;padding-top:14px;padding-left:15px;padding-right:15px;color:#FFF;font-size:18px;}.userAmounts{bottom:100px;float:right;display:table-cell;vertical-align:middle;margin-right:10px;text-wrap:normal;}#staff_username{padding-top:25px;font-weight:bolder;}#StaffBox {height:110px;width:540px;}#staff_online{padding-top:25px;float:right;font-weight:bolder;}#offline{color:maroon;}#online{color:green}#navi{font-size:16px;float:right;margin:50;padding:50;}
 
.content-box-deep-red
{
background:#cd1221;
width:580px;
margin:5px;
height:35px;
border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;
}
 
.content-box-green
{
background:#20cd11;
width:580px;
margin:5px;
height:35px;
border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;
}
 
.content-box-yellow
{
background:#f0f005;
width:580px;
margin:5px;
height:35px;
border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;
}
 
.content-box-palegreen
{
background:#b2ff59;
width:580px;
margin:5px;
height:35px;
border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;
}
 
.content-box-purple
{
background:#a659ff;
width:580px;
margin:5px;
height:35px;
border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;
}

And I'd be glad if you could give us some credits at habprohotel.co.uk since I grabbed those codes from my hotel.