help needed combining two CSS doc pls

Need help with an engine or coding not on the list? Need help with a game or the website and forums here? Direct all questions here.
Post Reply
User avatar
Slav2
Posts: 96
Joined: Tue Jan 11, 2011 7:46 am

help needed combining two CSS doc pls

Post by Slav2 »

ok i have the css im using fo reverything and i got a script off google (chat) that i want to add to my current css , but i dont know how to do this...ive tried to put them together, but after i did the whole page just looked messy....so if someone could either put them together for me or at least tell me what to add into the current CSS i would rly appreciate it....thanks..

Current css doc:

Code: Select all

body {
	background-color: #FFCC66;
	
}
#backgroundpic {
	position:absolute;
	left:70px;
	top:20px;
	width:150px;
	height:150px;
	z-index:1;
}

#townview {
	position:absolute;
	left:259px;
	top:198px;
	width:600px;
	height:400px;
	z-index:2;
}

#logoroyal {
	position:absolute;
	left:341px;
	top:30px;
	width:150px;
	height:70px;
	z-index:2;
	font-family: QuigleyWiggly;
	font-size: 60px;
}

#logoempires {
	position:absolute;
	left:531px;
	top:30px;
	width:150px;
	height:70px;
	z-index:2;
	font-family: QuigleyWiggly;
	font-size: 60px;
}

#premiumaccountbutton {
	position:absolute;
	left:78px;
	top:26px;
	width:150px;
	height:80px;
	z-index:3;
}

#visitforumbutton {
	position:absolute;
	left:820px;
	top:26px;
	width:150px;
	height:80px;
	z-index:3;
}

#currentcityword {
	position:absolute;
	left:87px;
	top:165px;
	width:400px;
	height:40px;
	z-index:2;
}

#cities {
	position:absolute;
	left:190px;
	top:165px;
	width:400px;
	height:40px;
	z-index:2;
}

#defaultselect {
	position:absolute;
	left:278px;
	top:162px;
	width:400px;
	height:40px;
	z-index:3;
}

#wood {
	position:absolute;
	left:92px;
	top:122px;
	width:30px;
	height:20px;
	z-index:2;
	color: blue;
}

#stone {
	position:absolute;
	left:197px;
	top:122px;
	width:50px;
	height:20px;
	z-index:2;
	color: blue;
}

#iron {
	position:absolute;
	left:295px;
	top:122px;
	width:50px;
	height:20px;
	z-index:2;
	color: blue;
}

#food {
	position:absolute;
	left:384px;
	top:122px;
	width:50px;
	height:20px;
	z-index:2;
	color: blue;
}

#people {
	position:absolute;
	left:481px;
	top:122px;
	width:50px;
	height:20px;
	z-index:2;
	color: blue;
}

#gold {
	position:absolute;
	left:575px;
	top:122px;
	width:50px;
	height:20px;
	z-index:2;
	color: blue;
}

#minfood {
	position:absolute;
	left:665px;
	top:122px;
	width:50px;
	height:20px;
	z-index:2;
	color: blue;
}

#happiness {
	position:absolute;
	left:758px;
	top:122px;
	width:50px;
	height:20px;
	z-index:2;
	color: blue;
}

#loyalty {
	position:absolute;
	left:860px;
	top:122px;
	width:50px;
	height:20px;
	z-index:2;
	color: blue;
}

#wooddisplay {
	position:absolute;
	left:137px;
	top:122px;
	width:50px;
	height:20px;
	z-index:3;
}

#stonedisplay {
	position:absolute;
	left:237px;
	top:122px;
	width:50px;
	height:20px;
	z-index:3;
}

#irondisplay {
	position:absolute;
	left:327px;
	top:122px;
	width:50px;
	height:20px;
	z-index:3;
}

#fooddisplay {
	position:absolute;
	left:425px;
	top:122px;
	width:50px;
	height:20px;
	z-index:3;
}

#peopledisplay {
	position:absolute;
	left:526px;
	top:122px;
	width:50px;
	height:20px;
	z-index:3;
}

#golddisplay {
	position:absolute;
	left:610px;
	top:122px;
	width:50px;
	height:20px;
	z-index:3;
}

