3 Replies - 932 Views - Last Post: 11 March 2013 - 10:57 PM

#1 Darkranger85  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 148
  • Joined: 31-August 12

Pages not displaying the same.

Posted 11 March 2013 - 07:40 PM

Hey all,

I just revamped my website project to use a really cool drop down navigation bar and it looks almost perfect on the index.php.

However there are two issues.

One, when I hit the dropdown on the end, it disappears at the edge of the container instead of extending over it.

Posted Image

The other problem is that now my other pages all have scroll bars and such in them when before they were fine. I don't understand Why my nav bar would effect the other pages but look great on the homepage when they are all using the exact same sheets and such.

Posted Image

Here are the css sheets, in the order they are listed on the page.

primary.css
/*Workarounds*/

header, footer, article, aside, section, nav{
	display: block;
}

input:focus, textarea:focus, select:focus{
	outline: none;
}
/*Structure Base*/
body{
	background: url('../images/background1.jpg') no-repeat top center fixed;
	font: normal 15px Arial, Helvetica, sans-serif;		
}

#container {
	width: 960px;
	margin: 0 auto;
	border: 1px solid #000;
	border-radius: 4px;
	background-color: #808080;
	color: #000;
	overflow: auto;
}

#header{
	width: 960px;
}

#leftcol{
	float: left;
	width: 240px;
}

#centercol{
	float: left;
	width: 685px;
	text-align: justify;
	padding: 10px;
}

#rightcol{
	float: left;
	width: 245px;
}

#footer{
	width: 960px;
	height: 35px;
	text-align: center;
	padding-bottom: 5px;
	overflow: hidden;		
}
/*END Structure Base*/

/*Header related*/

/*END Header related*/

/*Navigation Related*/
nav ul{
	list-style: none;
    text-align: center;
}
/*END Navigation Related*/

/*Center Related*/
input{
	border: 2px solid #000;
	background-color: #000;
	color: #fff;
}
/*END Center related*/

/*Right Column related*/

/*End Right Column related*/

/*Footer related*/

/*END Footer related*/

/*General Changes*/
hr{
	width: 30%;
	border-color: #000;
}

.font8{
	color: maroon;
	font-size: medium;
	margin-left: 85px;	
}



modules.css

.register_split {
    width: 240;
    margin-left: 40px;
    float: left;
}

.module {
	border: 1px solid #000;
	border-radius: 4px;
	background-color: #669999;
	padding: 5px;
	margin-bottom: 15px;
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 2px;
}

.module h1 {
	margin: 0 0 10px 0;
    padding: 0 5px;
    font-weight: normal;
    font-size: 20px;    
    border-bottom: 1px solid #000;
}

.module h2 {
	margin: 0 0 10px 0;
    padding: 0 5px;
    font-weight: normal;
    font-size: 20px;    
    border-bottom: 1px solid #003333;
}

.module h3 {
	margin: 0 0 5px 0;
    padding: 0 5px;
    font-weight: normal;
    font-size: 15px;    
    border-top: 1px solid #003333;
}

.module ul {
	padding-left: 0px;
	margin-left: 0px;
}

.module ul li {
	padding-left: 0px;
	margin-left: 0px;
	text-align: left;
	list-style: none;
}

.module .inner {
    margin:0 10px;
}

.module input, select, option, select{
	border: 1px solid #fff;
	border-radius: 3px;
	background-color: #000;
	color: #fff;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

.module input, label, select{
	margin-bottom: 5px;
	margin-left: 5px;
}

.msg_module {
	border: 1px solid #000;
	border-radius: 4px;
	background-color: #669999;
	padding: 5px;
	padding-bottom: 1px;
	margin-bottom: 15px;
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 2px;
}

.msg_module h1 {
	margin: 0 0 10px 0;
    padding: 0 5px;
    font-weight: normal;
    font-size: 20px;    
    border-bottom: 1px solid #000;
}

.msg_module h2 {
	margin: 0 0 10px 0;
    padding: 0 5px;
    font-weight: normal;
    font-size: 20px;    
    border-bottom: 1px solid #000;
}

.msg_module h3 {
	margin: 0 0 5px 0;
    padding: 0 5px;
    font-weight: normal;
    font-size: 15px;    
    border-top: 1px solid #003333;
}

.msg_module ul {
	padding-left: 0px;
	margin-left: 0px;
}

.msg_module ul li {
	padding-left: 0px;
	margin-left: 0px;
	text-align: left;
	list-style: none;
}

.msg_module .inner {
    margin:0 10px;
}

.msg_module input, label, select{
	margin-bottom: 5px;
	margin-left: 5px;
}
.clear {
	clear: left;
}

#password_submit {
	margin-top: 5px; 	
}



navbar.css

body, ul, li {
	font-size:14px; 
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	text-align:left;
}

/* Navigation Bar */

#navbar {
	list-style:none;
	width:918px;
	margin:30px auto 0px auto;
	height:43px;
	padding:0px 20px 0px 20px;

	/* Background color and gradients */
	
	background: #014464;
	background: -moz-linear-gradient(top, #0272a7, #013953);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
	
	/* Borders */
	
	border: 1px solid #002232;

	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
	box-shadow:inset 0px 0px 1px #edf9ff;
}

#navbar li {
	float:left;
	text-align:center;
	position:relative;
	padding: 4px 10px 4px 10px;
	margin-right:30px;
	margin-top:7px;
	border:none;
}

#navbar li:hover {
	border: 1px solid #777777;
	padding: 4px 9px 4px 9px;
	
	/* Background color and gradients */
	
	background: #F4F4F4;
	background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
	
	/* Rounded corners */
	
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

#navbar #rounded:hover{
		border: 1px solid #777777;
	padding: 4px 9px 4px 9px;
	
	/* Background color and gradients */
	
	background: #F4F4F4;
	background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
	
	/* Rounded corners */
	
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}

#navbar li a {
	font-size: 14px; 
	color: #EEEEEE;
	display: block;
	outline: 0;
	text-decoration: none;
	text-shadow: 1px 1px 1px #000;
}

#navbar li:hover a {
	color:#161616;
	text-shadow: 1px 1px 1px #FFFFFF;
}
#navbar li .drop {
	padding-right:21px;
	background:url("../images/clips/drop.png") no-repeat right 8px;
}
#navbar li:hover .drop {
	background:url("../images/clips/up.bmp") no-repeat right 7px;
}

#navbar textarea, input{
	resize: none;
}


/* Drop Down */

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
	margin: 4px auto;
	float: left;
	position: absolute;
	left:-999em; /* Hides the drop down */
	text-align: left;
	padding: 10px 5px 10px 5px;
	border: 1px solid #777777;
	border-top: none;
	
	/* Gradient background */
	background: #F4F4F4;
	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

	/* Rounded Corners */
	-moz-border-radius: 0px 5px 5px 5px;
	-webkit-border-radius: 0px 5px 5px 5px;
	border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#navbar li:hover .dropdown_1column, 
#navbar li:hover .dropdown_2columns, 
#navbar li:hover .dropdown_3columns,
#navbar li:hover .dropdown_4columns,
#navbar li:hover .dropdown_5columns {
	left: -1px;
    top: auto;
}

/* Columns */

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
	display: inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}
.col_1 {width: 130px;}
.col_2 {width: 270px;}
.col_3 {width: 410px;}
.col_4 {width: 550px;}
.col_5 {width: 690px;}

/* Right alignment */

#navbar .menu_right {
	float: right;
	margin-right: 0px;
}
#navbar li .align_right {
	/* Rounded Corners */
	-moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#navbar li:hover .align_right {
	left: auto;
	right: -1px;
	top: auto;
}

/* Drop Down Content Stylings */

#navbar p, #navbar h2, #navbar h3, #navbar ul li {
	line-height: 21px;
	font-size: 12px;
	text-align: left;
	text-shadow: 1px 1px 1px #FFFFFF;
}
#navbar h2 {
	font-size: 21px;
	font-weight: 400;
	letter-spacing: -1px;
	margin: 7px 0 14px 0;
	padding-bottom: 3px;
	border-bottom: 1px solid #666666;
}
#navbar h3 {
	font-size: 14px;
	margin: 7px 0 14px 0;
	padding-bottom: 3px;
	border-bottom: 1px solid #888888;
}

#navbar p {
	line-height: 18px;
	margin: 0 0 10px 0;
}

