How do you center your web page

#1 Justin90

Newbie

Group: Members
Posts: 15
Joined: 14-November 11
OS:Windows 7 x64
Country:

Posted 17 November 2011 - 01:18 PM

buyatvsonline.com

That's what I'm trying to make it center like... i want the whole page to be centered, nothing left aligned.

I've googled several pages telling me how to do this but apparently I cant get it right.

Can someone show me how to do this? where to place the code etc... I'm trying to learn HTML and this is something I want to do before I proceed with other things like designing the rest of my website.

I'd really appreciate it, thanks

#2 Tripredacus

K-Mart-ian Legend

Group: Super Moderator
Posts: 7,349
Joined: 28-April 06
OS:Windows 7 x86
Country:

Posted 17 November 2011 - 05:28 PM

Presuming you're using div as containers, and as an example your div is called 'content' then this CSS is all you need:

#content {
margin: 0px auto;
}

EDIT: You ARE using a containing DIV (holder) and ALREADY have the the appropriate centering code in your CSS for that object. :rolleyes:

This post has been edited by Tripredacus: 17 November 2011 - 05:30 PM

#3 Justin90

Newbie

Group: Members
Posts: 15
Joined: 14-November 11
OS:Windows 7 x64
Country:

Posted 17 November 2011 - 07:24 PM

How do I apply that css code though? I'm not sure I'm doing this right...

here is my code so far.

<html>
<head><title> removed for forum purposes </title><meta name="description" content="removed for forum purposes" /><meta name="keywords" content="removed for forum purposes" /><meta name="robots" content="index, follow"><meta name="revisit-after" content="2 month"> <link rel="stylesheet" type="text/css" href="stylesheet-css.txt"></head>

<Body><div id="wrapper"><table bgcolor="#92B7CB" border="10" width="100%" cellspacing="0" cellpadding="0" ><tr><td bgcolor="#92B7CB" valign="middle">
<img src="../images/openbanner.jpg" Height="150" Width="1000" ALT="removed for forum purposes" />
</div></body>
</html>
_________

ok with that bit being shown as that is...

I have
*{
margin:0;
padding:0;
}

body{
text-align:center; /*For IE6 Shenanigans*/
}

#wrapper{
width:960px;
magin:0 auto;
text-align:left;
}
saved in to a text document, named stylesheet.txt

...

What am I doing wrong?

#4 Justin90

Newbie

Group: Members
Posts: 15
Joined: 14-November 11
OS:Windows 7 x64
Country:

Posted 17 November 2011 - 08:10 PM

I got it to center at 100% using HTML code, but as I expected, it looks bad unless the window is full screen. This is what I did.

<div id="wrapper" style="
width: 1000px;
height: 150px;
margin-left: 250px;
margin-right: 150px;
"><table bgcolor="#92B7CB" border="10" width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td bgcolor="#92B7CB" valign="middle">
<img src="../images/openbanner.jpg" height="150" width="1000" alt="removed for forum">

</td></tr></tbody></table></div>

Is there a way to alter this to make it where it will go center and not be off when not full screen, or does it have to be css to do it that way

#5 Kelsenellenelvian

WPI Guru

Group: Developers
Posts: 7,756
Joined: 18-September 03
OS:Windows 7 x64
Country:

Posted 17 November 2011 - 08:22 PM

css is DEFINATLY the way to go.

#6 Justin90

Newbie

Group: Members
Posts: 15
Joined: 14-November 11
OS:Windows 7 x64
Country:

Posted 17 November 2011 - 08:35 PM

Yeah I know that now after researching but I can not figure this out... I don't understand why it isn't working. I wish some coding wiz could help me out

This post has been edited by Justin90: 17 November 2011 - 08:38 PM

#7 Tripredacus

K-Mart-ian Legend

Group: Super Moderator
Posts: 7,349
Joined: 28-April 06
OS:Windows 7 x86
Country:

Posted 18 November 2011 - 10:20 AM

Are you making some new website or something? The one you put in your first post is already coded to center the page content. I'm wondering what you're trying to accomplish here. :unsure:

#8 bristols

Advanced Member

Group: Members
Posts: 449
Joined: 24-September 05
OS:none specified
Country:

Posted 18 November 2011 - 12:22 PM

Justin90, on 17 November 2011 - 07:24 PM, said:

How do I apply that css code though? I'm not sure I'm doing this right...

here is my code so far.

<html>

First things first - to avoid variations in how your page displays across different browsers, every HTML page you create should start with something called a DOCTYPE. A DOCTYPE just tells the browser that it should expect your page's code to be written according to a certain standard. See, not all HTML is the same - at least, it can be written according to different standards. There's more than one standard of HTML, and so there are a number of different DOCTYPEs to match. Use a search engine to search for "html doctypes". Below, I've chosen a Transitional DOCTYPE that hopefully will suit your needs. The 'DOCTYPE declaration' should be the first line of HTML code for each of your pages, coming before even the HTML element:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Actually this is an XHTML DOCTYPE. When using this kind of DOCTYPE the HTML element should look like this:

<html xmlns="http://www.w3.org/1999/xhtml">

rather than just

<html>

Justin90, on 17 November 2011 - 07:24 PM, said:

saved in to a text document, named stylesheet.txt

Whoa there - CSS files must end with the .css file extension, not .txt or anything else. Save your stylesheet.txt file as a CSS file, so that it's called stylesheet.css instead.

OK, below is the code for your example HTML file, and it's accompanying CSS file. Hopefully it solves your problem. (By the way, I've added some filler content to the HTML):

HTML file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title> removed for forum purposes </title>
	<meta name="description" content="removed for forum purposes" />
	<meta name="keywords" content="removed for forum purposes" />
	<meta name="robots" content="index, follow" />
	<meta name="revisit-after" content="2 month" />
	<link rel="stylesheet" type="text/css" href="stylesheet.css" />
	<style type="text/css">
	</style>
</head> 

<body>

<div id="wrapper">

<p>blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... </p>
<p>blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... </p>
<p>blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... </p>

</div>

</body>
</html>

CSS file

*{
margin:0;
padding:0;
}

body{
text-align:center; /*For IE6 Shenanigans*/
}

#wrapper{
width:960px;
margin:0 auto;
text-align:left;
}

Note that the link in the head part of the HTML to your CSS file has been updated to reflect the fact that your CSS file should end with the .css file extension.

This post has been edited by bristols: 18 November 2011 - 12:24 PM

#9 blackturbokitty

Newbie

Group: Members
Posts: 30
Joined: 09-January 11
OS:XP Pro x86
Country:

Posted 05 March 2012 - 10:52 AM

A very simple way of doing this is put this in the head of your HTML file

<style>

body {
text-align: center;
}
</style>

It should align all the elements on the page. This should help you if all you're looking for is to learn the basics.

This post has been edited by blackturbokitty: 05 March 2012 - 10:55 AM

#10 submix8c

Systems Annihilist

Group: Members
Posts: 1,828
Joined: 14-September 05
OS:none specified
Country:

Posted 05 March 2012 - 12:22 PM

blackturbokitty, on 05 March 2012 - 10:52 AM, said:

CSS=Cascading Style Sheet (see previous post). Read up on the more useful CSS and DIV methodology. Although I agree with the stmt "very simple way"...

p.s. Nov 2011? I believe this has already been "solved".

This post has been edited by submix8c: 05 March 2012 - 12:24 PM

MSFN Forum: How do you center your web page - MSFN Forum