<div align="center"> ?????
Results 1 to 9 of 9

Thread: <div align="center"> ?????

  1. #1
    Senior Member
    Join Date
    Sep 2012
    Posts
    269

    Question <div align="center"> ?????

    The neophyte strikes again!

    Why do I have to put that <div> statement when I have both margins set to "auto" in my style sheet?

    Here's the style:
    Code:
    form label {
    	width: 225;
    	height: 18px;
    	margin-left: auto;
    	margin-right: auto;
    	text-align:center;
    	font: 14pt Arial, Helvetica, sans-serif;
    	font-weight:900;
    }
    
    .center {
    	margin-left:auto;
    	margin-right:auto;
    }
    Here's the HTML:

    Code:
      <div align="center" class="center">
     <form action="lookuptest.php" method="post">
     <label>Enter Display Channel</label>
      <input type="text" name="Display_Entry" />
    <input type="submit" value="Go" class = "FormButton">
    </form>
    </div>
    If I don't put in the <div> tag, I end up with objects sitting on the left side of the window. And, why do I have to enter both the align parameter and the class? The class has its margins set to auto. Is someone trying to give me more work?

  2. #2
    Senior Member traq's Avatar
    Join Date
    Jun 2011
    Location
    so.Cal
    Posts
    949
    don't use the align attribute. It's been deprecated for a long, long time.

    It's not doing what you think anyway: it centers the contents of the div, not the div itself.

    If you want your .center class to work, you need to make sure that the div in question has a width other than "auto": "auto" means it will take up all available horizontal space, and the left edge of the div will be on the left edge of the page.
    Last edited by traq; 10-22-2012 at 12:59 AM.

  3. #3
    Senior Member
    Join Date
    Sep 2012
    Posts
    269
    This might not be pretty, but it works:

    Code:
    .center {
    	width:225;
    	margin-left: auto;
    	margin-right: auto;
    	text-align:center;}
    and this:

    Code:
    <form action="validate1.php" method="post" name="LogIn" class="center">
    At least I got rid of that <div>


    tanks fo da hep

  4. #4
    Senior Member
    Join Date
    Jul 2007
    Posts
    3,665
    Quote Originally Posted by timstring View Post
    The neophyte strikes again!

    Why do I have to put that <div> statement when I have both margins set to "auto" in my style sheet?

    Here's the style:
    Code:
    form label {
    	margin-left: auto;
    	margin-right: auto;
    }
    .center {
    	margin-left:auto;
    	margin-right:auto;
    }
    Because the rule form label applies to label elements, which are inline, while only block elements can have margins.

    Quote Originally Posted by timstring View Post
    Code:
    form label {
    	text-align:center;
    This applies to content inside the label, not ouside it. And the same goes when you set it on the div, since this style is inherited: text inside elements will be centered within the element and takes no regard to the space around the actual element.

    Quote Originally Posted by timstring View Post
    Code:
     <form action="lookuptest.php" method="post">
     <label>Enter Display Channel</label>
      <input type="text" name="Display_Entry" />
    </form>
    The input element has to go inside the label element. At least I don't believe HTML 5 still supports the for attribute with matching id attribute, but even if it does, you'd still need to either put the input inside the label element, or give the input an id attribute and then give the label a for attribute with the same value.
    Also, I believe that HTML5 still requires you to use only block level elements as descendants of forms. I.e., you labels, inputs etc all have to be wrapped in some other block element than the form element, such as fieldset, p etc.
    Thus, the simplest valid code would probably be
    HTML Code:
    <style>
    .center {
    	width: 400px;
    	margin: auto;
    }
    </style>
    </head>
    <body>
    <form class="center" action="lookuptest.php" method="post">
    	<fieldset>
    		<legend>Grouping name, if wanted, otherwise no legend element</legend>
    		<label>Enter Display Channel <input type="text" name="Display_Entry"></label>
    	</fieldset>
    </form>
    I also took the liberty of changing <img /> to <img>, thus going from XHTML to HTML. Feel free to use whichever you like more, but I recommend HTML since document.write() is not available in XHTML documents, and a lot of ads and other content are still being delivered using document.write.

    Also, the advantages of using XHTML vs HTML 4.01 are gone. Their used to be no parsing rules for HTML, just the DTD. Since there are now instead consistent parsing rules for every single element, your document will (well, according to the spec anyway) always be treated the same way. Thus, the only thing you get from XHTML is not allowing minimized attributes (selected="selected" rather than selected), requiring quotes around attributes (name="joe" rather than name=joe) and not allowing you to ditch end tags (<p>paragraph</p><p>new paragraph</p> rather than <p>paragraph<p>new paragraph). But there's still nothing preventing you from following those guide lines while using HTML 5 since it's still perfectly valid HTML code as well.
    Last edited by johanafm; 10-25-2012 at 11:27 AM.

  5. #5
    Senior Member
    Join Date
    Sep 2012
    Posts
    269
    Alright. Pardon my ignorance, but how do I get the evil Dreamweaver to convert the xhtml to ordinary to an ordinary html file? I hope its not a bloody mess! My code may not be pretty, but it is working.

  6. #6
    Senior Member
    Join Date
    Sep 2012
    Posts
    269
    Never mind. I've a couple of sites explaining xhtml to html5. Somehow, everything I've tried to convert is working!!!

    Thanks for all the help
    tim

  7. #7
    Senior Member
    Join Date
    Sep 2012
    Posts
    269
    johanafm, based on your suggestion, after a little trial and error--I ended up with this code:

    Code:
    <form class="center" action="lookuptest.php" method="post">
    	   <fieldset>
    		   <label>Enter Display Channel <input type="text" name="Display_Entry">
                       <input type="submit" value="Go" class = "FormButton">
    		</label>
    	   </fieldset>
    </form>
    Now, I've got a proper code. But there is a border around the outline of the form. I've been all over my style sheet and the only border I have is in the style for "FormButton" Here's a pic if it works:

    Last edited by timstring; 10-28-2012 at 10:28 AM.

  8. #8
    Pedantic Curmudgeon Weedpacket's Avatar
    Join Date
    Aug 2002
    Location
    General Systems Vehicle "Thrilled To Be Here"
    Posts
    21,906
    Conventional rendering for <fieldset> elements is to give them a border, since it is typically used to group related form elements. Needless to say, styling can be applied to remove the border.
    THERE IS AS YET INSUFFICIENT DATA FOR A MEANINGFUL ANSWER
    FAQs! FAQs! FAQs! Most forums have them!
    Search - Debugging 101 - Collected Solutions - General Guidelines - Getting help at all

  9. #9
    Senior Member
    Join Date
    Aug 2008
    Location
    London, UK
    Posts
    753
    I find tools like Firebug are great for diagnosing issues like this, as they allow you to highlight parts of your page, element by element and see the styles applied to them, both CSS files/inline styles and the default styles applied by the browser
    Ashley Sheridan
    www.ashleysheridan.co.uk

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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