1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

How to center a website

Discussion in 'Software Development' started by plejon, Nov 11, 2001.

Thread Status:
Not open for further replies.
Advertisement
  1. plejon

    plejon Thread Starter

    Joined:
    Jul 26, 2001
    Messages:
    671
    I would like to design a website that fits on a 640X480 screen, and that is centered horizontally on higher resolution screens.

    Samples : www.yahoo.com or www.about.com

    How can I design such a site and dynamically center it as I resize the browser window ?
     
  2. Rockn

    Rockn

    Joined:
    Jul 29, 2001
    Messages:
    21,334
    They are using tables in their code and centering the table.
     
  3. deuce868

    deuce868

    Joined:
    Nov 2, 2000
    Messages:
    637
    use a centered table and check out this site here for the adjusting sizing tutorial.
    http://www.jshook.com/flexible_pages/index.html

    You can also center layers using a dreamweaver extension if you happen to be using Dreamweaver. I haven't used it though, just heard about it.
     
  4. shelley

    shelley

    Joined:
    Nov 14, 1999
    Messages:
    612
    If you're not sure what centered table code looks like, here's an example ~

    ^center^^table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="540" VALIGN="TOP"^
    [main body of web page]
    ^/table^^/center^

    (replace ^'s for alternate <>'s)

    This code can be seen on this web page ~

    http://www.toucan.clara.co.uk/sla/welcome.html
     
  5. plejon

    plejon Thread Starter

    Joined:
    Jul 26, 2001
    Messages:
    671
    I found an easy way to center my website using frames.

    I just define three vertical frames, left, middle, right.
    I then set the width for the middle frame to the value I want for my site (E.g. 500 pixels). The width of the left and right frames is set to *. This way, the middle frame will be centered in the window of my browser and even move dynamically if I resize the browser window.

    Here's the code I used :

    < FRAMESET COLS="*,500,*">
    < FRAME SRC="border.html">
    < FRAME SRC="content.html">
    < FRAME SRC="border.html">
    < /FRAMESET>
     
  6. shelley

    shelley

    Joined:
    Nov 14, 1999
    Messages:
    612
    I used that method on two previous sites, so I know it works. Say I'm from Bedrock City, if you like, but I'm not a fan of frames and both these sites are now entirely frames-free. Anyway, glad to hear you're sorted. You've shown there's always more than one way to skin a cat.
     
  7. plejon

    plejon Thread Starter

    Joined:
    Jul 26, 2001
    Messages:
    671
    As you might have guessed, I'm not the world's most seasoned web developer.

    I am wondering why so many people are against using frames. I have heard this statement so many times, but never heard any good arguments against the frames.

    Personally, I find them very easy to set up the classic style websites with a menu on the left and content on the right. I can develop one menu page, and from that page, open content pages in the content frame.

    I haven't been able to figure out how to do this with tables. (Which certainly doesn't mean it isn't possible). So far, I have had to repeat the menu on the left on each of the content pages. That way, if I ever change the menu, I have to go through all content pages to make the change.

    So in brief, I have two open questions :
    1) what are the advantages of tables vis à vis frames ?
    2) how can I work around this menu update problem ?
     
  8. xfilesgurly

    xfilesgurly

    Joined:
    Nov 3, 2001
    Messages:
    146
    The main problems with frames include your page not being listed in search engines properly and the address in the address bar of the browser always staying the same so they don't know the exact address of the exact page they're on. Also the scroll bar in the frames will be in the middle of the screen (sort of) rather than at the side of the screen.

    What you've done with frames is *much* more complicated than using tables. The code you need (so it looks the same as you've got it with frames but without frames) is:

    &lt;DIV ALIGN="center"&gt;
    &lt;TABLE BORDER="0" WIDTH="500" CELLSPACING="0" CELLPADDING="0"&gt;
    &lt;TR VALIGN="top"&gt;
    &lt;TD&gt;

    This is a table cell - you put the content you want to be centered here.

    &lt;/TD&gt;
    &lt;/TR&gt;
    &lt;/TABLE&gt;
    &lt;DIV&gt;

    You need to use tables for lots of things in webdesigning, you can learn how to do them (basic, harder and different kinds) here: http://hotwired.lycos.com/webmonkey/authoring/tables/ or http://www.lissaexplains.com/table.shtml

    The menu thing *can* be done with tables but it means that you have to update the links on each page when you change the pages on your site, but this *can* be done in one go like with frames - http://www.lissaexplains.com/html6.shtml

    I hope this helps.
     
  9. shelley

    shelley

    Joined:
    Nov 14, 1999
    Messages:
    612
    Xfilesgurly makes some good points, especially in respect to the scroll bars (but that depends on how deep your page is).

    The menu updates can be made easier by using a HTML editor that allows 'find and replace' over a number of files (e.g. Cute HTML). If all the menus are identical then you only need to change one page.

    A drawback of frames is that you cannot go to a target within a frame from outside the frame. Try it, it doesn't work for me. And believe it or not, there are people out there who can't see frames because they are still using old browsers. Are you bothered about this?

    My advice would be to keep the pages simple and not use frames unless you really need to.
     
  10. plejon

    plejon Thread Starter

    Joined:
    Jul 26, 2001
    Messages:
    671
    Thanks a lot for the feedback.

    The SSI were new to me.
     
  11. xfilesgurly

    xfilesgurly

    Joined:
    Nov 3, 2001
    Messages:
    146
    Do you mean this:

    &lt;A HREF="page.html#gohere' TARGET="right"&gt;whatever&lt;/A&gt; (In the navigation frame)

    &lt;A NAME="gohere"&gt;whatever&lt;/A&gt; (on page.html in the frame named "right")

    ?
     
  12. shelley

    shelley

    Joined:
    Nov 14, 1999
    Messages:
    612
    The code looks familiar but in basic terms, the site had a mix of framed and non-framed pages and I couldn't get a link to jump me from an unframed page to a specific target within a framed page. The result would get me to the top of the frame but not directly to the target.

    I placed this query with the forum but nobody had a solution beyond creating ghost pages with refreshes(!) or accepting the visitor had to make two jumps. I dumped the frames.

    By the way, how did you get your code to show up in the forum? Whenever I try, it doesn't show.
     
  13. plejon

    plejon Thread Starter

    Joined:
    Jul 26, 2001
    Messages:
    671
    I was able to post HTML by inserting a space between the < and the actual tag.

    But I'm sure xfilesgurly knows a better way ...
     
  14. shelley

    shelley

    Joined:
    Nov 14, 1999
    Messages:
    612
    Ok, I've just reposted some of the code above and here is the result ~
    ~~~~~~~~~~~~~~~~~~~~~~
    [here should be xfilesgurly's the target link code]
    <A HREF="page.html#gohere' TARGET="right">whatever</A> (In the navigation frame)

    <A NAME="gohere">whatever</A> (on page.html in the frame named "right")

    ~~~~~~~~~~~~~~~~~~~~~~
    [here should be xfilesgurly's table code]
    <DIV ALIGN="center">
    <TABLE BORDER="0" WIDTH="500" CELLSPACING="0" CELLPADDING="0">
    <TR VALIGN="top">
    <TD>

    This is a table cell - you put the content you want to be centered here.

    </TD>
    </TR>
    </TABLE>
    <DIV>
    ~~~~~~~~~~~~~~~
    [here should be plejon's frame code]
    < FRAMESET COLS="*,500,*">
    < FRAME SRC="border.html">
    < FRAME SRC="content.html">
    < FRAME SRC="border.html">
    < /FRAMESET>
    ~~~~~~~~~~~~~~~~~~#
     
  15. plejon

    plejon Thread Starter

    Joined:
    Jul 26, 2001
    Messages:
    671
    I can only see my code.

    Notice there is a space between < and FRAME in my code
     
  16. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/58229

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice