Welcome to MSFN

Register now to gain access to all of our features. Once registered and logged in, you will be able to contribute to this site by submitting your own content or replying to existing content. You'll be able to customize your profile, receive reputation points as a reward for submitting content, while also communicating with other members via your own private inbox, plus much more! This message will be removed once you have signed in.


Justin90

How do you center your web page

10 posts in this topic

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

0

Share this post


Link to post
Share on other sites

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:

Edited by Tripredacus
0

Share this post


Link to post
Share on other sites

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?

0

Share this post


Link to post
Share on other sites

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

0

Share this post


Link to post
Share on other sites

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

Edited by Justin90
0

Share this post


Link to post
Share on other sites

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:

0

Share this post


Link to post
Share on other sites

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>

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.

Edited by bristols
0

Share this post


Link to post
Share on other sites

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.

Edited by blackturbokitty
0

Share this post


Link to post
Share on other sites
<style>

body {

text-align: center;

}

</style>

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".

Edited by submix8c
0

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.