Problem with CSS styling after adding HEADER

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: egami, macek, gesf

Post Reply
newphpuser
New php-forum User
New php-forum User
Posts: 74
Joined: Wed Feb 04, 2015 8:40 am

Thu Mar 26, 2015 10:17 am

I've got a small problem with HTML.

My webpage was working perfectly --- the styling, the navigation panel, and the footer.

Then, yesterday, I added a HEADER to the top of the page. And it screwed up my styling.

For some reason, the <ARTICLE> got pushed down to the bottom of the page (below the Navigation Panel) !!

My Navigation Panel is positioned vertically, to the LEFT of the page.

In other words, the ARTICLE is now positioned in "relation" to the Navigation Panel.

And this only happened after I added a Header to the top of the page.

I've tried everything I can to fix this, but nothing works

Craziest thing : I know that the solution to this problem is something very minor! I just cant put my finger on it.

Code: Select all

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="mystyles.css">
		<title>my webpage</title>
		
		<style type="text/css">
			html, body, article, footer, nav {
			margin:0;
			padding:0;
			border:0;
			outline:0;
			font-size:100%;
			vertical-align:baseline;
			background:transparent;
			}
			body { line-height:1; }
			article,footer,nav { display:block; }
			nav ul { list-style:none; }
			</style>
		
		<meta name="description" content="">
		<meta name="keywords" content="">
	
		<style type="text/css">
			html { color: black; background-color: white; font-family: sans-serif; }
			body { width: 1350px; height:685px; margin: 0 auto 0 auto; padding:0px; 
					background-color: white;}		
			nav { top:0; left:0; z-index:auto; height:400px; width: 300px; 
					display: table; background-color: yellow;}
			article { padding-left:300px; top:0; width: 1050px; display: table; background-color: white;} 
	     </style>
		
	</head>
<body>
	
<div id="header1">
<header>
<img src="/MY_GAME/Images/logo.gif"/>
</header>
</div>

		<nav>
			<ul style="list-style: none">
				<h3>Main Menu</h3>
				<li><b>About MY_GAME</b></li>
			    <ul style="list-style: none">
	  	 	    	<dt>
	  	 	    	<li><a href="#so_what_is_MY_GAME">So, what exactly is MY_GAME</a></li>
	  	 	    	<br>
	  	 	    	<li><a href="#what_makes_MY_GAME_different">What makes MY_GAME any different?</a></li>
	  	 	    	<br>
	  	 	    	<li><a href="/MY_GAME/HTML/about_MY_GAME_3.html#origin_of_MY_GAME">The origin of MY_GAME : how it all began</a></li>
	  	 	    	</dt>
  	 	   		</ul>
  	 	   		<br>
  	 	   	<li><a href="/MY_GAME/HTML/how_to_play_MY_GAME_1.html" target="_blank">How to Play MY_GAME</a></li>
				<br>
				<li><a href="/MY_GAME/HTML/FAQ.html" target="_blank">FAQ</a></li>
				<br>
			</ul>
			<br>
			<ul style="list-style: none">
				<li><a href="/MY_GAME/PHP/login.php">Already a user? Log in here</a></li>
				<br>
				<li><a href="/MY_GAME/PHP/index.php">New user? Register here</a></li>
			</ul>
		</nav>
		
	<article>
		  <h1 style="color:blue; text-align:center; font:verdana; font-size:250%"><b><i><u>About MY_GAME</u></i></b></h1>
  	 	   <h3><a name="so_what_is_MY_GAME"></a>So, what exactly is MY_GAME ?</h3>
	   		<dd>
	   			<p>Simply put, "MY_GAME" Is an online game, designed designed to be fun..</p>
<p>Simply put, "MY_GAME" Is an online game, designed designed to be fun..</p>
<p>Simply put, "MY_GAME" Is an online game, designed designed to be fun..</p>
<p>Simply put, "MY_GAME" Is an online game, designed designed to be fun..</p>
<p>Simply put, "MY_GAME" Is an online game, designed designed to be fun..</p>
<p>Simply put, "MY_GAME" Is an online game, designed designed to be fun..</p>
<p>Simply put, "MY_GAME" Is an online game, designed designed to be fun..</p>
</dd>
			<br>
			
			<br>
				<p style="font-style:bold; font-size:180%; text-align:center"><a href="/MY_GAME/HTML/about_MY_GAME_2.html">Next</a></p>
	</article>
	
<div id="footer1">
	<footer>
		<ul style="float:right; margin-right:15px; list-style: none">
  			<li><b>Follow us on :</b></li>
  			<li><img src="/MY_GAME/Images/facebook.jpg"/><b><a href="https://www.facebook.com/" target="_blank"><font color="blue">Facebook</a></b></li>
        	<li><img src="http://localhost/MY_GAME/Images/twitter.jpg"/><b><a href="https://twitter.com/" target="_blank"><font color="blue">Twitter</a></b></li>
        	<li><img src="http://localhost/MY_GAME/Images/linkedin.jpg"/><b><a href="fi.linkedin.com/pub/en" target="_blank"><font color="blue">LinkedIn</a></b></li>
		</ul>
	</footer> 
</div>  
</body> 
</html>



User avatar
WebOutGateway
New php-forum User
New php-forum User
Posts: 65
Joined: Mon Jun 13, 2011 9:25 pm
Location: Pasig City, Philippines
Contact:

Mon May 25, 2015 1:25 am

I suggest you to use a web developer tool either Firebug in Mozilla it would help you a lot by managing your website.
To solve your problem you must adjust the margins check it out and be patient for what your doing.

I hope you solve this issue and follow my advice. :)

Post Reply