SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to vertically center; and make heights for varying <li> tags the same?

    .
    Problem:

    • I have got a list. The list has got form tags like checkboxes, text input boxes.

    • The list items with the form tags have heights that are greater than plain text list items.

    • I am using float left. I am wanting each of the list items to have four borders. The bottom borders are not aligned with each other.

    • Setting heights to 50px won't work. I can set the heights to something like 50px. But the <li> contents are all aligned at the tops of the <li> tags.

    • I cannot get the vertical-align: middle; directive to work. It has no effect on <li> tags.


    Question 1: How can I get the heights of list items to be the same?

    Question 2: How can I vertically center the contents for the <li> tags?

    PHP Code:

    // List items (2) and (3) below have
    // heights that are greater than list item (1).

    <ul>
        <
    li>Riverdale High School</li>  // (1)
        
    <li><input type="checkbox" name="Part" value="Yes"></li// (2)
        
    <li><input type="text" name="Time"/></li// (3)
    </ul
    I would appreciate any help.

    Thanks.
    .

  2. #2
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Iraq - Baghdad
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hi

    here's what i got

    HTML Code:
    <ul>
        <li>Riverdale High School</li>
        <li><input type="checkbox" name="Part" value="Yes">something</li>
        <li><input type="text" name="Time"></li>
    </ul>

    HTML Code:
    li{
    float:left;
    padding:10px;
    border-style:solid;
    border-color:red;
    height:50px;
    margin-top:50%;
    margin-bottom:50%;
    }
    check it here http://jsfiddle.net/25R46/
    let me know if it worked for you..

  3. #3
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Keidelberg;

    That won't work. I have already tried setting the height(s) to a specified value. The problem is the contents of the <li> tags are at the tops of the tags.

    The vertical-align: middle; directive does not work.

    I need 1). the heights of the <li> tags to be equal; and 2). the contents vertically centered in the <li> tags.
    .

  4. #4
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Iraq - Baghdad
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, i didn't get you the first time,
    hopefully i did this time,

    1- vertically centering the content of the tags
    just put an identical padding-top and padding-bottom values,
    in my example i applied
    padding-top:30px;
    padding-bottom:30px;
    but you'll get an unequal heights of the fields which brings us to the second questions

    2- equalizing the heights of the <li> tags

    AFTER those values of the padding, set a height which is equal to [the highest tag (in your case the text input) minus the two padding you applied]
    like this example, if you measure it and it turned 84
    and you have applied padding top 30px and padding bottom 30px
    84-30-30=24..
    so the height would be 24
    you can measure that by chrispederick.com tools

    here's what i got

    HTML Code:
    <ul>
        <li>Riverdale High School</li>
        <li><input type="checkbox" name="Part" value="Yes">something</li>
        <li><input type="text" name="Time"></li>
    </ul>  

    HTML Code:
    li{
    float:left;
    padding:10px;
    border-style:solid;
    border-color:red;
    padding-top:30px;
    padding-bottom:30px;
    background:yellow;
    height:24px
    }
    here
    http://tinkerbin.com/GitltOzI

    and I'm waiting for your response,,

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    FIRST you should make sure none of you other CSS code is overriding your stile for these elements.


    The vertical-align: middle; directive does not work.
    Only tables (or elements with display:table) can vertically align content. Consequently, you need to set the LI's to display:table-cell; vertical-align:middle; but this will have it's own problems not the least of which is IE support. BTW.. if this a TABULAR, then you should use a TABLE tag anyway.



    What has previously been suggested should work, but you need to coordinate the calculated height of the content of the LIs. In another words, the text in (1) might be bigger or smaller than the height of the inputs. so forexample ( and BTW this is just for example, AVOID USING PX for text size)

    the text in (1) is 15px (+5px in lineheight) +20px of vertical padding= 40px but the checbox is only 10px +20px of padding=30px . See?

    I think the best solution would be to use a pseudo element as a centering tool.
    Code:
    <style type="text/css">
    ul, li {margin:0; padding:0;} /* general reset */
    li{float:left; border:1px solid red; padding:0 10px}
    li+li{border-left:none; width: auto}
    ul,li{height:50px;}
    li:after{display:inline-block; content:""; height:50px; vertical-align:middle}
     .textG{display:inline-block; vertical-align: middle} /* wraping the text in a span is optional, but  its a good idea if you also plan to limit the with of the parent LI */
     /* more optional stuff to make it display like a grid*/
     .row {clear:left; border-left:1px solid red; border-top:none}
      li, .row{ width:100px}
     .row ~li {border-top:none}
    
    </style>
    
    <ul>
        <li><span class='textG'>Riverdale High School</span></li> 
        <li><input type="checkbox" name="Part" value="Yes"></li>  
        <li><input type="text" name="Time"/></li>
        <li class="row"><span class='textG'>San Pasqule High School</span></li> 
        <li><input type="checkbox" name="Part" value="Yes"></li>  
        <li><input type="text" name="Time"/></li>
        <li  class="row"><span class='textG'>East High School</span></li> 
        <li><input type="checkbox" name="Part" value="Yes"></li>  
        <li><input type="text" name="Time"/></li>
    </ul>


    HOWEVER!!!
    I think this is a far more SEMANTIC solution:
    Code:
    <style type="text/css">
    ul, li {margin:0; padding:0;list-style: none;} /* general reset */
      ul{border-bottom:1px solid red; float:left;}
      li {overflow:hidden; border:1px solid red; border-right:none;border-bottom:none;}
     .seg{float:left; border-right:1px solid red; height:50px; padding: 0 10px}
     .seg:after{content:"";height:100% }
     .seg span, .seg:after{display:inline-block;vertical-align:middle}
     .seg { width:6.5em}
     .seg+.seg{width: auto}
    </style>
    
    <ul>
        <li><span class='seg'><span>Riverdale High School</span></span>  
       <span class='seg'><input type="checkbox" name="Part" value="Yes"></span>   
       <span class='seg'><input type="text" name="Time"/></span></li>
        <li><span class='seg'><span>East High School</span></span>  
       <span class='seg'><input type="checkbox" name="Part" value="Yes"></span>   
       <span class='seg'><input type="text" name="Time"/></span></li>
        <li><span class='seg'><span>San Pasquale High School</span></span>  
       <span class='seg'><input type="checkbox" name="Part" value="Yes"></span>   
       <span class='seg'><input type="text" name="Time"/></span></li>
     </ul>
    I would also suggest using a height in EMs or EXs instead of PX, for added fluidity.

  6. #6
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Keidelberg, dresden-phoenix;

    Thanks for helping with my problem.

    My data is in tabular form. After thinking about it I might be better off using a table.

    It's for a baseball score table. The tables are going to have about fifty rows and about eight columns.

    I guess maybe the reason why I can't get the <li> tags to do what I want is because lists are not meant to be used for tabular data.

    Thanks again.
    .

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Volitics View Post
    I guess maybe the reason why I can't get the <li> tags to do what I want is because lists are not meant to be used for tabular data.
    Wel,, no, they aren't ... but in terms of how something displays, this is an issue of CSS rather than semantics. As D_P said, you can make the LIs display as you want with display: table etc. But if this is tabular data, then certainly use an HTML table instead.


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
  •