#navbar li:hover div a {
	font-size: 12px;
	/*color: #015b86;*/
	color: #03520C;
}
#navbar li:hover div a:hover {
	/*color: #029feb;*/
	color: #07AD1A;
}
.strong {
	font-weight: bold;
}
.italic {
	font-style: italic;
}
.imgshadow {
	background: #FFFFFF;
	padding: 4px;
	border: 1px solid #777777;
	margin-top: 5px;
	-moz-box-shadow: 0px 0px 5px #666666;
	-webkit-box-shadow: 0px 0px 5px #666666;
	box-shadow: 0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
	width: auto;
	float: left;
	margin: 5px 15px 5px 5px;
}
#navbar li .black_box {
	background-color: #333333;
	color: #eeeeee;
	text-shadow: 1px 1px 1px #000;
	padding: 4px 6px 4px 6px;

	/* Rounded Corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	/* Shadow */
	-webkit-box-shadow: inset 0 0 3px #000000;
	-moz-box-shadow: inset 0 0 3px #000000;
	box-shadow: inset 0 0 3px #000000;
}
#navbar li ul {
	list-style: none;
	padding: 0;
	margin: 0 0 12px 0;
}
#navbar li ul li {
	font-size: 12px;
	line-height: 24px;
	position: relative;
	text-shadow: 1px 1px 1px #ffffff;
	padding: 0;
	margin: 0;
	float: none;
	text-align: left;
	width: 130px;
}
#navbar li ul li:hover {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
}
#navbar li .greybox li {
	background: #F4F4F4;
	border: 1px solid #bbbbbb;
	margin: 0px 0px 4px 0px;
	padding: 4px 6px 4px 6px;
	width: 116px;

	/* Rounded Corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
#navbar li .greybox li:hover {
	background: #ffffff;
	border: 1px solid #aaaaaa;
	padding: 4px 6px 4px 6px;
	margin: 0px 0px 4px 0px;
}



Now, here is the index. I apologize for it looking kind of messy. That's because of how parts of it are included using php includes.

<!DOCTYPE HTML>
<html lang="en">
	<head>
	<title>Planet Ruin</title>
	<link href="css/primary.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/modules.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/navbar.css" rel="stylesheet" type="text/css" media="screen" />	<meta charset="UTF-8" />
</head>	
	<body>
		<section id="container">
			
	<header id="header">
				
</header>			
		
	<nav id="verticalbar">
	<ul id="navbar">
		<li id="rounded">
			<a href="index.php">Home</a>
		</li>
		<li>
			<a href="index.php" class="drop">Login</a>
<div class="dropdown_2columns">
	<div class="col_2">
		<h2>Login / Register</h2>
		<form id="login" class="form" action="login.php" method="post">
	   	    	   	    
	       	<label for="user">Username:</label><br />
	       	<input id="user" name="username" type="text" maxlength="30" /><br />
	                        
	       	<label for="pass">Password:</label><br />
	       	<input id="pass" name="password" type="password" maxlength="40" /><br />
	       	<input id="submit" name="submit" type="submit" value="Login" />
	        
	       	<a href="register.php">Register</a>		    
		</form>
		<h3>Recover Login Information</h3>
			 <a href="recover.php?mode=username">Username</a>
			 <a href="recover.php?mode=password">Password</a></p>	
	</div>
</div>





		</li>
		<li>
			<a href="#" class="drop">Community</a>
			<div class="dropdown_2columns">
				<div class="col_2">
					<ul>
						<h3>Planet of Ruins Community</h3>
						<li><a href="#">Forums</a></li>
						<p>Come be a part of the community! Talk to your fellow warlords and help improve the game as a whole!</p>
						<li><a href="#">Dev-Blog</a></li>
						<p>See what's going on with the Devs of Planet of Ruins and what things you can expect to see coming up.</p>
						<li><a href="#">Official Wiki</a></li>
						<p>Learn from others and contribute your own knowledge to the pile.</p>
						<li><a href="#">The Drawing Board</a></li>
						<p>Find out what the plans for the game as a whole are and perhaps have a say in improving it!</p>
					</ul>
				</div>
			</div>
		</li>
		<li>
			<a href="#" class="drop">Chronicals</a>
			<div class="dropdown_1column">
				<div class="col_1">
					<ul>
						<h3>Stories</h3>
						<li><a href="#">Official</a></li>
						<p>Short stories produced by the game developers. These are considered 'cannon' to the games storyline.</p>
						<li><a href="#">Fan Submitions</a></li>
						<p>Stories in this section are written by players and while they may be very good, are not considered a part of the 
							official storyline.</p>
						<li><a href="#">Novels</a></li>
						<p>This game is based around a series of books that I have yet to write. If they ever become a reality, this is where
							more information may be found.</p>				
					</ul>
				</div>
			</div>
		</li>
		<li>
			<a href="#" class="drop">Resources</a>
			<div class="dropdown_1column">
				<div class="col_1">
					<ul>
						<h3>FAQs</h3>
						<li><a href="#" target="_blank">FAQ's</a></li>
						<p>A section dedicated to the miriad of questions related to the game.</p>
						<p>If you have suggestions for things that should be included please put your suggestion in the forums.</p>
					</ul>
				</div>
			</div>
		</li>
		<li>
			<a href="#" class="drop">About</a>
			<div class="dropdown_1column">
				<div class="col_1">
					<ul>
						<h3>About Us</h3>
						<li><a href="#">About The Game</a></li>
						<p>Learn about the game as a whole and what you can expect from your gaming experience!</p>
						<li><a href="#">About The Devs</a></li>
						<p>Learn about the people developing the game and their history!</p>
					</ul>
				</div>
			</div>
		</li>
		<li>
			<a href="#" class="drop">Contact Me</a>
			<div class="dropdown_2columns">
				<div class="col_2">
					<form>
						<label for="name">Name:</label><br />
						<input name="name" id="name" type="text" maxlength="40" /><br />
						
						<label for="email">Email:</label><br />
						<input name="email" id="email" type="email" maxlength="50" /><br />
						
						<label for="email2">Confirm Email:</label><br />
						<input name="email2" id="email2" type="email" maxlength="50" /><br />
						
						<label for="message">Message:</label><br />
						<textarea name="message" id="message" rows="7" cols="25"></textarea><br />
						<input type="submit" value="Send" />
					</form>
				</div>
			</div>
		</li>
	</ul>
</nav>			
		<article id="centercol"><h1>Back Story. . .</h1>		    
				
<p>Long ago, this was a land of exceeding beauty and prosperity, where people lived in peace and harmony.</p>
				
<p>Those days are gone; erased by the horific war which broke out between the United Colonial Federation and the Dalmarian Kingdoms.</p>
				    
<p>Our lush planet, Calimbria, came to be occupied by the Dalmarian Army, and was summarily stripped of all of its resources. Our people were 
	pressed into hard labor to supply for a war we Calimbrians had nothing to do with.</p>
				
<p>In time, Calimbria was freed from its oppression. However by that time, our planet lay in waste.</p>

<p>Ruined cities were all that was left of once prosperous metropolises; fallow fields where once productive farmlands had bloomed.</p>

<p>The treaty that ended the war also stranded Calimbria in the middle of a Neutral Zone, without hope of relief.</p>

<p>Now, Calimbria is known as "The Planet of Ruins." A world where war is the only assured fact of life. Warlords squabble over supplies and land. 
	Fanatics fight to "unite" the land in the name of "peace." Even the well meaning and most noble leaders must battle to protect and feed their 
	people.</p>
	
<p>Perhaps, one day, the fortunes of this dried and barren planet will change. Perhaps, the citizens of Calimbria will live again in peace, in 
	houses instead of hovels; the cities abuzz with prosperity, and the lands yielding once more their rich rewards.</p>

<p>Or, perhaps these poor battered souls will be united only to be ruled by one with cruelty in his heart and a knife in his hand. Perhaps they will be forced to
	yet again toil the land for a master that cares not for the plight of his people.</p>

<p>And perhaps the person who makes that happen is . . . you.</p>

		</article>
			
		<aside id="rightcol">

</aside>			
	
		<footer id="footer">
	<hr />
&copy; Mythril Games 2013 All Rights Reserved				
</footer>	
			
		</section>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/formcontrol.inc.js"></script>
<script type="text/javascript" src="js/init.js"></script>	
	</body>	
</html>



And here is register.php. This is just for an example because other pages are having the same problem with the scroll bars.

register.php

<!DOCTYPE HTML>
<html lang="en">
	<head>
	<title>Planet Ruin</title>
	<link href="css/primary.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/modules.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/navbar.css" rel="stylesheet" type="text/css" media="screen" />	<meta charset="UTF-8" />
</head>	
	<body>
		<section id="container">
			
	<header id="header">
				
</header>			
		
	<nav id="verticalbar">
	<ul id="navbar">
		<li id="rounded">
			<a href="index.php">Home</a>
		</li>
		<li>
			<a href="index.php" class="drop">Login</a>
<div class="dropdown_2columns">
	<div class="col_2">
		<h2>Login / Register</h2>
		<form id="login" class="form" action="login.php" method="post">
	   	    	   	    
	       	<label for="user">Username:</label><br />
	       	<input id="user" name="username" type="text" maxlength="30" /><br />
	                        
	       	<label for="pass">Password:</label><br />
	       	<input id="pass" name="password" type="password" maxlength="40" /><br />
	       	<input id="submit" name="submit" type="submit" value="Login" />
	        
	       	<a href="register.php">Register</a>		    
		</form>
		<h3>Recover Login Information</h3>
			 <a href="recover.php?mode=username">Username</a>
			 <a href="recover.php?mode=password">Password</a></p>	
	</div>
</div>





		</li>
		<li>
			<a href="#" class="drop">Community</a>
			<div class="dropdown_2columns">
				<div class="col_2">
					<ul>
						<h3>Planet of Ruins Community</h3>
						<li><a href="#">Forums</a></li>
						<p>Come be a part of the community! Talk to your fellow warlords and help improve the game as a whole!</p>
						<li><a href="#">Dev-Blog</a></li>
						<p>See what's going on with the Devs of Planet of Ruins and what things you can expect to see coming up.</p>
						<li><a href="#">Official Wiki</a></li>
						<p>Learn from others and contribute your own knowledge to the pile.</p>
						<li><a href="#">The Drawing Board</a></li>
						<p>Find out what the plans for the game as a whole are and perhaps have a say in improving it!</p>
					</ul>
				</div>
			</div>
		</li>
		<li>
			<a href="#" class="drop">Chronicals</a>
			<div class="dropdown_1column">
				<div class="col_1">
					<ul>
						<h3>Stories</h3>
						<li><a href="#">Official</a></li>
						<p>Short stories produced by the game developers. These are considered 'cannon' to the games storyline.</p>
						<li><a href="#">Fan Submitions</a></li>
						<p>Stories in this section are written by players and while they may be very good, are not considered a part of the 
							official storyline.</p>
						<li><a href="#">Novels</a></li>
						<p>This game is based around a series of books that I have yet to write. If they ever become a reality, this is where
							more information may be found.</p>				
					</ul>
				</div>
			</div>
		</li>
		<li>
			<a href="#" class="drop">Resources</a>
			<div class="dropdown_1column">
				<div class="col_1">
					<ul>
						<h3>FAQs</h3>
						<li><a href="#" target="_blank">FAQ's</a></li>
						<p>A section dedicated to the miriad of questions related to the game.</p>
						<p>If you have suggestions for things that should be included please put your suggestion in the forums.</p>
					</ul>
				</div>
			</div>
		</li>
		<li>
			<a href="#" class="drop">About</a>
			<div class="dropdown_1column">
				<div class="col_1">
					<ul>
						<h3>About Us</h3>
						<li><a href="#">About The Game</a></li>
						<p>Learn about the game as a whole and what you can expect from your gaming experience!</p>
						<li><a href="#">About The Devs</a></li>
						<p>Learn about the people developing the game and their history!</p>
					</ul>
				</div>
			</div>
		</li>
		<li>
			<a href="#" class="drop">Contact Me</a>
			<div class="dropdown_2columns">
				<div class="col_2">
					<form>
						<label for="name">Name:</label><br />
						<input name="name" id="name" type="text" maxlength="40" /><br />
						
						<label for="email">Email:</label><br />
						<input name="email" id="email" type="email" maxlength="50" /><br />
						
						<label for="email2">Confirm Email:</label><br />
						<input name="email2" id="email2" type="email" maxlength="50" /><br />
						
						<label for="message">Message:</label><br />
						<textarea name="message" id="message" rows="7" cols="25"></textarea><br />
						<input type="submit" value="Send" />
					</form>
				</div>
			</div>
		</li>
	</ul>
</nav>			
		<article id="centercol">	<div class="module">
		<h1>Register your Empire<span class="font8">All fields are required*</span></h1>
		<form id="regform" class="form" name="regform" action="" method="post">
			<div class="register_split">
							
				<label for="user">Username:</label><br />
				<input id="user" name="username" type="text" maxlength="30" /><br />
							
				<label for="pass1">Password:</label><br />
				<input id="pass1" name="password" type="password" maxlength="40" /><br />
							
				<label for="pass2">Re-Enter Password:</label><br />
				<input id="pass2" name="password2" type="password" maxlength="40" /><br />
							
				<label for="email1">Enter Email:</label><br />
				<input id="email1" name="email" type="text" maxlength="50" /><br />
							
				<label for="email2">Re-Enter Email:</label><br />
				<input id="email2" name="email2" type="text" maxlength="50" /><br />
							
				<label for="botcheck">What is 5 plus five?</label><br />
				<input id="botcheck" name="botcheck" type="text" maxlength="4" /><br />
				
				<input type="submit" value="Register" />
			</div>
						
			<div class="register_split">
				
				<label for="secret">Secret Word:</label><br />
				<input id="secret" name="secret" type="text" maxlength="40" /><br />
				
				<label for="secret_hint">Secret Word Hint:</label><br />
				<input id="secret_hint" name="secret_hint" type="text" maxlength="50" /><br />		
							
				<label for="empire_name">Empire Name:</label><br />
				<input id="empire_name" name="empire_name" type="text" maxlength="40" /><br />
							
				<label for="ruler_name">Ruler Name:</label><br />
				<input id="ruler_name" name="ruler_name" type="text" maxlength="40" /><br />
						
				<label for="founding_group">Founding Group:</label><br />
				<select id="founding_group" name="founding_group">
				<option>-Select-</option>
				<option>Masonry Guild</option>
				<option>Civilian Militia</option>
				<option>Military Remnants</option>
		 		<option>Political Survivors</option>
				</select><br />
							
				<label for="government">Government Type:</label><br />
				<select id="government" name="government">
				<option>-Select-</option>
				<option>Tyrany</option>
				<option>Monarchy</option>
				</select><br />
			</div>				
		</form>
		<div class="clear"></div>			
	</div>
		</article>
			
		<aside id="rightcol">

</aside>			
	
		<footer id="footer">
	<hr />
&copy; Mythril Games 2013 All Rights Reserved				
</footer>	
			
		</section>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/formcontrol.inc.js"></script>
<script type="text/javascript" src="js/init.js"></script>	
	</body>	
</html>



You can make me work for my answer if you like, but please keep in mind that CSS is still my weak point. Thanks guys!

Is This A Good Question/Topic? 0
  • +

Replies To: Pages not displaying the same.

#2 Takk  Icon User is offline

  • D.I.C Head

Reputation: 40
  • View blog
  • Posts: 111
  • Joined: 08-March 13

Re: Pages not displaying the same.

Posted 11 March 2013 - 08:42 PM

hah it's hard to make you work for this one, a hint will pretty much give it away, it's looking good though, check out the overflow property for your container :)/>

This post has been edited by Takk: 11 March 2013 - 08:51 PM

Was This Post Helpful? 1
  • +
  • -

#3 Darkranger85  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 148
  • Joined: 31-August 12

Re: Pages not displaying the same.

Posted 11 March 2013 - 08:56 PM

Ah, nice.

I was focused on the navbar itself since it was the only thing I changed.

Thanks though! Helped me out a ton!

I'm very happy with how the site is looking overall. I can't wait to get into the guts of the game itself.

Tomorrow I should be done with the little remainders of the login/registration system and I can start building my first page inside the game.
Was This Post Helpful? 0
  • +
  • -

#4 Takk  Icon User is offline

  • D.I.C Head

Reputation: 40
  • View blog
  • Posts: 111
  • Joined: 08-March 13

Re: Pages not displaying the same.

Posted 11 March 2013 - 10:57 PM

No worries, css is for the most part pretty straight forward if you take it a step at the time, float's tend to do freaky things to me too, the change just happened to fix that also. CSS3 fixxed this for us too though actually with div columns and column breaks :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1