CSS Center Body + C&C

DoFoT9 · Sep 11, 2009

Hello all,

I am creating a small business that services computers. Here is the website. I am having problems centering the entire <body> contents of the webpage. I have tried many methods but have been unsuccessful. Is something like this correct?

Code:

body {
  background-color: #5a5a5a;
  margin: 0px auto;
  align: center;

}

Is it even possible to center the whole body?

If you have any C&C that would be greatly appreciated too

OH: I just put <center></center> around the <body> tags, is this acceptable? This is good, however it would mean that I have to change every webpage

Any alternatives?

Thanks in advance for everything

DoFoT9

Note:If you are having troubles seeing the source code, navigate to glitches.is-a-geek.com (The website currently resolves to a website which is again resolved to my host computer - don't ask why, it wont be implemented this way for long). *ignore this, it will no longer work*

design-is · Sep 11, 2009

Whoa... No, don't go putting <center> outside your <body> tag...

Html pages go (roughly):

HTML:

<!DOCTYPE whatever you use>
<html>
   <head>
         ....head stuff, meta, title, stylesheets, scripts ect....
   </head>
   <body>
         ....visible page stuff (marked up semantically, not containing 
         style instructions or presentational data) and tracking code 
         script if used....
   </body>
</html>

You shouldn't have anything between your </head> and <body> tags.

To centre your <body>, give it a width and use auto margins. Use text-align to ensure browser support. align on it's own isn't a valid CSS property. (Also, you don't use px after 0, only use px if you've entered a value)

For example, try:

Code:

body {
  background-color: #5a5a5a;
  margin: [B]0[/B] auto;
  [B]text-[/B]align: center;
  [B]width:780px;[/B]
}

Let us know how you get on!

You could also do with looking at designing without tables - CSS layouts are the current, and future, standard.

/Doug

DoFoT9 · Sep 11, 2009

design-is said:
Whoa... No, don't go putting <center> outside your <body> tag...

Html pages go (roughly):

HTML:

<!DOCTYPE whatever you use> <html> <head> ....head stuff, meta, title, stylesheets, scripts ect.... </head> <body> ....visible page stuff (marked up semantically, not containing style instructions or presentational data) and tracking code script if used.... </body> </html>

You shouldn't have anything between your </head> and <body> tags.

firstly, thanks! i am not very "in the know" with html formatting etc, so thanks for not flaming.

Code:
To centre your <body>, give it a width and use auto margins. Use text-align to ensure browser support. 'align' on it's own isn't a valid CSS property. (Also, you don't use 'px' after 0, only use 'px' if you've entered a value)

For example, try:

Code:

body { background-color: #5a5a5a; margin: [B]0[/B] auto; [B]text-[/B]align: center; [B]width:780px;[/B] }

Let us know how you get on!

the width is not set in the body, it is set in the tables that are inside of the body..

using CSS failed to change the widths/alignment as everything is set in the tables (would correctly changing the body make the tables follow suit? im guessing so as the tables inherit the settings)

You could also do with looking at designing without tables - CSS layouts are the current, and future, standard.

/Doug

i will, thank you very much for your input. after dinner i will try your suggestions and get back

your help is appreciated greatly.

DoFoT9

Dunmail · Sep 11, 2009

Try this:

Code:

html>
<head>
<style type="text/css">
body {
	margin:50px 0px; padding:0px;
	text-align:center;
	}
	
#Content {
	width:400px;
	margin:0px auto;
	text-align:left;
	padding:15px;
       color:#fff;
	background-color:#00c;	}

</style>
</head>
<body>
<div id="content">
<p>Our Mission: To provide the best services at the cheapest prices possible. Here at 
GLITCHES you will be greeted with a smile and recieve one-on-one personal interaction 
whilst being insilled with the confidence to believe that your problems will be solved 
as quickly as possible. We hope you enjoy our services. </p>
</div>
</body>
</html>

Basically setting the left and right margins to auto does what you want. text-align:center gets inherited by child containers so if you need left or right justified text somewhere then change for that element.

DoFoT9 · Sep 11, 2009

Dunmail said:
Try this:

*code*

Basically setting the left and right margins to auto does what you want. text-align:center gets inherited by child containers so if you need left or right justified text somewhere then change for that element.

right, but i want the whole webpage to be centered (and on each page *sigh*), not just the text on the page or a div - i want to make each table centered (or preferably the whole set of tables).

thanks alot though i will try to implement it

if i am missing something blatantly obvious im sorry.

Dunmail · Sep 11, 2009

DoFoT9 said:
right, but i want the whole webpage to be centered (and on each page *sigh*), not just the text on the page or a div - i want to make each table centered (or preferably the whole set of tables).

thanks alot though i will try to implement it if i am missing something blatantly obvious im sorry.

Yes you are

The text-align property is inherited by inline elements so if you apply it to the body tag then everything inside gets it as well - you don't have to keep applying it to enclosed elements. http://www.w3schools.com/CSS/pr_text_text-align.asp

In the case of block elements like tables then you need to do the margin:auto trick.

table.centre {margin-left:auto; margin-right:auto;}

leading to

<table class="centre">
...
</table>

Meant to say that the best (or least confusing) way to use CSS is to start simple. I'd also get a decent reference book.

I have the major browsers: IE, Firefox, Opera, Safari, Chrome and check things in all if them - usually you have to add tweeks for IE

Then it's a cycle of develop, validate, test.

I'm not sure of the Australian accessibility laws but since this is for a business you may have some legal guidelines to follow as well.

Why are you using tables for layout BTW?

DoFoT9 · Sep 11, 2009

duuh i knew i was missing something, sorry for my idiocy.

i will be testing in all web browsers, IE ironically is the most difficult to use yet the most common

grr.

as i am using a .com domain name there are not as many legal issues associated with it. ive checked out most of the things and ive made sure im doing it right. (too technical and not fused about it atm).

i am using tables as i am using a template (obviously because i am not educated enough to do it myself), they must have done it in the most easiest way possible.

i will try the <table class="centre"> trick and see how i go.

thanks again

DoFoT9 · Sep 11, 2009

well, the <table class=centre"> method has worked

if you check out the homepage it is perfect

i am completely happy with it now.

thank you to design-is and dunmail for your great help and guidance!!

are there any suggestions? does the website seem usable enough for most users? i hope its not too bad

thanks again!

DoFoT9

Sdashiki · Sep 11, 2009

DoFoT9 said:
are there any suggestions? does the website seem usable enough for most users? i hope its not too bad

Start the code over. Dont redesign the site, it looks good so far.

BUT: dont use tables for your layout. (google table vs css and go to town)

CSS is way more powerful when it comes to making your page look the way you want. Youll have a good site and also learned alot along the way. Learning THIS way to make a site (tables) puts you far behind the current trend(s).

design-is · Sep 11, 2009

Hi DoFoT9

I'm glad you've found a solution

Just so you know, my solution would have done the trick and you wouldn't have had to apply the class="centre" to every table. You would have simple had to enter my code into your css file.

What you have done is equally valid, using the same method as I have you have used the tables (which already have the width fixed) and told them to auto margin left and right. You have simple had to go through tagging each table as 'center'. Using the body method I suggested would have avoided messing with the HTML and adding presentational class names.

I hope that makes sense... feel free to ask questions if not

And you will always find IE is the hardest to cater for. Microsoft don't have a habit of making things easy lol

With regard to the design, I think it works well! Maybe reduce the line length on the 'About Us' page to increase readability. Also, the images on the 'Contact Us' are a bit dodgy looking and the text if fuzzy. I'd consider just using text. Otherwise its pretty nice! As Sdashiki said though, the code needs looking at.

Cheers

/Doug

DoFoT9 · Sep 11, 2009

Sdashiki said:
Start the code over. Dont redesign the site, it looks good so far.

starting over is a good idea, then it means that i will know all of the code (its a template i found). im glad you like the look of it. of all the templates i searched through this one was the most usable/attractive/customisable.

BUT: dont use tables for your layout. (google table vs css and go to town)

i had no idea they were that bad. i just modified the version that i had. im no CSS expert so i hope i can manage it

CSS is way more powerful when it comes to making your page look the way you want. Youll have a good site and also learned alot along the way. Learning THIS way to make a site (tables) puts you far behind the current trend(s).

good to know. what about the whole iFrame thing, are they current and seen as professional? i know CSS is MUCH easier to do once you set it all up.

thanks for clarifying

design-is said:
Hi DoFoT9

I'm glad you've found a solution

Just so you know, my solution would have done the trick and you wouldn't have had to apply the class="centre" to every table. You would have simple had to enter my code into your css file.

thanks for replying. sorry for not attempting to use your method.

i didnt know getting rid of the "px" made such a difference!

What you have done is equally valid, using the same method as I have you have used the tables (which already have the width fixed) and told them to auto margin left and right. You have simple had to go through tagging each table as 'center'. Using the body method I suggested would have avoided messing with the HTML and adding presentational class names.

well yes, i took the long road. i added the class tag into each table attribute. it took a good while.

I hope that makes sense... feel free to ask questions if not

makes perfect sense really, i have done html courses at university (and passed thankfully) - but coding/programming is not my thing and i just cannot get my head around it (ask me anything hardware/software/network wise and i will answer it thought).

And you will always find IE is the hardest to cater for. Microsoft don't have a habit of making things easy lol

its very frustrating!! i have yet to test my website on IE as its still just getting all of the layout and whatnot together.

With regard to the design, I think it works well! Maybe reduce the line length on the 'About Us' page to increase readability. Also, the images on the 'Contact Us' are a bit dodgy looking and the text if fuzzy. I'd consider just using text. Otherwise its pretty nice! As Sdashiki said though, the code needs looking at.

Cheers

/Doug

thanks for the +ve/-ve comments! greatly appreciated!

the "Contact Us" images are basically what our business cards look like. i was trying to keep it looking identical but it doesnt fit the design at all

i might try to redesign the cards and then see if that makes it any better. it probably wont so i will eventually just resort to text.

its a pain in the butt trying to make images small, thats why its fuzzy. stupid people with slow internet

i will most definitely re-code the website after what everyone has taught me. tables = nono! it will take some time though, uni is getting very taxing. i have my holidays in about 8 weeks so i will get it done then. hopefully people can stand it until then eh?

thanks once again for your input.

DoFoT9

DaReal_Dionysus · Sep 12, 2009

Just make a container or wrapper per say and center it.

#wrapper {
width: 1024px;
margin-right: auto;
margin-left: auto;
}

DoFoT9 · Sep 12, 2009

neonfluxx said:
Just make a container or wrapper per say and center it.

#wrapper {
width: 1024px;
margin-right: auto;
margin-left: auto;
}

