Member Avatar for npatel0317

http://www.myfeva.com/HTML/template.html

i would liek to set that background (gradiant) fullscreen and box in middle auto adjust on screen size can anyone help me with this.. thanks a lot for looking.

  • 2 Contributors
  • 1 Reply
  • 85 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by katarey
Member Avatar for katarey

This Code Will Help You,

In this page middle_Div will always center aligned (vertical and horizontal)
even web browser resized, there may many more ways to do this,
but this is first which I have got in my mind after seen you post, and its easiest
way (I hope) ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" >
<!--
html{
height:100%;
}
body {
	background:#99ccff url(bg_gradient.jpg) top repeat-x; 
	/**** 
	make bady background color same as you have in bottom in the gradient
	this will help you when your page height more then the image
	****/
	margin:0px;
	padding:0px;
	height:100%;
}
#middle_Div{
width:450px;
height:450px;
margin-right:auto;
margin-left:auto;
background:#fff;
}
table{
height:100%;
}
/*************************/
/****Rahul Dev Katarey*****/
/****www.katarey.com******/
/************************/
-->
</style>
</head>
<body>
<!--Table Will Take Care of Vertical align for div in middle of page -->
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div id="middle_Div">Content for  id "middle_Div" Goes Here</div></td>
  </tr>
</table>
</body>
</html>

Regards,
Rahul Dev Katarey

help.zip (1.81 KB)
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.