how to make web site align in the middle

Discussion in 'HTML' started by ARC, Jul 8, 2009.

  1. ARC

    ARC Guest

    ARC, Jul 8, 2009
    #1
    1. Advertising

  2. ARC wrote:
    > can you please tell me how to make the entire web site and pages align
    > in the middle?
    > For example:
    > http://www.travelzoo.com/
    > http://www.yahoo.com/
    >
    > Any simple html commmands I can use?


    Simple CSS properties... put page elements in a containing "wrapper"
    div. And set CSS properties for 'wrapper" width to something specific
    and margins left and right to auto


    examples:

    div.wrapper { width: 80%; margin-left: auto; margin-right: auto; }

    div.wrapper { width: 35em; margin-left: auto; margin-right: auto; }


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 8, 2009
    #2
    1. Advertising

  3. ARC

    Neredbojias Guest

    On 08 Jul 2009, "Jonathan N. Little" <> wrote:

    > ARC wrote:
    >> can you please tell me how to make the entire web site and pages
    >> align in the middle?
    >> For example:
    >> http://www.travelzoo.com/
    >> http://www.yahoo.com/
    >>
    >> Any simple html commmands I can use?

    >
    > Simple CSS properties... put page elements in a containing "wrapper"
    > div. And set CSS properties for 'wrapper" width to something specific
    > and margins left and right to auto
    >
    >
    > examples:
    >
    > div.wrapper { width: 80%; margin-left: auto; margin-right: auto; }
    >
    > div.wrapper { width: 35em; margin-left: auto; margin-right: auto; }


    Also for wrapper interior contents set text-align:center;

    --
    Neredbojias
    http://www.neredbojias.org/
    http://www.neredbojias.net/
     
    Neredbojias, Jul 8, 2009
    #3
  4. Neredbojias wrote:
    > On 08 Jul 2009, "Jonathan N. Little" <> wrote:
    >
    >> ARC wrote:
    >>> can you please tell me how to make the entire web site and pages
    >>> align in the middle?
    >>> For example:
    >>> http://www.travelzoo.com/
    >>> http://www.yahoo.com/
    >>>
    >>> Any simple html commmands I can use?

    >> Simple CSS properties... put page elements in a containing "wrapper"
    >> div. And set CSS properties for 'wrapper" width to something specific
    >> and margins left and right to auto
    >>
    >>
    >> examples:
    >>
    >> div.wrapper { width: 80%; margin-left: auto; margin-right: auto; }
    >>
    >> div.wrapper { width: 35em; margin-left: auto; margin-right: auto; }

    >
    > Also for wrapper interior contents set text-align:center;
    >



    Only if you want the text centered as well. As per examples OP gave this
    did not seem to be desired.... but was common with the ol' GeoCities
    Scroll-O-Death sites.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 8, 2009
    #4
  5. ARC

    Neredbojias Guest

    On 08 Jul 2009, "Jonathan N. Little" <> wrote:

    > Neredbojias wrote:
    >> On 08 Jul 2009, "Jonathan N. Little" <> wrote:
    >>
    >>> ARC wrote:
    >>>> can you please tell me how to make the entire web site and pages
    >>>> align in the middle?
    >>>> For example:
    >>>> http://www.travelzoo.com/
    >>>> http://www.yahoo.com/
    >>>>
    >>>> Any simple html commmands I can use?
    >>> Simple CSS properties... put page elements in a containing
    >>> "wrapper" div. And set CSS properties for 'wrapper" width to
    >>> something specific and margins left and right to auto
    >>>
    >>>
    >>> examples:
    >>>
    >>> div.wrapper { width: 80%; margin-left: auto; margin-right: auto; }
    >>>
    >>> div.wrapper { width: 35em; margin-left: auto; margin-right: auto; }

    >>
    >> Also for wrapper interior contents set text-align:center;
    >>

    >
    >
    > Only if you want the text centered as well. As per examples OP gave
    > this did not seem to be desired.... but was common with the ol'
    > GeoCities Scroll-O-Death sites.


    Text and images - any inline stuff. Whatever the case may be, it's
    easy enough to try the css out and adjust it to suit.

    --
    Neredbojias
    http://www.neredbojias.org/
    http://www.neredbojias.net/
     
    Neredbojias, Jul 9, 2009
    #5
  6. Gazing into my crystal ball I observed "ARC" <>
    writing in news:OBr5m.7452$:

    > "Jonathan N. Little" <> wrote in message
    > news:h335fs$3uu$-september.org...
    >>>> examples:
    >>>>
    >>>> div.wrapper { width: 80%; margin-left: auto; margin-right: auto; }
    >>>>
    >>>> div.wrapper { width: 35em; margin-left: auto; margin-right: auto; }
    >>>
    >>> Also for wrapper interior contents set text-align:center;
    >>>

    >>
    >>
    >> Only if you want the text centered as well. As per examples OP gave
    >> this did not seem to be desired.... but was common with the ol'
    >> GeoCities Scroll-O-Death sites.
    >>
    >> --
    >> Take care,
    >>
    >> Jonathan
    >> -------------------
    >> LITTLE WORKS STUDIO
    >> http://www.LittleWorksStudio.com

    >
    >
    > No, we do not wish the text centered. Only the web page is centered.
    > Yes, same as this too: http://geocities.yahoo.com/


    As others have said, use a wrapper.

    > Please tell me how do I do it?
    ><body>
    > --------site align in center of web page----
    ></body>


    No, you don't want to do this on the page itself, you want to use an
    external stylesheet, eg:

    #wrapper {margin-left:10%; margin-right:10%; border:1px solid #c0c0c0;}

    And in your page:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body>
    <div id="wrapper">
    ...
    </div>
    </body>
    </html>


    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Jul 9, 2009
    #6
  7. ARC wrote:
    > "Jonathan N. Little" <> wrote in message
    > news:h335fs$3uu$-september.org...
    >>>> examples:
    >>>>
    >>>> div.wrapper { width: 80%; margin-left: auto; margin-right: auto; }
    >>>>
    >>>> div.wrapper { width: 35em; margin-left: auto; margin-right: auto; }
    >>>
    >>> Also for wrapper interior contents set text-align:center;
    >>>

    >>
    >>
    >> Only if you want the text centered as well. As per examples OP gave
    >> this did not seem to be desired.... but was common with the ol'
    >> GeoCities Scroll-O-Death sites.
    >>


    >
    > No, we do not wish the text centered. Only the web page is centered.
    > Yes, same as this too: http://geocities.yahoo.com/
    > Please tell me how do I do it? <body>
    > --------site align in center of web page----
    > </body>


    I just did!


    CSS:

    div.wrapper { width: 80%; margin-left: auto; margin-right: auto; }

    HTML

    <body>
    <div class="wrapper">
    <h1>Your Page</h1>
    <p>The rest of your content...</p>
    ....

    </div> <!-- end of div "wrapper" -->
    </body>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 9, 2009
    #7
  8. ARC

    dorayme Guest

    In article <h35or8$rdg$-september.org>,
    "Jonathan N. Little" <> wrote:

    > ARC wrote:

    ....
    > > No, we do not wish the text centered. Only the web page is centered.
    > > Yes, same as this too: http://geocities.yahoo.com/
    > > Please tell me how do I do it? <body>
    > > --------site align in center of web page----
    > > </body>

    >
    > I just did!
    >
    >
    > CSS:
    >
    > div.wrapper { width: 80%; margin-left: auto; margin-right: auto; }
    >
    > <div class="wrapper">
    > <h1>Your Page</h1>
    > <p>The rest of your content...</p>
    > ...
    >
    > </div> <!-- end of div "wrapper" -->


    And in addition, put a strict doctype on your HTML.

    And add

    ..wrapper {text-align: left;}

    if you are having any trouble with text not lefting.

    --
    dorayme
     
    dorayme, Jul 9, 2009
    #8
  9. ARC

    William Gill Guest

    Jonathan N. Little wrote:
    > ARC wrote:
    >> No, we do not wish the text centered. Only the web page is centered.
    >> Yes, same as this too: http://geocities.yahoo.com/
    >> Please tell me how do I do it? <body>
    >> --------site align in center of web page----
    >> </body>

    >
    > I just did!
    >
    >
    > CSS:
    >
    > div.wrapper { width: 80%; margin-left: auto; margin-right: auto; }
    >
    > HTML
    >
    > <body>
    > <div class="wrapper">
    > <h1>Your Page</h1>
    > <p>The rest of your content...</p>
    > ...
    >
    > </div> <!-- end of div "wrapper" -->
    > </body>
    >


    I believe the same effect can be achieved by styling the <body> tag
    directly (w/o a wrapper). i.e.
    body { width: 80%; margin-left: auto; margin-right: auto; }
    vice
    div.wrapper { width: 80%; margin-left: auto; margin-right: auto; }

    OP if you are not doing much other styling you can add this via a
    <style> tag, or the style attribute of the <body> tag. A basic CSS
    tutorial should acquaint you with the hows.

    --
    Bill
     
    William Gill, Jul 9, 2009
    #9
  10. dorayme wrote:

    > And in addition, put a strict doctype on your HTML.
    >


    Absolutely

    > And add
    >
    > .wrapper {text-align: left;}
    >
    > if you are having any trouble with text not lefting.
    >


    Should not be a issue unless one tried the misguided approach of
    centering blocks with the text-align property.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 10, 2009
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kay
    Replies:
    2
    Views:
    7,190
  2. ALI-R

    align my aspx page in the middle

    ALI-R, Dec 16, 2004, in forum: ASP .Net
    Replies:
    8
    Views:
    7,248
    Ken Dopierala Jr.
    Dec 16, 2004
  3. Guest
    Replies:
    0
    Views:
    837
    Guest
    Oct 9, 2003
  4. tshad

    text-align vs align

    tshad, Jun 23, 2005, in forum: HTML
    Replies:
    1
    Views:
    1,278
    David Dorward
    Jun 23, 2005
  5. Paul Lautman

    left align within centre align

    Paul Lautman, Mar 3, 2006, in forum: HTML
    Replies:
    3
    Views:
    583
    Paul Lautman
    Mar 3, 2006
Loading...

Share This Page