That would work great! when i recode it i will probably end up with something like that to manage it. Thanks for your input mate.

What is everybodies look on flash menu bars? I am thinking of making the top menu bar into a flash object that has a little underline that follows the mouse to the link that you click. The only problem is i dont know how to keep the little line under the correct link when the page loads

design-is · Sep 12, 2009

Depends on your stance on flash. A lot of web designers / developers see flash as a bad thing, often used unnecessarily. As do I.

When used properly, it's great, but using it for frivolous reasons (as mentioned here) if frowned upon. Having a flash menu bar will add a bit of sparkly, but be detrimental to your SEO, accessibility, and usability. Cons out-weigh the pros.

Flash can be pretty good, if done properly, made indexible and accessible, but as you're just starting out, it's probably best if you concentrate your efforts on getting the code right before you start looking at how to get flash right

Don't mean to seem harsh, but one thing at a time!

/Doug

DoFoT9 · Sep 12, 2009

doug, thanks for your wise words. I knew flash was more for 'artsy' type thing, just thought id give it a go and see the reaction. but you are right, i have been considering how to do it and it seems quite hard. it really wouldnt effect the current interface though and i think it would add a little bit of 'pazaz' to the somewhat bland website. I can upload a preview of what im talking about if need be. Thanks again

DoFoT9 · Sep 13, 2009

