No replies
Craigsan
Craigsan's picture
Offline
newbie
Last seen: 8 years 13 weeks ago
Timezone: GMT+1
Joined: 2012-05-09
Posts: 1
Points: 2

I'm new to CSS and HTML and I have been learning some new ways of laying out my code however I'm having problems. This may be a big job but I was wondering if someone had an insight into how to fix it. Basically the resolution of my site isn't fixed, whenever I re-size the browser the website squishes down to fill that box. I basically want it to remain a constant auto length resolution so even when I re-size it a scroll bar appears both vertically and horizontally.

<Html>	
	<header>
			<title>Ageoldgames.com</title>
			<link href="csssheet.css" rel="stylesheet" type="text/css" />
	</header>
 
		<div id="Header">
		<img src="banner.png" />
			<div id="menu">
				<ul>
				<Li><a href="gameboy.html">Gameboy </a></li>
				<li><a href="snes.html">Snes </a></li>
				<li><a href="megadrive.html">Megadrive </a></li>
				<li><a href="atari.html">Atari </a></li>
				<li><a href="N64.html">N64 </a></li>
				<li><a href="homepage.html">Homepage </a></li>
				<ul>
			</div>						
		</div>
 
		<div id="footer">
			<p>AgeOldGames&trade;; Craig Hemingway</P>
		</div>
 
	<Body>
		<div id="content">
		<br><br><br>
			<H1> Homepage </H1>
 
		</div>
	</body>
</html>

/*Header and footer formatting*/
 
h1
{
 margin:0;
 padding:1em;
 font-size:1.5em;
 font-weight:bold;
}
 
P /*Formatting paragraph (Need to understand the P to footer link)*/
{
 margin:0;
 padding:.5em 1.5em;
}
 
div#header
{
 background:Black;
 color:white;
}
 
div#footer
{
 background:black;
 color:white;
}
 
/*Fixed header and footer*/
 
#content
{
  margin:5;
  padding:header-<length> 0 footer-<length> 0;
}
 
 div#header
{
  position:auto;
  top:0;
  left:0;
  width:100%;
  height:header-<length>;
}
 
 div#footer
{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:footer-<length>;
}
 
  body>div#header
{
   position:fixed;
}
 
  body>div#footer
{
   position:fixed;
}
 
  * html body
{
  overflow:hidden;
} 
 
 * html div#content
 {
  height:100%;
  overflow:auto;
}
 
/*Menu Code*/
 
#menu
{
	margin: auto;
 
}
 
#menu li
{
	float: right;
	text-align: right;
	padding: 15px;
 
}
 
#menu ul li a 
{
	color: white;
	text-decoration: none;
	position: relative;	
}
 
#menu ul 
{
	list-style: none;
	padding: 25px;
	margin: auto;
	position: absolute;
    top: 0px;
    right:10px;
    width: 100%;
}
 
/*Formatting*/ 
 
header
{
   position: relative;
   width: 100%; 
}
 
body 
{
	margin: auto;
	font-family: "Copperplate Gothic Light","Serif sans";
}
 
/*Test Code*/

Anybody have any ideas also pointing out any other relevant mistakes would be helpful. Thanks!