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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Centering a div around a form?

    I'm pretty new to wed designing. I'm a highschool student taking a web design class, but the poor teacher only knows what the almighty google can tell him, and what he keeps saying to do isn't working. Am I simply layering it wrong, or is there something in the CSS that I need to do? I'm lost and don't know what to do

    I'm trying to center a div that's wrapped around a form in a table. Below I'll copy and paste my html , so you can see what I have, and hopefully tell me what I need to put in CSS to center it

    Here is my html:
    Code:
      <tr>
        <td id="content-main">
    
          <h2>Just Fill Out This Form:</h2>
    
          <div id="f-request">
            <form>
              <table>
                <tr>
                  <th colspan="2">Personal Information</th>
                </tr>
                <tr>
                <td colspan="2">Just a liitle information so that we cab contact you about your request.</td>
                </tr>
                <tr>
                  <td id="f-requirednotice"> Personal Information</th>
                </tr>
                <tr>
                  <td id="f-label">*Full Name:</td>
                  <td id="f-input"><input type="text" name="name" id="name" value="Type Here" /></td>
                </tr>
                <tr>
                  <td id="f-label">*E-mail:</td>
                  <td id="f-input"><input type="text" name="" id="email" value="Type Here" /></td>
                </tr>
                <tr>
                  <td id="f-label">*Phone Number:</td>
                  <td id="f-input"><input type="text" name="phonenum" id="phonenum" value="Type Here" /></td>
                </tr>
              </table>
            </form>
          </div>
    
        </td>
      </tr>
    Thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello FlameKissed,
    To center an element you need 3 things:
    1. a DocType (see link in sig below)
    2. an element with a width
    3. that elements right/left margins set to auto

    You would also need to make sure your form fits in the container your putting it in - can't put a 1000px wide form inside an 800px div. See how the box model works.

    Also, did you know that tables are not for layout?
    --
    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:

    FlameKissed (12-04-2009)

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I learned the hard way that tables are not so great. Here is a link that shows how to do different CSS based forms:

    http://www.smashingmagazine.com/2006...ern-solutions/

    If you want to center the div, in your css you would set it to have margin left/right to auto. I believe this would be correct. along with everything else excavator says.

  • #4
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I did realize that tables aren't for layouts, but I thought it would be fine to use the table structure for a form, to keep it nice and organized and less changeable by the differences of viewers. Was I wrong?

    I do plan to convert the overall layout of my site to divs if I can figure out how to work them properly, but I decidded to do it the skimping way first, just in case I don't have the time to figure out divs, make it work, and make it look nice before the due date.

    But back to the main issue here I tried to do the margin-left/right auto, but it still is staying to the left. I'll put the css for the div below. Did I set it up wrong?

    Code:
    #f-request{
      marign-left auto;
      margin-right: auto;
      width: 500px;
      background-image: url(../images/tablebg.png);
      padding: 5px;
    }

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    You don't provide enough information. From the bit you quoted, #f-request is 510px wide.
    Does that fit in <td id="content-main">?
    How is <td id="content-main"> positioned?


    Of course it might all work better if it was spelled right. Have a look at the suggestion about validation in my sig below. There are 2 links to validate with there too, one for you markup and one for your CSS that can show you how to spell marign and where to put the :
    Last edited by Excavator; 12-04-2009 at 04:31 PM. Reason: spleling error
    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 to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow, I feel so embarrassed now. Honestly, I don't know how I kept looking right over those spelling errors when I was trying to get it to work. Maybe my group members would have noticed it if they actually understood the least bit of css, but I'm getting off topic. It works when I spell it right. I'm so sorry >< and thanks a lot

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Haha, no need to be sorry/embarrassed. I spell stuff wrong all the time - I type 70wpm but sometimes it seems like Ithink 30wpm.
    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

  • #8
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I think I'm about 60 when I'm able to concentrate, but about 45-50 when there's distractions. Like my group members >> it's hard trying to find a fellow high school student who's actually trying to learn coding rather than just passing the class XD But I didn't realize there was a validator for css. That really helps Dad is a programmer, but he works mostly in Visual BASIC so there's only so much he can do. I've been kind of winging it on all the css I've made


  •  

    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
    •