Author Topic: HTML code to center my website (Read 52659 times)

Solus Hospes · « **on:** August 22, 2008, 11:44:34 PM »

Hello,

I'm a novice when it comes to web design and worse when it comes to HTML. My knowledge is rudimentary at best and completely self taught. For this particular problem I am using "freewebs" as the host for my domain name and have the website set up to my liking except one small issue. I am well aware people have different settings of resolution on different sized monitors and would like to have my website automatically center on their screen. I have spent over three hours trying to find a sufficient code to do this with no success.

I appreciate anyone's help.

This is the full code for my "index" page of my website.

Code: [Select]

<html>
<head>
<body>
<title>Vision of Gor | A players outlook</title>

<DIV style="LEFT: 0px; BACKGROUND-IMAGE: url(http://www.freewebs.com/visionofgor/Background.jpg); 
WIDTH: 800px; BACKGROUND-REPEAT: no-repeat; POSITION: absolute; TOP: 0px; HEIGHT: 550px">

<div style="position:absolute; left:170; top:26;"><iframe src="http://www.visionofgor.com/updates.html" 
name="A" WIDTH="613" HEIGHT="92" frameborder="0" allowtransparency="true"></iframe></div>

<div style="position:absolute; left:169; top:247;"><iframe src="http://www.visionofgor.com/00.html" 
name="Main" WIDTH="614" HEIGHT="285" frameborder="0" allowtransparency="true"></iframe></div>
 
<DIV style="PADDING-RIGHT: 0px; OVERFLOW-Y: auto; PADDING-LEFT: 0px; SCROLLBAR-FACE-COLOR: 
#0000ff; FONT-SIZE: 8pt; Z-INDEX: 1; FILTER: chroma(color=#0000FF);
         LEFT: 0px; OVERFLOW-X: hidden; PADDING-BOTTOM: 0px; 
         SCROLLBAR-HIGHLIGHT-COLOR: #0000ff; 
OVERFLOW: auto; 
         WIDTH: 150px; SCROLLBAR-SHADOW-COLOR: #0000ff; SCROLLBAR-3DLIGHT-COLOR: #0000ff; 
         SCROLLBAR-ARROW-COLOR: #A67D1B; 
         PADDING-TOP: 10px; 
SCROLLBAR-TRACK-COLOR: #0000ff; FONT-FAMILY: Times New Roman; SCROLLBAR-DARKSHADOW-COLOR: 
#0000ff; SCROLLBAR-BASE-COLOR: #0000ff; POSITION: absolute; 
         TOP: 266px; 
         HEIGHT: 300px; 
TEXT-ALIGN: justify" allowTransparency>
             <font size=2> <p align=center>
             <font color="#000000"> 
 
<a href="http://www.visionofgor.com/00.html" target="Main"> <font color="#ffffff"> <b> Intro</a> 
</b></font> <br><br>

<a href="http://www.visionofgor.com/truthfact.html" target="Main"> <font color="#ffffff"> <b> Fact -vs- 
Truth</a> </b></font><br>
<a href="http://www.visionofgor.com/bookvsaol.html" target="Main"> <font color="#ffffff"> <b> Book -vs- 
AOL</a> </b></font><br><br>

<a href="http://www.visionofgor.com/RPcreed.html" target="Main"> <font color="#ffffff"> <b>RPer's
 Creed</a> </b></font><br><br>

<a href="http://www.visionofgor.com/readercomments.html" target="Main"> <font color="#ffffff"> <b> 
Reader's Comments</a> </b></font><br><br>

<a href="http://www.visionofgor.com/readercomments.html" target="Main"> <font color="#ffffff"> <b> 
Banners</a> </b></font><br><br>
 
<a href="http://www.visionofgor.com/links.html" target="Main"> <font color="#FFffff"> <b> Links</a> 
</b></font><br><br>

<a href="http://www.meoag.com/VoGcontact.html" target="Main"> <font color="#FFffff"> <b> Contact</a> 
</b></font>
 
</font></DIV><DIV></DIV></DIV></BODY></head></HTML>

Many thanks,
Solus Hospes

mcxeb52! · « **Reply #1 on:** August 22, 2008, 11:51:49 PM »

http://www.webmasterworld.com/forum21/7567.htm

That I think may be what you're looking for.

