Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > how to make web site align in the middle

Reply
Thread Tools

how to make web site align in the middle

 
 
ARC
Guest
Posts: n/a
 
      07-08-2009
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?

 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      07-08-2009
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
 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      07-08-2009
On 08 Jul 2009, "Jonathan N. Little" <(E-Mail Removed)> 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/
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      07-08-2009
Neredbojias wrote:
> On 08 Jul 2009, "Jonathan N. Little" <(E-Mail Removed)> 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
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      07-09-2009
On 08 Jul 2009, "Jonathan N. Little" <(E-Mail Removed)> wrote:

> Neredbojias wrote:
>> On 08 Jul 2009, "Jonathan N. Little" <(E-Mail Removed)> 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/
 
Reply With Quote
 
Adrienne Boswell
Guest
Posts: n/a
 
      07-09-2009
Gazing into my crystal ball I observed "ARC" <(E-Mail Removed)>
writing in news:OBr5m.7452$(E-Mail Removed):

> "Jonathan N. Little" <(E-Mail Removed)> wrote in message
> news:h335fs$3uu$(E-Mail Removed)-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

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      07-09-2009
ARC wrote:
> "Jonathan N. Little" <(E-Mail Removed)> wrote in message
> news:h335fs$3uu$(E-Mail Removed)-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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      07-09-2009
In article <h35or8$rdg$(E-Mail Removed)-september.org>,
"Jonathan N. Little" <(E-Mail Removed)> 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
 
Reply With Quote
 
William Gill
Guest
Posts: n/a
 
      07-09-2009
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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      07-09-2009
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

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 On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
align=middle not working in firefox ted64 Software 1 12-19-2008 09:25 PM
align my aspx page in the middle ALI-R ASP .Net 8 12-16-2004 10:39 PM
JTabbedPane can right/middle align ? Java 0 10-09-2003 09:49 AM
how to Align text left & vertical align middle Kay ASP .Net 2 07-25-2003 08:32 AM



Advertisments