Member Avatar for goodguy73

I know there has been lots of discussion about how to make an entire website render centre screen, regardless of monitor size or format (e.g. widescreen). It seems most answers rely on use of tables, which we're repeatedly told is an outdated approach to layout. Also the <centre> tag is dead and burried.

I use layers to build my pages - no tables or frames - I guess I'm comfortable in the layer space because I grew up with layering in Photoshop.

Do you think I can make a web page appear automatically centred in a browser? You guessed right, no.

It has to be simple because everyone but me is doing it, yes?

Does anyone have a nice presentation of how the code would appear on a page made up of a layered layout? Is this a CSS issue? If so, how does one define a set of div tags and apply the style to them as a snippet of code which could be used on any site?

Am I confusing to follow? Am I making any sense at all?

It would be great to look at a simple page of code showing where the div tags are placed relative to the rest of the code and what the css style code looks like and where it is placed relative to everything else.

  • 2 Contributors
  • 1 Reply
  • 207 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by sudeepjd
Member Avatar for sudeepjd

Use this template... It should help....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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"> 
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; 
	padding: 0;
	text-align: center;
	color: #000000;
}
.wrapper #container {
	width: 780px;
	background: #FFFFFF;
	margin: 0 auto;
	border: 1px solid #000000;
	text-align: left;
}
.wrapper #mainContent {
	padding: 0 20px;
}
-->
</style></head>
 
<body class="wrapper">
 
<div id="container">
  <div id="mainContent">
    <h1>My Head</h1>
    <p>Your text here</p>    
	<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>
Edited by sudeepjd because: n/a
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.