IE Problem

Hey all,

slight problem (see image). the very right <tr> tag likes to stuff up on IE.

Code:

<tr>
<td valign="top" width="68%">
<td align="right" valign="right" width="32%"></td>
</tr>

that is basically the code...

any ideas? (yes i know, recode needed) haha.

safari dev using IE doesnt see it as a problem, but my two VMs clearly do

also: if anybody wants to C&C the "flash" menu that i put on, its very simple and i dont think its too over the top. i have yet to put it on all the other pages.

Dunmail · Sep 13, 2009

DoFoT9 said:
Hey all,

slight problem (see image). the very right <tr> tag likes to stuff up on IE.

Code:

<tr> <td valign="top" width="68%"> <td align="right" valign="right" width="32%"></td> </tr>

Shouldn't the valign (vertical alignment) in the second cell be "top" rather than right? May also be worth removing the width statement from the second cell.

DoFoT9 · Sep 13, 2009

Dunmail said:
Shouldn't the valign (vertical alignment) in the second cell be "top" rather than right? May also be worth removing the width statement from the second cell.

im not sure lol thats why i am asking here

i will try it now. thanks heaps

DoFoT9 · Sep 13, 2009

hmm im afraid that did nothing at all. damn.

Cerebrus' Maw · Sep 13, 2009

