Layout problem... [Archive] - WebDeveloper.com

Slinkiroth

05-04-2006, 10:55 AM

Hi there everyone.

Im new to webdesign so please go easy on me :(
A friend built a webpage for me a while ago and now I decided to TRY and redesign it. Take a look at what I've got already: http://www.verchiesoft.com/

What I'd like to do is center what I've done so far in the middle of the browser no matter what screen resolution users are viewing in. Can anyone please help me out? Thanks in advance. :)

Fang

05-05-2006, 02:12 AM

The basics:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic center page with elements position:absolute</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
margin:0;
text-align:center;
}
#container {
position:relative; /* parent of absolute positioned contents */
margin:0 auto;
width:80%; /* change to required width */
text-align:left;
}
#contents { /* any element here is centered */
border:1px solid red;
}
</style>
</head>
<body>
<div id="container">
<div id="contents">
<p>contents</p>
</div>
</div>
</body>
</html>

It does mean you will have to change the left values of all absolutely positioned elements and some background image have to be placed outside of #container.
Design and implement, not implement and re-design.
In the majority on cases absolutely positioned elements can be replaced by static (default) elements in a correctly implemented css layout.