CSS Center Body + C&C

Discussion in 'Web Design and Development' started by DoFoT9, Sep 11, 2009.

  1. DoFoT9 macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
    #1
    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*

    :D
     
  2. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #2
    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
     
  3. DoFoT9 thread starter macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
    #3
    firstly, thanks! i am not very "in the know" with html formatting etc, so thanks for not flaming.

    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)

    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
     
  4. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #4
    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.
     
  5. DoFoT9 thread starter macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
    #5
    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. :(
     
  6. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #6
    Yes you are:D

    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:eek: 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?
     
  7. DoFoT9 thread starter macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
    #7
    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
     
  8. DoFoT9 thread starter macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
    #8
    well, the <table class=centre"> method has worked :) if you check out the homepage it is perfect :D 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 :eek:

    thanks again!

    DoFoT9
     
  9. Sdashiki macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #9

    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).
     
  10. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #10
    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
     
  11. DoFoT9 thread starter macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
    #11
    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.

    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 :)

    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 :)

    thanks for replying. sorry for not attempting to use your method. :( i didnt know getting rid of the "px" made such a difference!

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

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

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

    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 :rolleyes:

    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
     
  12. DaReal_Dionysus macrumors regular

    DaReal_Dionysus

    Joined:
    Jan 9, 2009
    #12
    Just make a container or wrapper per say and center it.

    #wrapper {
    width: 1024px;
    margin-right: auto;
    margin-left: auto;
    }
     
  13. DoFoT9 thread starter macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
    #13
    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 :(
     
  14. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #14
    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
     
  15. DoFoT9 thread starter macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
    #15
    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 :)
     
  16. DoFoT9 thread starter macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
    #16
    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.
     

    Attached Files:

  17. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #17
    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.
     
  18. DoFoT9 thread starter macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
    #18
    im not sure lol thats why i am asking here :D i will try it now. thanks heaps
     
  19. DoFoT9 thread starter macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
  20. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #20
    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>
     
  21. DoFoT9 thread starter macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
    #21
    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!
     
  22. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #22
    **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)
     
  23. DoFoT9 thread starter macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
    #23
    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 :cool:
     
  24. DoFoT9 thread starter macrumors P6

    DoFoT9

    Joined:
    Jun 11, 2007
    Location:
    Singapore
    #24
    THANK YOU Cerebrus' Maw! that fixed it, its all good in IE now :D thanks heaps
     

Share This Page