#minfooddisplay {
	position:absolute;
	left:710px;
	top:122px;
	width:50px;
	height:20px;
	z-index:3;
}

#happinessdisplay {
	position:absolute;
	left:826px;
	top:122px;
	width:50px;
	height:20px;
	z-index:3;
}

#loyaltydisplay {
	position:absolute;
	left:910px;
	top:122px;
	width:50px;
	height:20px;
	z-index:3;
}

#announcmentsbutton {
	position:absolute;
	left:508px;
	top:157px;
	width:50px;
	height:20px;
	z-index:3;
}

#worldchatbutton {
	position:absolute;
	left:622px;
	top:157px;
	width:50px;
	height:20px;
	z-index:3;
}

#alliancechatbutton {
	position:absolute;
	left:734px;
	top:157px;
	width:50px;
	height:20px;
	z-index:3;
}

#questsbutton {
	position:absolute;
	left:847px;
	top:157px;
	width:50px;
	height:20px;
	z-index:3;
}

#overviewbutton {
	position:absolute;
	left:135px;
	top:235px;
	width:150px;
	height:50px;
	z-index:2;
}

#villageviewbutton {
	position:absolute;
	left:135px;
	top:265px;
	width:150px;
	height:50px;
	z-index:2;
}

#resourcebutton {
	position:absolute;
	left:135px;
	top:295px;
	width:150px;
	height:50px;
	z-index:2;
}

#inboxbutton {
	position:absolute;
	left:135px;
	top:325px;
	width:150px;
	height:50px;
	z-index:2;
}

#viewmapbutton {
	position:absolute;
	left:135px;
	top:355px;
	width:150px;
	height:50px;
	z-index:2;
}

#rankingsbutton {
	position:absolute;
	left:135px;
	top:385px;
	width:150px;
	height:50px;
	z-index:2;
}

#notesbutton {
	position:absolute;
	left:135px;
	top:415px;
	width:150px;
	height:50px;
	z-index:2;
}

#Logoutbutton {
	position:absolute;
	left:135px;
	top:445px;
	width:150px;
	height:50px;
	z-index:2;
}

#tag1{
			position:absolute;
			left:317px;
			top:260px;
            width:28px;
            height:36px;
			z-index:5;
			}

#tag2{
			position:absolute;
			left:500px;
			top:350px;
            width:75px;
            height:75px;
			z-index:5;
			}
			
#tag3{
			position:absolute;
			left:500px;
			top:450px;
            width:75px;
            height:75px;
			z-index:5;
			}
			
#tag4{
			position:absolute;
			left:750px;
			top:450px;
            width:28px;
            height:36px;
			z-index:5;
			}
			
#dateandtime {
	position:absolute;
	left:184px;
	top:609px;
	width:250px;
	height:35px;
	z-index:2;
	font-size: 11px;
	font-weight: 500;
}

#copyright {
	position:absolute;
	left:423px;
	top:608px;
	width:250px;
	height:35px;
	z-index:2;
	font-size: 11px;
	font-weight: 800;
}

#contactsupport {
	position:absolute;
	left:744px;
	top:608px;
	width:250px;
	height:35px;
	z-index:2;
	font-size: 11px;
	font-weight: 500;
}
The one i need to add:

Code: Select all

 
/* CSS Document */
body {
	font:12px arial;
	color: #222;
	text-align:center;
	padding:35px; }
 
form, p, span {
	margin:0;
	padding:0; }
 
input { font:12px arial; }
 
a {
	color:#0000FF;
	text-decoration:none; }
 
	a:hover { text-decoration:underline; }
 
#wrapper, #loginform {
	margin:0 auto;
	padding-bottom:25px;
	background:#EBF4FB;
	width:504px;
	border:1px solid #ACD8F0; }
 
#loginform { padding-top:18px; }
 
	#loginform p { margin: 5px; }
 
#chatbox {
	text-align:left;
	margin:0 auto;
	margin-bottom:25px;
	padding:10px;
	background:#fff;
	height:270px;
	width:430px;
	border:1px solid #ACD8F0;
	overflow:auto; }
 
#usermsg {
	width:395px;
	border:1px solid #ACD8F0; }
 
#submit { width: 60px; }
 
