Go Back   Tech Support Forum > Design Forum > Web Design & Development

How to get webpage in middle of screen

This is a discussion on How to get webpage in middle of screen within the Web Design & Development forums, part of the Tech Support Forum category. Hi, I've seen some nice websites (sorry, no examples) where the actual content always sits in the middle of the


Reply
 
Thread Tools Search this Thread
Old 04-28-2005, 08:47 AM   #1
Registered Member
 
TerryByte's Avatar
 
Join Date: Jan 2005
Location: Manchester
Posts: 16
OS: Win98/2000 & XP


Question

Hi,

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.

__________________
TerryByte is offline   Reply With Quote
Old 04-28-2005, 02:33 PM   #2
TSF Enthusiast
 
BMR777's Avatar
 
Join Date: Apr 2005
Location: Chicago, IL
Posts: 1,400
OS: XP Pro, XP Home, Vista Home Basic, Ubuntu Studio


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

BMR777
www.rusnakweb.com

__________________
BMR777 is offline   Reply With Quote
Old 05-06-2005, 10:11 AM   #3
TSF Team Emeritus, Design Team
 
v-six's Avatar
 
Join Date: Sep 2004
Location: Cortland, NY
Posts: 2,254
OS: Snow Leopard, Win 7 64 bit



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.
__________________
mysql> --i-am-a-dummy
v-six is offline   Reply With Quote
Old 05-11-2005, 08:50 AM   #4
Registered Member
 
TerryByte's Avatar
 
Join Date: Jan 2005
Location: Manchester
Posts: 16
OS: Win98/2000 & XP


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.
__________________
TerryByte is offline   Reply With Quote
Old 05-13-2005, 11:49 AM   #5
TSF Team Emeritus, Design Team
 
v-six's Avatar
 
Join Date: Sep 2004
Location: Cortland, NY
Posts: 2,254
OS: Snow Leopard, Win 7 64 bit



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.
__________________
mysql> --i-am-a-dummy
v-six is offline   Reply With Quote
Old 01-30-2008, 09:55 AM   #6
Registered Member
 
Join Date: Jul 2007
Posts: 49
OS: Vista, Xp, SuSE10.2



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>
__________________
aldistuck is offline   Reply With Quote
Old 01-30-2008, 11:41 AM   #7
Design Team
 
KoosHopeloos's Avatar
 
Join Date: Nov 2004
Posts: 603
OS: Windows XP Pro & Windows Vista Ultimate browsing the web with FF, Opera, Safari and IE.



@ 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.
__________________
Regards, KoosHopeloos

KoosHopeloos is offline   Reply With Quote
Old 01-31-2008, 05:15 AM   #8
Registered Member
 
Join Date: Jul 2007
Posts: 49
OS: Vista, Xp, SuSE10.2



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/...estwebdev.html
__________________
aldistuck is offline   Reply With Quote
Old 01-31-2008, 07:11 AM   #9
TSF Team, Emeritus
 
Skie's Avatar
 
Join Date: Mar 2003
Location: Chicago burbs
Posts: 2,195
OS: Gentoo Linux, CentOS, OS X

My System


I moved this to the Web Design forum as you'll get more responses then in the Web Server forum.
__________________
Skie is offline   Reply With Quote
Old 01-31-2008, 12:15 PM   #10
Design Team
 
KoosHopeloos's Avatar
 
Join Date: Nov 2004
Posts: 603
OS: Windows XP Pro & Windows Vista Ultimate browsing the web with FF, Opera, Safari and IE.



@ 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...
__________________
Regards, KoosHopeloos

KoosHopeloos is offline   Reply With Quote
Old 02-01-2008, 11:11 AM   #11
Registered Member
 
Join Date: Jul 2007
Posts: 49
OS: Vista, Xp, SuSE10.2



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">&nbsp;</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.
__________________
aldistuck is offline   Reply With Quote
Old 02-02-2008, 08:11 PM   #12
Registered Member
 
Join Date: Feb 2008
Location: Canada
Posts: 17
OS: Windows XP



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>

__________________
Bisque is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is on
Smilies are on
[IMG] code is on
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Post a Question


» Site Navigation
 > FAQ
  > 10.0.0.2


All times are GMT -7. The time now is 08:24 PM.


Copyright 2001 - 2014, Tech Support Forum

Windows 7 - Windows XP - Windows Vista - Trojan Removal - Spyware Removal - Virus Removal - Networking - Security - Top Web Hosts