Solus Hospes · « **Reply #2 on:** August 23, 2008, 12:10:16 AM »

I appreciate the help and I have tried all three methods suggested to the best of my knowledge and still cannot get it to work. I am assuming that I am missing a fundamental code somewhere.

Any suggestions?

kpac · « **Reply #3 on:** August 23, 2008, 03:31:42 AM »

You have quite a few problems with the layout of your code.

This is what you have:

Code: [Select]

<html>
<head>
<body>
<title>Vision of Gor | A players outlook</title>

<DIV style="LEFT: 0px; BACKGROUND-IMAGE: url(http://www.freewebs.com/visionofgor/Background.jpg); 
WIDTH: 800px; BACKGROUND-REPEAT: no-repeat; POSITION: absolute; TOP: 0px; HEIGHT: 550px">

<div style="position:absolute; left:170; top:26;"><iframe src="http://www.visionofgor.com/updates.html" 
name="A" WIDTH="613" HEIGHT="92" frameborder="0" allowtransparency="true"></iframe></div>

<div style="position:absolute; left:169; top:247;"><iframe src="http://www.visionofgor.com/00.html" 
name="Main" WIDTH="614" HEIGHT="285" frameborder="0" allowtransparency="true"></iframe></div>
 
<DIV style="PADDING-RIGHT: 0px; OVERFLOW-Y: auto; PADDING-LEFT: 0px; SCROLLBAR-FACE-COLOR: 
#0000ff; FONT-SIZE: 8pt; Z-INDEX: 1; FILTER: chroma(color=#0000FF);
         LEFT: 0px; OVERFLOW-X: hidden; PADDING-BOTTOM: 0px; 
         SCROLLBAR-HIGHLIGHT-COLOR: #0000ff; 
OVERFLOW: auto; 
         WIDTH: 150px; SCROLLBAR-SHADOW-COLOR: #0000ff; SCROLLBAR-3DLIGHT-COLOR: #0000ff; 
         SCROLLBAR-ARROW-COLOR: #A67D1B; 
         PADDING-TOP: 10px; 
SCROLLBAR-TRACK-COLOR: #0000ff; FONT-FAMILY: Times New Roman; SCROLLBAR-DARKSHADOW-COLOR: 
#0000ff; SCROLLBAR-BASE-COLOR: #0000ff; POSITION: absolute; 
         TOP: 266px; 
         HEIGHT: 300px; 
TEXT-ALIGN: justify" allowTransparency>
             <font size=2> <p align=center>
             <font color="#000000"> 
 
<a href="http://www.visionofgor.com/00.html" target="Main"> <font color="#ffffff"> <b> Intro</a> 
</b></font> <br><br>

<a href="http://www.visionofgor.com/truthfact.html" target="Main"> <font color="#ffffff"> <b> Fact -vs- 
Truth</a> </b></font><br>
<a href="http://www.visionofgor.com/bookvsaol.html" target="Main"> <font color="#ffffff"> <b> Book -vs- 
AOL</a> </b></font><br><br>

<a href="http://www.visionofgor.com/RPcreed.html" target="Main"> <font color="#ffffff"> <b>RPer's
 Creed</a> </b></font><br><br>

<a href="http://www.visionofgor.com/readercomments.html" target="Main"> <font color="#ffffff"> <b> 
Reader's Comments</a> </b></font><br><br>

<a href="http://www.visionofgor.com/readercomments.html" target="Main"> <font color="#ffffff"> <b> 
Banners</a> </b></font><br><br>
 
<a href="http://www.visionofgor.com/links.html" target="Main"> <font color="#FFffff"> <b> Links</a> 
</b></font><br><br>

<a href="http://www.meoag.com/VoGcontact.html" target="Main"> <font color="#FFffff"> <b> Contact</a> 
</b></font>
 
</font></DIV><DIV></DIV></DIV></BODY></head></HTML>

Try this:

Code: [Select]

<html>

<head>
  <title>Vision of Gor | A players outlook</title>
<head>

<body>
  <center>
    <div align="center">
      <!-- All content you want to see on the page goes here -->
    </div>
  </center>
</body>

</html>

That should dp you for now, and it should be centered on the page.

For the future, all HTML tags and statements should be lower-case, and you should try laying out your code better.