.error { color: #ff0000; }
 
#menu { padding:12.5px 25px 12.5px 25px; }
 
.welcome { float:left; }
 
.logout { float:right; }
 
.msgln { margin:0 0 2px 0; }
Thanks,

Slav2
Top
User avatar
PaxBritannia
Posts: 680
Joined: Sun Apr 18, 2010 1:54 pm

Re: help needed combining two CSS doc pls

Post by PaxBritannia »

Lets try this:

Code: Select all

    body {
       background-color: #FFCC66;
       
    }
    #backgroundpic {
       position:absolute;
       left:70px;
       top:20px;
       width:150px;
       height:150px;
       z-index:1;
    }

    #townview {
       position:absolute;
       left:259px;
       top:198px;
       width:600px;
       height:400px;
       z-index:2;
    }

    #logoroyal {
       position:absolute;
       left:341px;
       top:30px;
       width:150px;
       height:70px;
       z-index:2;
       font-family: QuigleyWiggly;
       font-size: 60px;
    }

    #logoempires {
       position:absolute;
       left:531px;
       top:30px;
       width:150px;
       height:70px;
       z-index:2;
       font-family: QuigleyWiggly;
       font-size: 60px;
    }

    #premiumaccountbutton {
       position:absolute;
       left:78px;
       top:26px;
       width:150px;
       height:80px;
       z-index:3;
    }

    #visitforumbutton {
       position:absolute;
       left:820px;
       top:26px;
       width:150px;
       height:80px;
       z-index:3;
    }

    #currentcityword {
       position:absolute;
       left:87px;
       top:165px;
       width:400px;
       height:40px;
       z-index:2;
    }

    #cities {
       position:absolute;
       left:190px;
       top:165px;
       width:400px;
       height:40px;
       z-index:2;
    }

    #defaultselect {
       position:absolute;
       left:278px;
       top:162px;
       width:400px;
       height:40px;
       z-index:3;
    }

    #wood {
       position:absolute;
       left:92px;
       top:122px;
       width:30px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #stone {
       position:absolute;
       left:197px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #iron {
       position:absolute;
       left:295px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #food {
       position:absolute;
       left:384px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #people {
       position:absolute;
       left:481px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #gold {
       position:absolute;
       left:575px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #minfood {
       position:absolute;
       left:665px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #happiness {
       position:absolute;
       left:758px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #loyalty {
       position:absolute;
       left:860px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #wooddisplay {
       position:absolute;
       left:137px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #stonedisplay {
       position:absolute;
       left:237px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #irondisplay {
       position:absolute;
       left:327px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #fooddisplay {
       position:absolute;
       left:425px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #peopledisplay {
       position:absolute;
       left:526px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #golddisplay {
       position:absolute;
       left:610px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #minfooddisplay {
       position:absolute;
       left:710px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #happinessdisplay {
       position:absolute;
       left:826px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #loyaltydisplay {
       position:absolute;
       left:910px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #announcmentsbutton {
       position:absolute;
       left:508px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #worldchatbutton {
       position:absolute;
       left:622px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #alliancechatbutton {
       position:absolute;
       left:734px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #questsbutton {
       position:absolute;
       left:847px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #overviewbutton {
       position:absolute;
       left:135px;
       top:235px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #villageviewbutton {
       position:absolute;
       left:135px;
       top:265px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #resourcebutton {
       position:absolute;
       left:135px;
       top:295px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #inboxbutton {
       position:absolute;
       left:135px;
       top:325px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #viewmapbutton {
       position:absolute;
       left:135px;
       top:355px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #rankingsbutton {
       position:absolute;
       left:135px;
       top:385px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #notesbutton {
       position:absolute;
       left:135px;
       top:415px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #Logoutbutton {
       position:absolute;
       left:135px;
       top:445px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #tag1{
             position:absolute;
             left:317px;
             top:260px;
                width:28px;
                height:36px;
             z-index:5;
             }

    #tag2{
             position:absolute;
             left:500px;
             top:350px;
                width:75px;
                height:75px;
             z-index:5;
             }
             
    #tag3{
             position:absolute;
             left:500px;
             top:450px;
                width:75px;
                height:75px;
             z-index:5;
             }
             
    #tag4{
             position:absolute;
             left:750px;
             top:450px;
                width:28px;
                height:36px;
             z-index:5;
             }
             
    #dateandtime {
       position:absolute;
       left:184px;
       top:609px;
       width:250px;
       height:35px;
       z-index:2;
       font-size: 11px;
       font-weight: 500;
    }

    #copyright {
       position:absolute;
       left:423px;
       top:608px;
       width:250px;
       height:35px;
       z-index:2;
       font-size: 11px;
       font-weight: 800;
    }

    #contactsupport {
       position:absolute;
       left:744px;
       top:608px;
       width:250px;
       height:35px;
       z-index:2;
       font-size: 11px;
       font-weight: 500;
    }