DoFoT9 said:
Hey all,

slight problem (see image). the very right <tr> tag likes to stuff up on IE.

Code:

<tr> <td valign="top" width="68%"> <td align="right" valign="right" width="32%"></td> </tr>

If I'm seeing this right, you haven't closed the first <td> tag

Code:

<tr>
<td valign="top" width="68%">[B]</td>[/B]
<td align="right" valign="[B]top[/B]" width="32%"></td>
</tr>

DoFoT9 · Sep 13, 2009

Cerebrus' Maw said:
If I'm seeing this right, you haven't closed the first <td> tag

Code:

<tr> <td valign="top" width="68%">[B]</td>[/B] <td align="right" valign="[B]top[/B]" width="32%"></td> </tr>

you are seeing it right yes, but i quickly re-wrote the code - its not copy/pasted from the actual source. sorry - mybad. nice spotting tho! 10 points!

Cerebrus' Maw · Sep 14, 2009

**will make effort to read thread first....**

Ok, just a quick scan using Firebug (its hometime here in Brissie)

Your "main tables" have a width of 780. On your "body table", you have two <td> elements.

The first, has a width of 150, the second 499, which doesn't add up to the 780. The class center doesn't seem to have any color attached with it. Now I think IE/Safari/Firefox have different interpretations of the "width" attribute for tables.

Try changing the second td width to 630. (will get back to you later if Im at home)

DoFoT9 · Sep 14, 2009

Cerebrus' Maw said:
**will make effort to read thread first....**

Ok, just a quick scan using Firebug (its hometime here in Brissie)

Your "main tables" have a width of 780. On your "body table", you have two <td> elements.

The first, has a width of 150, the second 499, which doesn't add up to the 780. The class center doesn't seem to have any color attached with it. Now I think IE/Safari/Firefox have different interpretations of the "width" attribute for tables.

Try changing the second td width to 630. (will get back to you later if Im at home)

what an interesting webpage! thats great! i have been using safaris dev thing to look at it, this seems better

i didnt write the webpage, i purchased a template

thats why its written so bad. i will be doing a re-write in the coming months when i have uni off.

safari and FF see it fine, stupid IE. i will try fix it, thanks for your help.

p.s. NSW ftw

DoFoT9 · Sep 14, 2009

THANK YOU Cerebrus' Maw! that fixed it, its all good in IE now

thanks heaps

CSS Center Body + C&C

macrumors P6

macrumors 65816

macrumors P6

macrumors regular

macrumors P6

macrumors regular

macrumors P6

macrumors P6

macrumors 68040

macrumors 65816

macrumors P6

macrumors regular

macrumors P6

macrumors 65816

macrumors P6

macrumors P6

Attachments

macrumors regular

macrumors P6

macrumors P6

macrumors 6502

macrumors P6

macrumors 6502

macrumors P6

macrumors P6

Our Staff