If you want to touch up on your knowledge, visit W3Schools for excellent tutorials on HTML and CSS.

If you have any problems get back to me. I'll be right here.

Solus Hospes · « **Reply #4 on:** August 23, 2008, 10:00:24 AM »

I feel like...worse than a novice. As stated previously, I'm self taught mostly through mimicking. Not the best way to learn, but it's worked for me so far. I appreciate your help Kpac, I really do.

This is my "revised" code and I still cannot get the page centered. What am I missing?

Code: [Select]

<html>

<head>
  <title>Vision of Gor | A players outlook</title>
<head>

<body>
  <center>
    <div align="center">
      <div style="left: 0px; background-image: url(http://www.freewebs.com/visionofgor/Background.jpg); 
       width: 800px; background-repeat: no-repeat; position: absolute; top: 0px; height: 550px">

        <div style="position:absolute; left:170; top:26;"><iframe src="http://www.visionofgor.com/updates.html" 
         name="A" width="613" height="92" frameborder="0" allowtransparency="true"></iframe></div>

        <div style="position:absolute; left:169; top:247;"><iframe src="http://www.visionofgor.com/00.html" 
         name="main" width="614" height="285" frameborder="0" allowtransparency="true"></iframe></div>
 
        <div style="padding-right: 0px; overflow-y: auto; padding-left: 0px; scrollbar-face-color: 
         #0000ff; font-size: 8pt; z-index: 1; filter: chroma(color=#0000FF);
         LEFT: 0px; overflow-X: hidden; padding-bottom: 0px; 
         scrollbar-highlight-color: #0000ff; 
         overflow: auto; 
         width: 150px; scrollbar-shadow-color: #0000ff; scrollbar-3dlight-color: #0000ff; 
         scrollbar-arrow-color: #a67d1b; 
         padding-top: 10px; 
          scrollbar-track-color: #0000ff; font-family: Times New Roman; scrollbar-darkshadow-color: 
          #0000ff; scrollbar-base-color: #0000ff; position: absolute; 
         top: 266px; 
         height: 300px; 
         text-align: justify" allowtransparency>
             <font size=2> <p align=center>
             <font color="#000000"> 
 
          <a href="http://www.visionofgor.com/00.html" target="main"> <font color="#ffffff"> <b> Intro</a><br><br>
          <a href="http://www.visionofgor.com/truthfact.html" target="main"> <font color="#ffffff"><b>Fact -vs- Truth</a><br>
          <a href="http://www.visionofgor.com/bookvsaol.html" target="main"> <font color="#ffffff"> <b> Book -vs- AOL</a><br>
          <a href="http://www.visionofgor.com/RPcreed.html" target="main"> <font color="#ffffff"> <b>RPer's Creed</a><br>
          <a href="http://www.visionofgor.com/readercomments.html" target="main"><font color="#ffffff"><b>Comments</a><br>
          <a href="http://www.visionofgor.com/readercomments.html" target="main"> <font color="#ffffff"> <b>Banners</a><br>
          <a href="http://www.visionofgor.com/links.html" target="main"> <font color="#FFffff"> <b> Links</a><br>
          <a href="http://www.meoag.com/VoGcontact.html" target="main"> <font color="#FFffff"> <b> Contact</a>

    </div>
  </center>
</body>

</html>

soybean · « **Reply #5 on:** August 23, 2008, 10:33:57 AM »

kpac, perhaps one point of the OP's requirements needs clarification. Let's say his page is 800 pixels wide, i.e. a fixed width. He wants the page to display horizontally centered when the viewer is using a larger resolution display and, we'll assume, has their browser window maximized. For example, see http://hosanna-lutheran.org/

This type of centering can be done with tables. Here's a brief reference: http://www.boutell.com/newfaq/creating/fixedwidthlayout.html

Solus Hospes · « **Reply #6 on:** August 23, 2008, 11:26:20 AM »

Okay, if I were to use that code for centering, would I simply change the width to my website width?

i.e.

Code: [Select]

<html>
<head>
<title>Centered fixed width test</title>
</head>
<body style="text-align: center">
<div style="width: 200px;  <---------------------------------This line?
  margin: auto;
  text-align: left">
 
(And then post my iframes and nav bar in here?)

</div>
</body>
</html>