/* Google CSS Document */
#wrapper, #loginform {
   margin:0 auto;
   padding-bottom:25px;
   background:#EBF4FB;
   width:504px;
   border:1px solid #ACD8F0; }

#loginform { padding-top:18px; }

   #loginform p { margin: 5px; }

#chatbox {
   text-align:left;
   margin:0 auto;
   margin-bottom:25px;
   padding:10px;
   background:#fff;
   height:270px;
   width:430px;
   border:1px solid #ACD8F0;
   overflow:auto; }

#usermsg {
   width:395px;
   border:1px solid #ACD8F0; }

#submit { width: 60px; }

.error { color: #ff0000; }

#menu { padding:12.5px 25px 12.5px 25px; }

.welcome { float:left; }

.logout { float:right; }

.msgln { margin:0 0 2px 0; }
I've removed the parts of the Google Css which effected the whole page (body, form, p, span, a). The page shouldn't be distorted now, but the chatbox may appear a bit different. Unfortunately with only the css to play with, this is the best I can come up with.

Tell me if it works! :)

pax.
Top
User avatar
Slav2
Posts: 96
Joined: Tue Jan 11, 2011 7:46 am

Re: help needed combining two CSS doc pls

Post by Slav2 »

Awesome! Will try this in the morning. I'll let you know how it turned out.
Thanks,

Slav2
Top
User avatar
Slav2
Posts: 96
Joined: Tue Jan 11, 2011 7:46 am

Re: help needed combining two CSS doc pls

Post by Slav2 »

ok it works but its placing it behind the pic that i have right now...i tried adding a higher z-index number but its still behind the main pic...

this is what ive tried so far:

Code: Select all

/* Google CSS Document */
#wrapper, #loginform {
   margin:0 auto;
   padding-bottom:25px;
   background:#EBF4FB;
   width:504px;
   border:1px solid #ACD8F0; 
   z-index:7;}

#loginform { padding-top:18px; 
z-index:7;}

   #loginform p { margin: 5px; 
   z-index:7;}

#chatbox {
   text-align:left;
   margin:0 auto;
   margin-bottom:25px;
   padding:10px;
   background:#fff;
   height:270px;
   width:430px;
   border:1px solid #ACD8F0;
   overflow:auto; 
   z-index:7;}

#usermsg {
   width:395px;
   border:1px solid #ACD8F0;
z-index:7;   }

#submit { width: 60px; 
z-index:7;}

.error { color: #ff0000; 
z-index:7;}

#menu { padding:12.5px 25px 12.5px 25px; 
z-index:7;}

.welcome { float:left; 
z-index:7;}

.logout { float:right; 
z-index:7;}

.msgln { margin:0 0 2px 0; 
z-index:7;}
and then one last thing after that would be how or what would i change to position the chat box pixel x pixel exactly like i was doing for the rest of the page?...
Thanks,

Slav2
Top
User avatar
Slav2
Posts: 96
Joined: Tue Jan 11, 2011 7:46 am

Re: help needed combining two CSS doc pls

Post by Slav2 »

Anyone please?
Thanks,

Slav2
Top
User avatar
kaos78414
Posts: 507
Joined: Thu Jul 22, 2010 5:36 am

Re: help needed combining two CSS doc pls

Post by kaos78414 »

You should post the HTML as well so we can see what exactly this is affecting.
w00t
Top
User avatar
PaxBritannia
Posts: 680
Joined: Sun Apr 18, 2010 1:54 pm

Re: help needed combining two CSS doc pls

Post by PaxBritannia »

Yes, having the HTMl here would definitely help identify the problem. :)

