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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    html tables positioning help!

    hi everyone!
    I need some help positioning my tables! I made this layout, and I would like the pink table to go in the middle. however, I am not sure how to do that. I need it so that -all- browsers will see it in the same position, I don't want it to be able to move around, like hspace and vspace in iframes.

    can you guys please help me?


    http://www.heartless-ink.com/layout.html

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Here is what you need to do.

    (1)
    Add a doctype declaration at the top of your document. Otherwise your page is rendered in quirks mode, and you won't be able to center block-level elemets using correct CSS in IE. For now, you can use this one:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    (2)
    Try this to get started.
    Code:
    #wrap {
      width: 1000px;
      margin: 0 auto;
      background-image: url(layout22.jpg);
      background-repeat: no-repeat;
    }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    <html>
    <head>...</head>
    <body>
    <div id="wrap">
      [your page content]
    </div>
    </body>
    </html>
    (3)
    Use the validator to check if there are errors in your code.

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi! thanks, it's just that I am not sure where to place the #wrap tag. it doesn't work where ever I try to stick it. where does it belong?


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    <html>
    <head><title>oops, oh my</title></head>
    <body>

    #wrap {
    width: 1000px;
    margin: 0 auto;
    background-image: url(layout22.jpg);
    background-repeat: no-repeat;
    }
    <div id="wrap">
    wahhhhhhhhh
    </div>
    </body>
    </html>

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by notyourstar View Post
    it's just that I am not sure where to place the #wrap tag. it doesn't work where ever I try to stick it. where does it belong?
    Either like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    <html>
    <head><title>oops, oh my</title>
    <style type="text/css">
    #wrap {
    width: 1000px;
    margin: 0 auto;
    background-image: url(layout22.jpg);
    background-repeat: no-repeat;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
    wahhhhhhhhh
    </div>
    </body>
    </html>
    or better... in a separate file named e.g. styles.css
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    <html>
    <head><title>oops, oh my</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
    <div id="wrap">
    wahhhhhhhhh
    </div>
    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by notyourstar View Post
    hmmmm.
    (1)
    You should crop your background image. You have some 200px excessive white space on the left side and some 100px excessive white space on the right side of your image.
    (2)
    After doing that adjust the width of your #wrap so that it fits the width of your background image.
    (3)
    Apply some padding to #wrap so you get your text to start the right place. Example:
    Code:
    #wrap {
    width: 700px;
    margin: 0 auto;
    padding-top: 50px;
    padding-left: 100px;
    background-image: url(layout22.jpg);
    background-repeat: no-repeat;
    }

  • #7
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh, thanks!
    I am going to leave the insane white space because without it my layout affixes itself to the left and there's massive white space on the right. and I can't make her bigger cause then you can't see her boots

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You should be able to set appropriate margins and get rid of the whitespace out of the image that is making the image file WWWWAAAAAAAAAAAAAAAAAAYYYYYY bigger than it needs to be.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    BlueRobot to the rescue again, I think. Do you have a graphic that looks like how you want the layout of your site to be? I'm not sure what you're trying to accomplish here. I think that going with CSS instead of tables is a good idea and should make things easier for you later.

    Get back to me and let me know how you want things to look.
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin


  •  

    Posting Permissions

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