View Full Version : centering pages (again, I'm sure ...)

09-25-2008, 02:28 PM
my webdesign capabilities (using Dreamweaver 4.0) are at best limited (I have, for instance, no idea what a CSS is or how to use it, etc.)

my site (www.mantlermusic.com (http://www.mantlermusic.com)) is entirely based on tables and has a navigation bar in a frame at the top that never moves, and all content in a second frame in tables - as far as I can tell, this all works quite well on any screen or browser

however - could someone take a look and tell me if there is a (relatively?) simple way to adjust all pages including the static nav bar, so that everything appears in the center of any screen size?

09-26-2008, 06:46 PM
even though there was apparently no answer to be had on this forum so far, if anyone is curious, I got this information from another forum:

Seeing as you have used table based layout you can simply change the table tag on introduction.htm to:
<table cellspacing="0" cellpadding="0" border="0" width="whatever" align="center">
so it is just adding align="center" to your table tag

... and, indeed, this works!

09-28-2008, 07:20 PM
Here a lil help....(cortesy by Corrosive)

Centring your design. This is the one single topic which I have seen more posts on forums about than anything else. Why? I think folks see the inevitable blank space in two ways, depending on where it is. The space evenly distributed around the design i.e. centred on the screen and it somehow 'adds to the design'. Most sites are now centred (I notice the good old BBC has moved recently from a left aligned site to a centred one). However, a left aligned site leaves all of the space on the right hand side of the screen and then it is viewed as wasted. Particularly clients of web designers feel that they are paying for space which has not been filled...irrational, I know, but it happens.
I see a lot of different methods for centring designs with CSS. Some I have tried and have worked for a while only to be thwarted by something refusing to line up later and others haven't worked at all. Here's the method I used for this site.
This is the CSS...
#wrapper {
margin: auto;
width: 800px;
position: relative;
and this is the HTML...
<div id="wrapper">The entire content of your website goes HERE</div>

When I say that 'the entire content of your website goes here' I mean it. Put all your other div tags and site content between these two points. The 'auto' margin in the css is making sure that the gap either side of the 'wrapper' div tag is equal and, therefore, in the centre of the page. I design sites mostly at 800px wide which is why I have set the div width as this. This is because it is the size which will generally fit on most size monitors (think about laptops) and at most screen resolutions. The only thing to be aware of is the increase in use of widescreen monitors. This may cause your 800px to look a bit dwarfed on the screen. Look for the tutorial on building a site which resizes on the screen elsewhere on this site.