pax.
Top
User avatar
Slav2
Posts: 96
Joined: Tue Jan 11, 2011 7:46 am

Re: help needed combining two CSS doc pls

Post by Slav2 »

kk here ill add the code and a screen shot

Code: Select all

<?php
include_once 'confff.php';
session_start();
(!isset($_SESSION['uid'])) ? header("Location: index.html") : "";
$uid = $_SESSION['uid'];
$_SESSION['uid'] = $uid;
        if(isset($_POST['city_change']) && $_POST['city_change'] != ""){
        mysql_query("UPDATE users SET current_city='$_POST[city_change]' WHERE id='$uid'");
        }
?>

<?php
//current city
$sql = mysql_query("SELECT current_city FROM users WHERE id='$uid'");
$city = mysql_fetch_array($sql);

	if($city['current_city'] < 1)
	{
	$sql10 = mysql_query("SELECT id FROM resources WHERE userid='$uid'");
	$city2 = mysql_fetch_array($sql10);
	mysql_query("UPDATE users SET current_city='$city2' WHERE id='$uid'");
	$cityview = $city2['id'];
	}
		else {
		$cityview = $city['current_city'];
		}
		
?>

<link href="maintemplate.css" rel="stylesheet" type="text/css" />

<div id="backgroundpic">
<?php

echo "<img src='/images/part1.GIF'>";

?>
</div>

<div id="currentcityword">
<?php

echo "Current Village: ";

?>
</div>

<form method="post">
<div id= "cities">
<?php
$sql = mysql_query("SELECT cityname FROM resources WHERE id='$cityview'");
$cityname = mysql_fetch_array($sql);
	echo $cityname['cityname'];
?>
</div>
<div id="defaultselect">
<select name="city_change">
<option value="" selected="selected">     Select     </option>
<?php
//drop down box
$sql = mysql_query("SELECT * FROM resources WHERE userid='$uid'");
while($row = mysql_fetch_array($sql))
echo "<option value='" . $row['id'] . "'>" . $row['cityname'] . "</option>"; ?>
</select>
<input type="submit" value="Change Village" />
</form>
</div>

<div id="premiumaccountbutton">
<?php

echo "<a href='premiumaccount.php'><img src='/images/premiumaccountbutton.GIF'></a>";

?>
</div>

<div id="visitforumbutton">
<a href="/forum" target="_blank"><img src='/images/visitforumbutton.GIF'></a>
</div>

	<div id="wooddisplay">
	<?php
	
	$sql = mysql_query("SELECT wood FROM resources WHERE userid='$uid' AND id='$cityview'");
	$wood = mysql_fetch_array($sql);
		echo $wood['wood'];
	
	?>
	</div>
	
	<div id="stonedisplay">
	<?php
	
	$sql = mysql_query("SELECT stone FROM resources WHERE userid='$uid' AND id='$cityview'");
	$stone = mysql_fetch_array($sql);
		echo $stone['stone'];
	
	?>
	</div>
	
	<div id="irondisplay">
	<?php
	
	$sql = mysql_query("SELECT iron FROM resources WHERE userid='$uid' AND id='$cityview'");
	$iron = mysql_fetch_array($sql);
		echo $iron['iron'];
	
	?>
	</div>
	
	<div id="fooddisplay">
	<?php
	
	$sql = mysql_query("SELECT food FROM resources WHERE userid='$uid' AND id='$cityview'");
	$food = mysql_fetch_array($sql);
		echo $food['food'];
	
	?>
	</div>
	
	<div id="peopledisplay">
	<?php
	
	$sql = mysql_query("SELECT people FROM resources WHERE userid='$uid' AND id='$cityview'");
	$people = mysql_fetch_array($sql);
		echo $people['people'];
	
	?>
	</div>
	
	<div id="golddisplay">
	<?php
	
	$sql = mysql_query("SELECT gold FROM resources WHERE userid='$uid' AND id='$cityview'");
	$gold = mysql_fetch_array($sql);
		echo $gold['gold'];
	
	?>
	</div>
	
	<div id="minfooddisplay">
	<?php
	
	$sql = mysql_query("SELECT minfood FROM resources WHERE userid='$uid' AND id='$cityview'");
	$minfood = mysql_fetch_array($sql);
		echo $minfood['minfood'];
	
	?>
	</div>
	
	<div id="happinessdisplay">
	<?php
	
	$sql = mysql_query("SELECT happiness FROM resources WHERE userid='$uid' AND id='$cityview'");
	$happiness = mysql_fetch_array($sql);
		echo $happiness['happiness'];
	
	?>
	</div>
	
	<div id="loyaltydisplay">
	<?php
	
	$sql = mysql_query("SELECT loyalty FROM resources WHERE userid='$uid' AND id='$cityview'");
	$loyalty = mysql_fetch_array($sql);
		echo $loyalty['loyalty'];
	
	?>
	</div>


