Web Layout
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
 
User Name:
Password:
Remember me
Go Back   ASP Free Forums > Web Design > Web Layout
Reload this Page

Centreing a web page

Discuss Centreing a web page in the Web Layout forum on ASP Free.
Centreing a web page Web Layout forum discussing design strategies and topics that range from general site layout to advanced site design. Find out what everyone is doing, and how best to arrange your content.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread ASP Free Forums Sponsor:
  #1  
Old November 1st, 2004, 08:38 AM
babyewok babyewok is offline
Registered User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Jul 2004
Posts: 19 babyewok User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 51 m 7 sec
Reputation Power: 0
Question Centreing a web page
Can anyone help me:

I am trying to make my web page automatically centre to an individual's monitor. i.e. whatever resolution the moniter, my web site will always centre itself, so that when viewed in larger resolutions that it was designed in, it does not get lost in the left hand corner.

I know this is possible, because I have used many sites that do it....but how?!
Reply With Quote
  #2  
Old November 1st, 2004, 12:05 PM
selwonk's Avatar
selwonk selwonk is offline
Contributing User
ASP Free Frequenter (2500 - 2999 posts)
  
Join Date: Jun 2004
Posts: 2,942 selwonk User rank is Second Lieutenant (5000 - 10000 Reputation Level)selwonk User rank is Second Lieutenant (5000 - 10000 Reputation Level)selwonk User rank is Second Lieutenant (5000 - 10000 Reputation Level)selwonk User rank is Second Lieutenant (5000 - 10000 Reputation Level)selwonk User rank is Second Lieutenant (5000 - 10000 Reputation Level)selwonk User rank is Second Lieutenant (5000 - 10000 Reputation Level)selwonk User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 6 Days 9 h 49 m 28 sec
Reputation Power: 62
You can either use an IFRAME or for a simpler solution wrap the content in another TABLE and set the vertical and horizontal alignment of the TD to be centered
__________________
selwonk

If I've posted some code above, you might think it looks a bit simplistic. It might be. I'd rather people tried the next step themselves rather than getting a full solution on a plate. That way they learn more!
Reply With Quote
  #3  
Old November 3rd, 2004, 10:11 AM
maxwell_hung maxwell_hung is offline
Registered User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Nov 2004
Posts: 2 maxwell_hung User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Not sure how you're laying out your page but this works for CSS styling.

<html>
<head>
<style type="text/css">
body {
text-align:center;
}
#container {
border:1px solid #000;
width:600px;
margin:0 auto;
text-align:left;
}
</style>
</head>
<body>
<div id="container">
My content
</div>
</body>
</html>
Reply With Quote
  #4  
Old November 7th, 2004, 10:07 AM
Phoenix's Avatar
Phoenix Phoenix is offline
Web-Standards Evangelist
ASP Free Intermediate (1500 - 1999 posts)
  
Join Date: Nov 2003
Posts: 1,522 Phoenix User rank is Corporal (100 - 500 Reputation Level)Phoenix User rank is Corporal (100 - 500 Reputation Level)Phoenix User rank is Corporal (100 - 500 Reputation Level)Phoenix User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 4 Days 23 h 48 m 4 sec
Reputation Power: 8
There is no "real" way of making things vertically center using XHTML1.1 and CSS2

Horizontal centering can be achieved by using margin-right: auto; margin-left: auto;

According to the W3C, the XHTML canvas is considered to have finite width, but infinite height

One workaround, is to use negative margins, this is fine if your box has a fixed height, otherwise, you'll need to use Javascript to update the margins:

Code:
#box { margin-left: auto; margin-right: auto; width: 500px; height: 300px; margin-top: -150px; position: absolute; top: 50%;}

<div id="box">
<p>Your content</p>
</div>
Reply With Quote
  #5  
Old November 7th, 2004, 11:36 AM
shamrog12's Avatar
shamrog12 shamrog12 is offline
Newton's Apple Wizard
ASP Free Intermediate (1500 - 1999 posts)
  
Join Date: Nov 2003
Location: Los Angeles
Posts: 1,661 shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 3 Weeks 2 Days 2 h 39 m 22 sec
Reputation Power: 34
Send a message via AIM to shamrog12
very true comment about the vertical centering in XHTML 1.1 (which is strict). What I would do maybe, depending on what you need this for, is have a javascript popup that automatically centers vertically and horizontally. That poses a ton of new issues that you may not want to deal with but that's the only way i can think of to do it.
__________________
If you found a post of mine helpful, please click on the on my post to add to my reputation.

Reply With Quote
  #6  
Old November 9th, 2004, 09:55 PM
kakarottt kakarottt is offline
Contributing User
ASP Free Newbie (0 - 499 posts)
  
Join Date: Nov 2004
Posts: 63 kakarottt User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 6 m 9 sec
Reputation Power: 4
i have no idea what you guys are talking about.. but if you want the site to be centered in a simple way.. without using CSS

after your body tag
<body background=yadda text=color alink=color vlink=color>
<center>
content of the page, or the main table
</center>
</body>

OR if you wanted to center the content vertically and horizontally...

<body background=yadda text=color alink=color vlink=color>
<table width="100%" height="100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
content centered vertically and horizontally. can also have a main table/design in here (nested tables)
</td>
</tr>
</table>
</body>
Reply With Quote
  #7  
Old November 9th, 2004, 10:08 PM
shamrog12's Avatar
shamrog12 shamrog12 is offline
Newton's Apple Wizard
ASP Free Intermediate (1500 - 1999 posts)
  
Join Date: Nov 2003
Location: Los Angeles
Posts: 1,661 shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 3 Weeks 2 Days 2 h 39 m 22 sec
Reputation Power: 34
Send a message via AIM to shamrog12
using <center> has been deprecated and is not supported in the current versions of XHTML so..... if you want your website to be functional once browsers end support for HTML4 and before, use CSS.

If you want a table to be completely centered use the following. I included a dark border so you can see that it is centered and I made the width 770px which is the standard width for websites that do (and should) support 800x600 resolution.

Code:
<head>
<style type="text/css">
body {
font-size : 12px ;
font-family : Verdana, Arial, Helvetica, sans-serif ;
color : #000000 ;
margin : 0;
padding : 0;
}

.blackBorder {
border : 1px solid #000000 ;
text-align : center ;
margin-right : auto ;
margin-left : auto ;
}
</style>
</head>
<body>
<div style="margin-right:auto;margin-left:auto;text-align:center;">
  <table style="width:770px;" cellpadding="0" cellspacing="0" class="blackBorder">
    <tr>
      <td style="text-align:left;">text</td>
    </tr>
  </table>
</div>
</body>


Horizontal centering is not supported by XHTML so you can expect less-than-adequate support for vertical centering in the future.
Reply With Quote
  #8  
Old November 9th, 2004, 10:10 PM
shamrog12's Avatar
shamrog12 shamrog12 is offline
Newton's Apple Wizard
ASP Free Intermediate (1500 - 1999 posts)
  
Join Date: Nov 2003
Location: Los Angeles
Posts: 1,661 shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level)shamrog12 User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 3 Weeks 2 Days 2 h 39 m 22 sec
Reputation Power: 34
Send a message via AIM to shamrog12
TECHNICALLY the use of the STYLE attribute has been deprecated but for the purpose of this example it helps to give you an idea of what goes and where.
Reply With Quote
Reply

Viewing: ASP Free Forums > Web Design > Web Layout > Centreing a web page

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 6 hosted by Hostway.