Username:

Password:

Pages: [1] 2

Author Topic: Centering web page  (Read 2433 times)

InternetPrezentacija

  • Newbie
  • *
  • Karma: +0/-0
  • Posts: 9
    • WWW
Centering web page
« on: August 08, 2009, 02:49:48 AM »
How to center my web page horizontally in web browser window. Which is the best method?
Logged
Kvalitetna izrada web internet prezentacija Srbija je funkcionalna kada je izrada web internet prezentacija Novi Sad Srbija u pitanju na informativno zaglavlje, delatnost firme

chase

  • WebDes1gn Staff
  • Administrator
  • Full Member
  • *****
  • Karma: +100/-0
  • Posts: 110
    • WWW
Re: Centering web page
« Reply #1 on: August 08, 2009, 12:08:15 PM »
CSS


parent container with a margin: 0 auto;
Logged
cha2e.com | chaseHOSTING.com | chaseIDEAS | chaseMOBILE | NoCostBlog.com | SanDiegoBiz.net

soumali

  • Newbie
  • *
  • Karma: +0/-0
  • Posts: 2
Re: Centering web page
« Reply #2 on: September 15, 2009, 01:51:27 AM »
This is a very simple thing to do with CSS. Here's all you need:

<body>  <div id="wrapper">   ...  </div> </body>
In this example, the div with the id of "wrapper" is what we want to make centered and fixed width. Now for the CSS:


body {  margin: 0;  padding: 0;  text-align: center; } #wrapper {  margin: 0 auto;  border: 1px solid red;  padding: 0;  width: 720px;  text-align: left; }
Then within your wrapper, just fill it in with your content. Hope that helps.






Web Site Promotions
Logged

chase

  • WebDes1gn Staff
  • Administrator
  • Full Member
  • *****
  • Karma: +100/-0
  • Posts: 110
    • WWW
Re: Centering web page
« Reply #3 on: September 18, 2009, 01:07:35 PM »
Great code example soumali!
Logged
cha2e.com | chaseHOSTING.com | chaseIDEAS | chaseMOBILE | NoCostBlog.com | SanDiegoBiz.net

seomayuri

  • Newbie
  • *
  • Karma: +0/-0
  • Posts: 2
Re: Centering web page
« Reply #4 on: October 20, 2009, 09:21:42 PM »
Another method is also here,

when you are using tables,
<body>
<table align=center width=800 border=0><tr><td><h1> Webpages in center</h1></td></tr></table>
</body>
Logged

danidallia123

  • Newbie
  • *
  • Karma: +0/-0
  • Posts: 1
Re: Centering web page
« Reply #5 on: May 17, 2010, 11:06:16 PM »
The mark up is simple and consists of two structural divs - one container div, and another to hold.

1   <div id="outer">
2     <div id="inner">
3       [content here]
4     </div>
5   </div>

The CSS:

01   #outer {
02     position: absolute;
03     top: 50%;
04     left: 0px;
05     width: 100%;
06     height: 1px;
07     overflow: visible;
08   }
09   
10   #inner {
11     width: 300px;
12     height: 200px;
13     margin-left: -150px;  /***  width / 2   ***/
14     position: absolute;
15     top: -100px;          /***  height / 2   ***/
16     left: 50%;
17   }

Web Design Chennai
Logged

regueradela

  • Newbie
  • *
  • Karma: +0/-0
  • Posts: 5
Re: Centering web page
« Reply #6 on: July 12, 2010, 02:34:14 AM »
You can also put like this way for center page.

<head>
</head>
<title>
<body bgcolor="#111111" leftmargin="40">
<center>
<table id="Table_2" width="766" height="780" border="1" cellpadding="1.5" cellspacing="1">
</title>..
« Last Edit: July 21, 2010, 01:19:17 AM by regueradela »
Logged
r4i sdhc

burton71stephens

  • Newbie
  • *
  • Karma: +0/-0
  • Posts: 1
Re: Centering web page
« Reply #7 on: August 17, 2010, 02:14:38 AM »
Quote from: soumali on September 15, 2009, 01:51:27 AM
This is a very simple thing to do with CSS. Here's all you need:

<body>  <div id="wrapper">   ...  </div> </body>
In this example, the div with the id of "wrapper" is what we want to make centered and fixed width. Now for the CSS:


body {  margin: 0;  padding: 0;  text-align: center; } #wrapper {  margin: 0 auto;  border: 1px solid red;  padding: 0;  width: 720px;  text-align: left; }
Then within your wrapper, just fill it in with your content. Hope that helps.






Web Site Promotions


@soumali.....grttt code
Logged
SEO hosting

MichMu

  • Newbie
  • *
  • Karma: +0/-0
  • Posts: 10
Re: Centering web page
« Reply #8 on: September 30, 2010, 07:42:45 AM »
<div align="center">
  This is some text!
</div>

or

<html>
<body>

<p>This is a paragraph. This text has no alignment specified.</p>

<div style="text-align:center;border:1px solid red">
This is some text in a div element!
</div>

<p>This is a paragraph. This text has no alignment specified.</p>

</body>
</html>
Logged

Santosbulus

  • Newbie
  • *
  • Karma: +0/-0
  • Posts: 38
Re: Centering web page
« Reply #9 on: December 10, 2010, 10:26:08 PM »
Centering anything requires setting a width less than 100% for the container. Example:

body
{
width: 950px;
height: 600px;
margin: 0 auto;
background: #fff url(path to non-tiled image) no-repeat center scroll;
}

Change parameters as you need. Set "#fff" to background color you want.Set "scroll" to "fixed" if you want page contents to scroll over background image.
Logged
Web design chennai

gloriatrstn

  • Newbie
  • *
  • Karma: +0/-0
  • Posts: 4
Re: Centering web page
« Reply #10 on: December 13, 2010, 12:54:44 AM »
This way you can create center web page horizontally in web browser window,
<html>
<title>
<body leftmargin="40">
<center>
<table id="Table_2" width="100" height="100" border="1" cellpadding="1.5" cellspacing="1"></center>
</title>
</html>
Logged
Association Property Management

waitely

  • Newbie
  • *
  • Karma: +0/-0
  • Posts: 20
Re: Centering web page
« Reply #11 on: December 22, 2010, 11:34:19 PM »
This box is horizontally centered by setting its right and left margin widths to "auto". This is the preferred way to accomplish horizontal centering with CSS, and works very well in most browsers with CSS2 support. Unfortunately, IE5/Win does not respond to this method - a shortcoming of that browser, not the technique.

There is a simple workaround. (A pause while you fight back the nausea induced by that word.) Ready? IE5/Win incorrectly applies the CSS "text-align" attribute to block-level elements. Declaring "text-align:center" for the containing block-level element (often the BODY element) horizontally centers the box in IE5/Win. There is a side effect of this workaround: the CSS "text-align" attribute is inherited, centering inline content. It is often necessary to explicitly set the "text-align" attribute for the centered box, counteracting the effects of the IE5/Win workaround. The relevant CSS follows.

body {
   margin:50px 0px; padding:0px;
   text-align:center;
   }
   
#Content {
   width:500px;
   margin:0px auto;
   text-align:left;
   padding:15px;
   border:1px dashed #333;
   background-color:#eee;
   }

Web design chennai
Logged

vancuper

  • Newbie
  • *
  • Karma: +0/-0
  • Posts: 5
Re: Centering web page
« Reply #12 on: February 09, 2011, 11:44:44 PM »
I seen this Centering web page Post, After saw this Centering web page Post, I searched about Centering web page and Getting the Positive Knowledge about Centering web page.
Logged
Canadian Pharmacy

danialjonn

  • Newbie
  • *
  • Karma: +0/-0
  • Posts: 5
Re: Centering web page
« Reply #13 on: March 26, 2011, 11:59:55 AM »
This box is angular centered by ambience its appropriate and larboard allowance widths to "auto". This is the adopted way to achieve accumbent absorption with CSS, and works actual able-bodied in a lot of browsers with CSS2 support.
Logged
rising damp

wiliammoore

  • Newbie
  • *
  • Karma: +0/-0
  • Posts: 5
Re: Centering web page
« Reply #14 on: June 06, 2011, 10:40:43 PM »
This is amazing topic, because it is very interesting topic. There are great knowledge about creating a fantastic web page with good look.
Logged
3m 6800 full face respirator
Pages: [1] 2