SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align everything to middle

    I want everything in TabContent to align middle but can't get it to work:

    <div id="TabContent">
    <div id="RForm">
    <div class="requiredText">*</div>
    <div class="formLabel">Background Color</div>
    <div class="formField"><%=Html.RadioButton("rbBackgroundColorWhite", 0, false)%><label for="</div>
    <div class="formField"><%=Html.RadioButton("rbBackgroundColorWhite", 0)%></div>

    <div class="fieldRowSeperator"></div>
    <br />
    <div class="requiredText">*</div>
    <div class="formLabel">Bride's First Name</div>
    <div class="formField"><%=Html.TextBox("BrideFirstName", "", new {width="100px"}) %></div>
    </div>
    </div>

    #TabContent
    {
    width: 740px;
    margin: 0px 0px 0px 15px;
    text-align: center;
    }

    #RForm
    {
    margin:0px auto;
    display: inline;
    width: 739px;
    float: left;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Only inline elements can be centred with text-align:center. Block level elements are centred using margin:auto on elements which also have a width defined.

    Floats cannot normally be centered by any of the above methods.

    I would need to see what your end result should look like before I could offer more help.

    (As mentioned before please don't keep posting ASP - Just view source from the browser and send us the html along with your css.)

    Don't use non semantic empty divs like this (Unless there is absolutely nothing else you can use.).

    Code:
    <div class="fieldRowSeperator"></div>
    A structured layout would ensure that the elements are wrapped accordingly and there would be no need for that empty div. If it's a fieldset divider then you should use "fieldset" because that's what it was designed for

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Paul, I think it shouldbe noted IE allows text-align on blocks

    http://pmob.co.uk/pob/centred-float.htm
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Paul, I think it shouldbe noted IE allows text-align on blocks
    I didn't want to complicate the issue and although IE7 and under will center nested block level elements when the parent has text-align:center set. It will not center the actual element that has that property applied to it only it's nested block level children (and text/inline elements as per normal).

    However that is contrary to the CSS specification and a leftover from IE5 days and should not be encouraged

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still don't see why you need all my code. Just taking the outer div here, I want any lements inside aligned middle. I guess I don't understand inline vs. block here.

  6. #6
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, did not know fieldset was used for that purpose. That seemed to separate out my rows but added too much space. I guess I can add a class to fieldset to lessen the space between each fieldset..or to add more space as desired?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Just taking the outer div here, I want any lements inside aligned middle. I guess I don't understand inline vs. block here.
    I'm afraid the question is not easy to answer because it depends on the situation and the styles applied to the content in question. I can't simply say do this or do that because there are hundreds of variables at play here.

    The divs are already 100&#37; wide so in effect thay are already centered. You have a mixture of spans and divs so I have no idea on which line you want anything to appear.

    The difference between inline and block elements (and display:inline and display:block) is fundamental to the construction and understanding of html and css. Read Tommy's article for a thorugh understanding before you continue down this road any further

    Assuming you have now read the article then you know that inline elements such as spans and plain text can be centred simply by applying text-align:center to a parent.

    If on the other hand the content you want centred is a mixture of block level elements and floats then there is no easy way to center it. You would need to wrap all the elements in a container of the appropriate applied width and use auto margins to center the parent container.

    If you want the asterisk, the label and the input to be centred then they should be cntained in inlne elements and not divs and then text-align:center on the parent would center them within the avilable space. However this is unlikely to be what you want which is why I asked what you wanted it to look like because the text for the labels and the inputs themselves will be of differing lengths and it is vey unlikely that you want them centred as that would look very strange.

    It is more likely that you want them centred to a degree but all left edges aligned in neat columns. This would mean setting a width for the parent of each row and using auto margins as stated before.

    If you can show an example of what you want then we can show you how to do it but to guess at what you want could take all day

    I have given you many examples that you can work with and you should be using the code I gave you to clean up your html as it it makes no semantic sense at present and you are just making things hard for yourself.

    Here is another example that shows a centred form.

    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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    fieldset{width:300px;margin:auto}
    legend{
        font-weight:bold;
        margin:0 0 1em 0;
        color:#000;
    }
    form{
        width:790px;
        margin :auto;
        background:red;
        padding:20px 0;
    }
    #form1 label{
        float:left;
        width:7em;
        text-align:right;
        padding:5px 10px 5px 10px;
    }
    #form1 input{
        width:100px;
        margin:5px 0;
        float:left;
    }
    br{clear:both;}
    label abbr{
        color:red;
        font-weight:bold;
        border:none;
        padding:0 3px 0 0;
    }
    
    </style>
    </head>
    <body>
    <form id="form1" method="post" action="">
        <fieldset>
        <legend>Form Test</legend>
        <label for="firstname"><abbr title="Required field">*</abbr>First Name:</label>
        <input type="text" name="firstname" id="firstname" />
        <br />
        <label for="lastname"><abbr title="Required field">*</abbr>Last Name:</label>
        <input type="text" name="lastname" id="lastname" />
        <br />
        <label for="address1"><abbr title="Required field">*</abbr>Address 1:</label>
        <input type="text" name="address1" id="address1" />
        <br />
        <label for="address2">Address 2:</label>
        <input type="text" name="address2" id="address2" />
        <br />
        <label for="address3">Address  3:</label>
        <input type="text" name="address3" id="address3" />
        <br />
        <label for="address4">Address 4:</label>
        <input type="text" name="address4" id="address4" />
        <br />
        <label for="city">City:</label>
        <input type="text" name="City" id="city" />
        <br />
        <label for="state">State</label>
        <input type="text" name="state" id="state" />
        <br />
        <label class="zip" for="zip">Zip:</label>
        <input type="text" name="zip" id="zip" />
        <br />
        <label for="tel">Telephone:</label>
        <input type="text" name="tel" id="tel" />
        <br />
        </fieldset>
    </form>
    </body>
    </html>
    Take time to run through the code and understand the concept otherwise it will feel like you are hitting your head against a brick when nothing works as you expect


Bookmarks

Posting Permissions

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