ChrisXPPro · « **Reply #7 on:** August 23, 2008, 11:29:56 AM »

Late to the party but I'll just make the point that whatever sizing of the page - a ''containment'' is the way to get centering - either by table or - a CSS wrapper ... so a visit to w3schools would prove very useful I think.

Once container or 'wrapper' is set up everything within will be held in place.

Re last question - set your width to your choice - and if wanting to suit folks with 800x600 res - a ''play it safe'' to avoid horizontal scrolling - then use something like 770 pixels for a fixed width... and apply that to container.

Solus Hospes · « **Reply #8 on:** August 23, 2008, 12:42:46 PM »

I am currently reading through that link and when I/if I find a way to center this site effectively, I will post the resolved code here just in case there are other people with my issue.

Here's to learning!

And thank you, all of you!

soybean · « **Reply #9 on:** August 23, 2008, 12:51:25 PM »

Quote from: Solus Hospes on August 23, 2008, 11:26:20 AM

Okay, if I were to use that code for centering, would I simply change the width to my website width?

Yes. You might need to experiment and see whether the width of the actual page should be slightly less or exactly the same as the outer table.

ChrisXPPro · « **Reply #10 on:** August 23, 2008, 01:19:11 PM »

Following the last comment, to add - within your outer 'container' - you can make good use of cell padding and cell spacing to maintain some breathing space around the contents.

mcxeb52! · « **Reply #11 on:** August 23, 2008, 04:20:45 PM »

Another thing, if you have a software like FrontPage or Dreamweaver, you might just use their WYSIWYG interface to design a page and then go to their HTML code interface to preview what the results look like to see if it works the way you want it.

I think those software auto-generates proper HTML coding to fit whatever you're doing in the WYSIWYG interface. So at least you have a skeleton of a code to edit.

ChrisXPPro · « **Reply #12 on:** August 23, 2008, 06:02:21 PM »

Further thought - get Komposer ....... it's a freebie (open source) and while not as ''clever'' as DW or Frontpage - does give useful options for checking work in progress.

Oh and also - search and find ''Multiple IEs" ..... a set of all old IE versions and between 6 and 7 in particular - several differences which make checking very useful.... 5, 5.5 and 6 are well worth having on hand. .. then too browsershots.org can be handy for testing.

kpac · « **Reply #13 on:** August 24, 2008, 02:43:46 AM »

Quote from: soybean on August 23, 2008, 10:33:57 AM

kpac, perhaps one point of the OP's requirements needs clarification. Let's say his page is 800 pixels wide, i.e. a fixed width. He wants the page to display horizontally centered when the viewer is using a larger resolution display and, we'll assume, has their browser window maximized. For example, see http://hosanna-lutheran.org/

The code I gave worked perfectly for me, and that's the code FrontPage 2000 gives you to center a page.
------

I think I found your problem. The frist <div> you have (in the first post), the left-margin is set to 0. You should take out the height also, because this will be set automatically by the content of the page. In your third post, in the code, you're also missing one </div> tag towards the bottom of the code.

Solus Hospes · « **Reply #14 on:** August 25, 2008, 12:12:13 AM »

I really thought we had it that time but no luck. Making those changes brings my page to the far right screen where I have a horizontal scroll bar and then disappears my background picture. I am beginning to believe the error lies within my code as it was originally written to override some of the AOL profile parameters and post in front of any information placed there. Therefore, the code (while it works for websites) wasn't made for them. I am simply not yet versed enough to start over. But I am reading that site and learning.

Thanks again!

Computer Hope Forum

News:

Author Topic: HTML code to center my website (Read 52659 times)

Solus Hospes

HTML code to center my website

mcxeb52!

Re: HTML code to center my website

Solus Hospes

Re: HTML code to center my website

kpac

Re: HTML code to center my website

Solus Hospes

Re: HTML code to center my website

soybean

Re: HTML code to center my website

Solus Hospes

Re: HTML code to center my website

ChrisXPPro

Re: HTML code to center my website

Solus Hospes

Re: HTML code to center my website

soybean

Re: HTML code to center my website

ChrisXPPro

Re: HTML code to center my website

mcxeb52!

Re: HTML code to center my website

ChrisXPPro

Re: HTML code to center my website

kpac

Re: HTML code to center my website

Solus Hospes

Re: HTML code to center my website