<div id="logoroyal">
<?php

echo "Royal";

?>
</div>

<div id="logoempires">
<?php

echo "Empires";

?>
</div>

<div id="overviewbutton">
<?php

echo "<A href='overview.php'>Overview</a></big>";

?>
</div>


	
	<div id="wood">
	<?php
	echo "Wood";
	?>
	</div>

	<div id="stone">
	<?php
	echo "Stone";
	?>
	</div>

	
	<div id="iron">
	<?php
	echo "Iron";
	?>
	</div>
	
	
	<div id="food">
	<?php
	echo "Food";
	?>
	</div>
	
	
	<div id="people">
	<?php
	echo "People";
	?>
	</div>
	
	<div id="gold">
	<?php
	echo "Gold";
	?>
	</div>
	
	<div id="minfood">
	<?php
	echo "-Food";
	?>
	</div>
	
	<div id="happiness">
	<?php
	echo "Happiness";
	?>
	</div>
	
	<div id="loyalty">
	<?php
	echo "Loyalty";
	?>
	</div>
	

<div id="announcmentsbutton">
<?php

echo "<a href='announcments.php'><img src='/images/announcmensbutton.png'></a>";

?>
</div>

<div id="worldchatbutton">
<?php

echo "<a href='worldchat.php'><img src='/images/worldchatbutton.png'></a>";

?>
</div>

<div id="alliancechatbutton">
<?php

echo "<a href='alliancechat.php'><img src='/images/alliancechatbutton.png'></a>";

?>
</div>

<div id="questsbutton">
<?php

echo "<a href='quests.php'><img src='/images/quests.png'></a>";

?>
</div>
	


<div id="villageviewbutton">
<?php

echo "<A href='villageview.php'>Village View</a></big>";

?>
</div>

<div id="resourcebutton">
<?php

echo "<A href='resource.php'>Resource</a></big>";

?>
</div>

<div id="inboxbutton">
<?php

echo "<A href='inbox.php'>Inbox</a></big>";

?>
</div>

<div id="viewmapbutton">
<?php

echo "<A href='map.php'>View Map</a></big>";

?>
</div>

<div id="rankingsbutton">
<?php

echo "<A href='rankings.php'>Rankings</a></big>";

?>
</div>

<div id="notesbutton">
<?php

echo "<A href='notes.php'>Notes</a></big>";

?>
</div>

<div id="logoutbutton">
<?php

echo "<A href='logout.php'>Logout</a></big>";

?>
</div>

<div id="dateandtime">
<?php

$timezone_offset = -5;

$date = gmdate('D, M-d-Y H:i:s', time()+$timezone_offset*60*60);
echo $date

?>
</div>

<div id="copyright">
<?php

echo "© Copyright 2011 Royalempires.com";

?>
</div>

<div id="contactsupport">
<?php

echo "<A href='support.php'>Contact Support</a></big>";

?>
</div>
and here is the css document...oh and the chat one right after that:

Code: Select all

<?php
include_once 'maintemplate.php';
session_start();
?>

<?php

if(isset($_GET['logout'])){	
	
	//Simple exit message
	$fp = fopen("log.html", 'a');
	fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>");
	fclose($fp);
	
	session_destroy();
	header("Location: worldchat.php"); //Redirect the user
}

function loginForm(){
	echo'
	<div id="loginform">
	<form action="worldchat.php" method="post">
		<p>Please enter your name to continue:</p>
		<label for="name">Name:</label>
		<input type="text" name="name" id="name" />
		<input type="submit" name="enter" id="enter" value="Enter" />
	</form>
	</div>
	';
}

