A
Anonymous
Guest
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.
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:
<!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>