# How to get webpage in middle of screen



## TerryByte

Hi, :tongue: 

I've seen some nice websites (sorry, no examples) where the actual content always sits in the middle of the IE window, regardless of the screen resolution setting. This means the site always looks like it was designed for that particular res setting, which is pleasing for visitors to that URL.

If the webpage is within a table of dimensions 600 w x 400 h, no scroll bars would be needed, even with a 640 x 480 res screen, so the effect can appear very neat, if there isn't too much text to fit in.

But here's the trick, rather than have the content described above, up in the top left corner, which would appear awkard with a 1280 w x 1024 h res screen (lots of 'white' screen in the bottom RHS), there seems to be a way of making the page appear in the middle.

I cannot find anything in Dreamweaver, but perhaps there is an 'auto-centre' option, or something like this.

Cheers, Terry.


----------



## BMR777

To center text and stuff, just use the <center> tag.

BMR777
www.rusnakweb.com


----------



## v-six

*a bad response...*

the simple way to do this is to set your content into a table sized at a percent, lets say 75%, instead of setting it to a fixed size, such as 700 pixels. It is very easy to do, and very difficult to do well. If there's anything you want me to elaborate on, please let me know.


----------



## TerryByte

Thanks for the suggestions.

I'm not quite there yet.

Just to recap, I want all content within a table, approx size 500w x 350h. This table with have a background colour, and contain cells that have the actual content i.e. text/images.

My intention is to create webpages that are easily viewed on low res monitors, especially PDAs. So I want it to look OK in VGA res (640 x 480) but when viewed with 'normal' monitors (1024 x 768), the table will still be in the middle of the screen, and not in the top RHS.

If I draw a table (say 500w x 350h) in Dreamweaver, by default it sits in the top RHS when viewed in IE using all screen res settings. 

Back in Dreamweaver, if I right mouse click on the table, select 'Align' and then choose centre, then the table always appears in the centre of the browser window, but only horizontally. It still sits at the top of the window.

There must be a way of making it sit right in the middle.

If I set the horizontal width of the table to %, then it simply fills up the entire window, and still sits at the top. I could then have the table cells to be centre aligned, but there would be loads of space inside the table when viewed with a high res screen.


----------



## v-six

*vertically centering..*

sorry, I wasn't exactly sure what you were asking before, what you need to do is very simple, I'll post as soon as I'm back on my own computer and can take a look at dreamweaver to ensure it works.


----------



## aldistuck

In Dreamweaver select the code view to look at your actual code.
Find your table (<table>). Inside the table tag you probably see something like: <table align="center"> or some similarity. Next to maybe try to add this:
<table valign="middle" align="center">. If middle doesnt work then try center as I dont remember off hand which one it is. But "align=" is for horrizontal alignment and "valign=" is for vertical alignment. maybe that will work for you.
I might be wrong about the above. valign may not work in the actual table but instead in the <td>. Sorry if I'm confusing you.
Below is a working example.



Code:


<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center" valign="middle">
<table border="1" width="300"><tr><td>Hey look at me! I'm in the middle!</td></tr></table>
</td></tr></table>


----------



## KoosHopeloos

@ TerryByte: have you considered using (X)HTML and CSS to make your webpages? If you use CSS the information on your webpage stays the same, only the way it is represented is different.
Although this might require some work/planning before (you can do anything), in the later stages it might save you a lot of work, and I mean a lot of work.

Also, using tables to layout a webpage is slowly being replaced by (X)HTML & CSS. If you are starting now, it might be a better choice to do well the first time.


----------



## aldistuck

How about an example of xhtml or css that would align a main container virtical center?

I was limited on time but was trying to read a little bit about xhtml and by what I read its just a more strict version of html.

Im reading info regarding css and xhtml from the link below.

http://developer.apple.com/internet/webcontent/bestwebdev.html


----------



## Skie

I moved this to the Web Design forum as you'll get more responses then in the Web Server forum.


----------



## KoosHopeloos

@ aldistuck: the info from the link you gave is on the spot! And as you say, you do not need to use XHTML, that is why put the (X) in brackets.

Anyway, to answer your question, please see these 2 links: 1, 2
What you can do is to make a container div that 'holds' your website which you state to be vertical align: 250px. That means that you webpage will always start 250px lower from the top. You can also do this with percentages...


----------



## aldistuck

First the code:


Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body bgcolor="#666666">
<div id="Layer1" style="position:absolute; left:22px; top:44px; width:872px; height:101px; z-index:1; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;"></div>
<div id="Layer2" style="position:absolute; left:23px; top:157px; width:130px; height:375px; z-index:2; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;"></div>
<div id="Layer3" style="position:absolute; left:165px; top:159px; width:730px; height:374px; z-index:3; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;"></div>
<table width="100%" height="600" border="1" align="center">
  <tr>
    <td align="center" valign="middle"> </td>
  </tr>
</table>
</body>
</html>

This was done in dreamweaver.
What I'm trying to accomplish is to have the layers inside the table stay centered in the table. What Ive seen is that the table when set at 100% width adjusts itself with the browser. However when it adjusts itself the layers align themselves to the left top. How can I make these layers adjust themselves so they dont apear in the left?

Maybe I'm going about it wrong but Ive read and tried but am not getting the results I want.


----------



## Bisque

So if I'm understanding you right, when you change resolutions the table is staying centred but the div layers are not?

This would be because you are using specific pixel amounts to position them. They will -always- stay that far from the top and left. So when you change resolutions you'll find that they will stick sort of up in the corner.

---------------

Personally i position things in the centre like this:
(it's probably not the most efficient way, but it works with some tinkering of the percentages)


Code:


<div style="position:absolute; top:30%;">

<table align="center">
 <tr> 
  <td width="30%">
  </td>
  <td>
   blahblahblahcontent(another table, an image, whatever etc)
  </td>
  <td width="30%">
  </td>
 </tr>
</table>
</div>


----------

