Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Dec 2005
    Posts
    65
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Aligning the body...

    I have a feeling this is going to sound like a stupid question but I won't let that stop me from asking it:

    The body of my website, which I created from a template, is set to the left of the screen. I want to move it to center. Looking at the coding it seems that I would have to change each DIV's left alignment, which looks like a daunting task. I'm wondering if there is a simpler way to shift the body to center.

    Thanks.

    http://thefactotum.home.comcast.net/~thefactotum/index.html

    mccd

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello mccdaddy,
    No such thing as a stupid question - how else are we supposed to figure these things out?

    Make these changes to your html -
    Code:
    <div id="container">
    <a name="top"></a>
    <div id="top">
    <div id="logo"><img src="imgs/fact_logo.jpg" alt="FACTotum Logo" width="220" border="0" height="83"></div>
    </div>
    <!-- *be sure to add your url in (herf = " URL_HERE ")* -->
    <div id="lnk1"><a href="index.html" class="navlnks">Hom 
    /...snip
    /
    /
    /
    snip.../
    r="0"></a><br><a target="_new" href="http://counter37.bravenet.com/index.php?id=367396&amp;type=overview&amp;usernum=3161311238"><img src="http://assets.bravenet.com/common/images/counter/tags/1_stat.gif" target="_blank" alt="View Statistics" border="0"></a></td></tr></tbody></table>
                  <!-- End Bravenet.com Service Code -->
    
    </div>
    <!--end container--></div>
    And then add this to your CSS:
    Code:
    #container {
    width: 691px;
    margin: 0 auto;
    }
    div#top {
    	positio
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Dec 2005
    Posts
    65
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi Excavator,

    Thanks for your reply. I added the coding you recommended but the body is still left aligned. Did I do something wrong?

    http://thefactotum.home.comcast.net/...tum/index.html

    mccd

  • #4
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    It's not working because you've absolute positioned everything where it needs to be. If you want to center it, you're going to have to abandon that method, which is probably going to set you back a ways.
    Last edited by Majoracle; 02-17-2009 at 06:31 AM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Yeah, your absolute positioning is really not helping.
    Have a look at http://www.tyssendesign.com.au/artic...ning-pitfalls/ before you do the re-write
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Dec 2005
    Posts
    65
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Excavator, I read the article on the pitfalls of absolute positioning. It was informative, thanks.

    The article didn't address an alternative. How did I undo the positioning? Do I just delete every "position: absolute;" reference?

    mccd

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Well, deleting all your absolute positioning will just remove all the positioning. You need to have some sort of control over the layout.

    That's why I mentioned the re-write. If you remove the ap, it's the same as starting over.

    Floats and margins are used instead of ap.
    Are you going to do this yourself?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    mccdaddy (02-18-2009)

  • #8
    New Coder
    Join Date
    Dec 2005
    Posts
    65
    Thanks
    2
    Thanked 0 Times in 0 Posts
    My coding knowledge isn't what I'd like it to be but, yes, I'm going to try it. I found an instructive tutorial- http://blog.codebeach.com/2007/03/ab...on-in-css.html- which gave me a better understanding of relative vs absolute positioning.

    I'll be back with an SOS if the need arises.

    Thanks again.

    mccd

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    I just looked further into your code. Some very strange stuff going on there. Your background image is 1400px wide, your body is set to 800px wide...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Here's a good start for you:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 12px Arial, Helvetica, sans-serif;
    	background: #ECEADD;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 691px;
    	margin: 0 auto;
    	overflow: auto;
    	text-align: left;
    }
    </style>
    </head>
    <body>
        <div id="container">
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •