Jump to content

Welcome to MSFN Forum
Register now to gain access to all of our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more. This message will be removed once you have signed in.
Login to Account Create an Account


Photo

How do you center your web page

- - - - -

  • Please log in to reply
9 replies to this topic

#1
Justin90

Justin90

    Newbie

  • Member
  • 15 posts
  • OS:Windows 7 x64
  • Country: Country Flag
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


How to remove advertisement from MSFN

#2
Tripredacus

Tripredacus

    K-Mart-ian Legend

  • Super Moderator
  • 9,766 posts
  • OS:Server 2012
  • Country: Country Flag

Donator

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, 17 November 2011 - 05:30 PM.

MSFN RULES | GimageX HTA for PE 3-5 | lol probloms
msfn2_zpsc37c7153.jpg

#3
Justin90

Justin90

    Newbie

  • Member
  • 15 posts
  • OS:Windows 7 x64
  • Country: Country Flag
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

Justin90

    Newbie

  • Member
  • 15 posts
  • OS:Windows 7 x64
  • Country: Country Flag
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

Kelsenellenelvian

    WPI Guru

  • Developer
  • 8,795 posts
  • OS:Windows 7 x64
  • Country: Country Flag
css is DEFINATLY the way to go.

#6
Justin90

Justin90

    Newbie

  • Member
  • 15 posts
  • OS:Windows 7 x64
  • Country: Country Flag
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, 17 November 2011 - 08:38 PM.


#7
Tripredacus

Tripredacus

    K-Mart-ian Legend

  • Super Moderator
  • 9,766 posts
  • OS:Server 2012
  • Country: Country Flag

Donator

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:
MSFN RULES | GimageX HTA for PE 3-5 | lol probloms
msfn2_zpsc37c7153.jpg

#8
bristols

bristols

    Advanced Member

  • Member
  • PipPipPip
  • 451 posts
  • OS:none specified
  • Country: Country Flag

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, 18 November 2011 - 12:24 PM.


#9
blackturbokitty

blackturbokitty

    Newbie

  • Member
  • 30 posts
  • OS:XP Pro x86
  • Country: Country Flag

Donator

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, 05 March 2012 - 10:55 AM.


#10
submix8c

submix8c

    Inconceivable!

  • Patrons
  • 4,263 posts
  • OS:none specified
  • Country: Country Flag

<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, 05 March 2012 - 12:24 PM.

Someday the tyrants will be unthroned... Jason "Jay" Chasteen; RIP, bro!

Posted Image





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users



How to remove advertisement from MSFN