CSS Layout not resizing over multiple resolutions

DJMK4

DJMK4

DJMK4

Soldato
Joined
1 Dec 2004
Posts
23,079
Location
S.Wales
I have a small problem with my website, and my css layout.

When i view the page over different screen resolutions, the website does not automatically re-size the page so that the container div is located in the centre of the screen, it only does this in the resolution that i designed it on.

Is it possible to do this so that it re-sizes the screen making the container fit into the screen depending on the resolution?

Here is my CSS:

Code: 
/* CSS Document */




/*Layout Objects*/

* {
		margin: 0;
		padding: 0;
}

body {

		margin: 3% auto;

		padding: 0;

		text-align: center;

}

#container {
		margin:0 auto;
		width: 70%;
		min-height: 600px;
		min-width: 850px;
		height: 600px;
		background-color: #FFFFFF;
		border:1px solid #000;
}

#banner {
		margin: 2px;
		height: 15%;
		background-image: url("images/Untitled-1.jpg");
		border:1px solid #000;
		background-repeat: no-repeat;
}

#menu {
		margin: 2px;
		height:4%;
		background-color:#666666;
		border:1px solid #000;
}


#body {
		margin: 2px;
		height: 75%;
		background-color:#ffffff;
		border:1px solid #000;
		overflow: auto;
}

#footer {
		margin: 2px;
		height:3%;
		background-color:#666666;
		border:1px solid #000;
}
/*End of Layout Objects*/






/*Start Of Navigation*/

#nav ul{
		padding : 1px 0;
		margin : 0;
		text-align: center;
		width: 100%;
		
}

#nav li{
   		display : inline;
		list-style-type: none;
		
}


#nav ul li a{
		background-color: #666666;
   		color: #cccccc;
   		font-weight : bold;
   		text-decoration : none;
   		padding-left : 5%;
   		padding-right : 5%;
   		border:1px solid #000;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
}

#nav ul li a:hover{
		background-color:#333333;
		color:#ffffff;
}
/*End Of Navigation*/
 
HTML

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
	<LINK REL=StyleSheet HREF="style.css" TYPE="text/css">
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>CSS Layout Template</title>
</head>



<body>

<div id="container">
	<div id="banner"></div>
	<div id="menu">
		<div id="nav">
			<ul>
      			<li><a href="">Test Link1</a></li>
				<li><a href="">Test Link2</a></li>
				<li><a href="">Test Link3</a></li>
				<li><a href="">Test Link4</a></li>
				<li><a href="">Test Link5</a></li>
			</ul>
   		</div>
	</div>
	<div id="body"></div>
	<div id="footer"></div>
</div>


</body>




</html>
 
You must log in or register to reply here.
Back
Top Bottom