if(isset($_POST['enter'])){
	if($_POST['name'] != ""){
		$_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
	}
	else{
		echo '<span class="error">Please type in a name</span>';
	}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chat - Customer Module</title>
<link type="text/css" rel="stylesheet" href="maintemplate.css" />
</head>

<?php
if(!isset($_SESSION['name'])){
	loginForm();
}
else{
?>
<div id="wrapper">
	<div id="menu">
		<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
		<p class="logout"><a id="exit" href="#">Exit Chat</a></p>
		<div style="clear:both"></div>
	</div>	
	<div id="chatbox"><?php
	if(file_exists("log.html") && filesize("log.html") > 0){
		$handle = fopen("log.html", "r");
		$contents = fread($handle, filesize("log.html"));
		fclose($handle);
		
		echo $contents;
	}
	?></div>
	
	<form name="message" action="">
		<input name="usermsg" type="text" id="usermsg" size="63" />
		<input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
	</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
	//If user submits the form
	$("#submitmsg").click(function(){	
		var clientmsg = $("#usermsg").val();
		$.post("post.php", {text: clientmsg});				
		$("#usermsg").attr("value", "");
		return false;
	});
	
	//Load the file containing the chat log
	function loadLog(){		
		var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
		$.ajax({
			url: "log.html",
			cache: false,
			success: function(html){		
				$("#chatbox").html(html); //Insert chat log into the #chatbox div				
				var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
				if(newscrollHeight > oldscrollHeight){
					$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
				}				
		  	},
		});
	}
	setInterval (loadLog, 2500);	//Reload file every 2.5 seconds
	
	//If user wants to end session
	$("#exit").click(function(){
		var exit = confirm("Are you sure you want to end the session?");
		if(exit==true){window.location = 'villageview.php';}		
	});
});
</script>
<?php
}
?>
</body>
</html>
and css now:

Code: Select all

    body {
       background-color: #FFCC66;
       
    }
    #backgroundpic {
       position:absolute;
       left:70px;
       top:20px;
       width:150px;
       height:150px;
       z-index:1;
    }

    #townview {
       position:absolute;
       left:259px;
       top:198px;
       width:600px;
       height:400px;
       z-index:2;
    }

    #logoroyal {
       position:absolute;
       left:341px;
       top:30px;
       width:150px;
       height:70px;
       z-index:2;
       font-family: QuigleyWiggly;
       font-size: 60px;
    }

    #logoempires {
       position:absolute;
       left:531px;
       top:30px;
       width:150px;
       height:70px;
       z-index:2;
       font-family: QuigleyWiggly;
       font-size: 60px;
    }

    #premiumaccountbutton {
       position:absolute;
       left:78px;
       top:26px;
       width:150px;
       height:80px;
       z-index:3;
    }

    #visitforumbutton {
       position:absolute;
       left:820px;
       top:26px;
       width:150px;
       height:80px;
       z-index:3;
    }

    #currentcityword {
       position:absolute;
       left:87px;
       top:165px;
       width:400px;
       height:40px;
       z-index:2;
    }

    #cities {
       position:absolute;
       left:190px;
       top:165px;
       width:400px;
       height:40px;
       z-index:2;
    }

    #defaultselect {
       position:absolute;
       left:278px;
       top:162px;
       width:400px;
       height:40px;
       z-index:3;
    }

    #wood {
       position:absolute;
       left:92px;
       top:122px;
       width:30px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #stone {
       position:absolute;
       left:197px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #iron {
       position:absolute;
       left:295px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #food {
       position:absolute;
       left:384px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #people {
       position:absolute;
       left:481px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #gold {
       position:absolute;
       left:575px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #minfood {
       position:absolute;
       left:665px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #happiness {
       position:absolute;
       left:758px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #loyalty {
       position:absolute;
       left:860px;
       top:122px;
       width:50px;
       height:20px;
       z-index:2;
       color: blue;
    }

    #wooddisplay {
       position:absolute;
       left:137px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #stonedisplay {
       position:absolute;
       left:237px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #irondisplay {
       position:absolute;
       left:327px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #fooddisplay {
       position:absolute;
       left:425px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #peopledisplay {
       position:absolute;
       left:526px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #golddisplay {
       position:absolute;
       left:610px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #minfooddisplay {
       position:absolute;
       left:710px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #happinessdisplay {
       position:absolute;
       left:826px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #loyaltydisplay {
       position:absolute;
       left:910px;
       top:122px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #announcmentsbutton {
       position:absolute;
       left:508px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #worldchatbutton {
       position:absolute;
       left:622px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #alliancechatbutton {
       position:absolute;
       left:734px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #questsbutton {
       position:absolute;
       left:847px;
       top:157px;
       width:50px;
       height:20px;
       z-index:3;
    }

    #overviewbutton {
       position:absolute;
       left:135px;
       top:235px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #villageviewbutton {
       position:absolute;
       left:135px;
       top:265px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #resourcebutton {
       position:absolute;
       left:135px;
       top:295px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #inboxbutton {
       position:absolute;
       left:135px;
       top:325px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #viewmapbutton {
       position:absolute;
       left:135px;
       top:355px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #rankingsbutton {
       position:absolute;
       left:135px;
       top:385px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #notesbutton {
       position:absolute;
       left:135px;
       top:415px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #Logoutbutton {
       position:absolute;
       left:135px;
       top:445px;
       width:150px;
       height:50px;
       z-index:2;
    }

    #tag1{
             position:absolute;
             left:317px;
             top:260px;
                width:28px;
                height:36px;
             z-index:5;
             }

    #tag2{
             position:absolute;
             left:500px;
             top:350px;
                width:75px;
                height:75px;
             z-index:5;
             }
             
    #tag3{
             position:absolute;
             left:500px;
             top:450px;
                width:75px;
                height:75px;
             z-index:5;
             }
             
    #tag4{
             position:absolute;
             left:750px;
             top:450px;
                width:28px;
                height:36px;
             z-index:5;
             }
             
    #dateandtime {
       position:absolute;
       left:184px;
       top:609px;
       width:250px;
       height:35px;
       z-index:2;
       font-size: 11px;
       font-weight: 500;
    }

    #copyright {
       position:absolute;
       left:423px;
       top:608px;
       width:250px;
       height:35px;
       z-index:2;
       font-size: 11px;
       font-weight: 800;
    }

    #contactsupport {
       position:absolute;
       left:744px;
       top:608px;
       width:250px;
       height:35px;
       z-index:2;
       font-size: 11px;
       font-weight: 500;
    }


/* Google CSS Document */
#wrapper, #loginform {
   margin:0 auto;
   padding-bottom:25px;
   background:#EBF4FB;
   width:504px;
   border:1px solid #ACD8F0; 
   z-index:7;}

#loginform { padding-top:18px; 
z-index:7;}

   #loginform p { margin: 5px; 
   z-index:7;}

#chatbox {
   text-align:left;
   margin:0 auto;
   margin-bottom:25px;
   padding:10px;
   background:#fff;
   height:270px;
   width:430px;
   border:1px solid #ACD8F0;
   overflow:auto; 
   z-index:7;}

#usermsg {
   width:395px;
   border:1px solid #ACD8F0;
z-index:7;   }

#submit { width: 60px; 
z-index:7;}

.error { color: #ff0000; 
z-index:7;}

#menu { padding:12.5px 25px 12.5px 25px; 
z-index:7;}

.welcome { float:left; 
z-index:7;}

.logout { float:right; 
z-index:7;}

.msgln { margin:0 0 2px 0; 
z-index:7;}

EDIT:

woops i forgot to add the SS. here it is:

http://i820.photobucket.com/albums/zz12 ... dffdsa.png
Thanks,

Slav2
Top
User avatar
Slav2
Posts: 96
Joined: Tue Jan 11, 2011 7:46 am

Re: help needed combining two CSS doc pls

Post by Slav2 »

pls someone....
Thanks,

Slav2
Top
User avatar
Slav2
Posts: 96
Joined: Tue Jan 11, 2011 7:46 am

Re: help needed combining two CSS doc pls

Post by Slav2 »

nvm guys...i have deleted the chat and decided to just add it latr on...
Thanks,

Slav2
Top
Post Reply

Return to “Advanced Help and Support”