SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Bottom-aligned links within UL LIs using only percentages?

    I have a UL with some links that I need to have vertically-aligned along the bottom. I doubt this can be done because I have to have the UL and LIs (as well as the links) remain dimensionally elastic using percentages. I feel like I've tried everything from adjusting the UL's line-height to messing with the anchor padding, but nothing I do seems to work. Again, I doubt it can be done, but I wanted to ask the pros around here if they've ever had this type of issue and if so, how did you overcome it?

    On a side note, is there possibly a way to use "display:table-cell" combined with "vertically-align:bottom" to achieve this?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Wolf_22 View Post
    I have a UL with some links that I need to have vertically-aligned along the bottom. I doubt this can be done because I have to have the UL and LIs (as well as the links) remain dimensionally elastic using percentages.
    That should be fine. This is a CSS issue. If you post some code or a link, we can get it happening.

    However, do you really mean "vertically-aligned along the bottom" or "horizontally-aligned along the bottom"? Vertically means one on top of the other.

  3. #3
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the heads-up on the markup vs. CSS. I guess the reason I posted this in here is because of an issue I went through awhile back with nested inline lists--the only fix was markup-related.

    Anyway, if you need to move it, by all means...

    As for the alignment clarification, yes, I mean vertically-aligned along the bottom. From what I have experienced, aligning things horizontally seems to be an easier issue to deal with as you can almost always achieve it with things like margin left & right: auto as well as doing the half-hack with absolute (and sometimes, text-align:center depending on the issue).

    So I need it to be vertically-aligned ON the bottom of the LI (maybe my use of the word "along" versus "on" helps?). Is there a way this can be done (while maintaining the percentage-based dimensions)?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    O, I see, I totally mis-interpreted what you were talking about. I was picturing a list sitting at the bottom of the page or something... Duh.

    Well, the only easy trick I can think of is to have an image (whether visible or the same color as the background) at the start of each LI:

    Code:
    <li><img src="image.gif"><a href="#">Link</a></li>
    and then have this in the css:

    Code:
    li img {vertical-align:bottom;}
    I guess that's not too satisfying, though, and there's probably a better way; so I'm sure someone better at CSS will suggest something.

  5. #5
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If only there was someone lurking around here who's, eh, okay at CSS and has a weird, green, nightmarish-bloated-Muppet-looking monster for an avatar...

    Thanks for your tip, Ralph. I might do that if I can't someone who has around 28 thousand posts mostly pertaining to CSS...

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Wolf_22 View Post
    If only there was someone lurking around here who's, eh, okay at CSS and has a weird, green, nightmarish-bloated-Muppet-looking monster for an avatar...
    There is one of those lurking around here, but it's more likely to find you in the CSS forum. You could PM it if you wanted to.

  7. #7
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You responded right as I clicked on the button labeled "Help, Paul."

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I have a UL with some links that I need to have vertically-aligned along the bottom. I doubt this can be done because I have to have the UL and LIs (as well as the links) remain dimensionally elastic using percentages.
    Hi,
    You can do this with display:inline-block; assigned to a <span> in order to allow it to take on vertical-align:bottom; and dimensions.

    Building on Gary T.'s Solution from Quiz-30-B you can do this with percentage widths but you will need to set a defined height on the li for the "b" element to reference from.

    Here is what I came up with, maybe it can serve as a starting point for you.
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Vertical Aligning within Lists Items</title>
    <style type="text/css">
    h1{padding:20px; text-align:center}
     
    ul{
        width:75%;
        min-width:420px;
        margin:0 auto;
        padding:0 0 0 1px;
        border:1px solid #000;
        border-left:0;
        background:orange;/*fill in the BG color on li.last*/
        text-align:center;
        overflow:hidden;
    }
    li{
        float:left;
        width:20%;
        height:5em;
        border-left:1px solid #000;
        margin-left:-1px;
        list-style:none;
    }
     
    li a {
        float:left;
        width:100%;
        height:100%;
        text-decoration:none;
        background:orange;
    }
    li a:hover {background:yellow;}
     
    li a span{
        width:90%;/*94% total width (leave room for the VISIBLE "b" element)*/
        padding:0 2%;
        display:inline-block;
        vertical-align:bottom;
        background:lime;
        color:#000;
    }
    li b {
        height:100%;
        display:inline-block;
        vertical-align:bottom;
        background:red;
        /*font-size:0; /*commented out for demo to make 100% high "b" element VISIBLE*/
    }
    li a:hover span {
        color:#FFF;
        background:#222;
        font-weight:bold;
    }
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
    li {display:inline;}/*IE6 margin bug*/
    li.last {width:19.6%;}/*combat rounding errors*/
    li a span {display:inline}
    </style>
    <![endif]-->
     
    </head>
    <body>
    <h1>Vertical Aligning Text within Lists Items</h1>
        <ul>
            <li><a href="#1"><span>long test text</span><b>&nbsp;</b></a></li>
            <li><a href="#2"><span>some longer testing text</span><b>&nbsp;</b></a></li>
            <li><a href="#3"><span>some much longer testing text</span><b>&nbsp;</b></a></li>
            <li><a href="#4"><span>test text</span><b>&nbsp;</b></a></li>
            <li class="last"><a href="#2"><span>some longer testing text</span><b>&nbsp;</b></a></li>
        </ul>
    </body>
    </html>

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Looking for something like this?
    http://www.pmob.co.uk/temp/vertical-align11.htm
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Looking for something like this?
    http://www.pmob.co.uk/temp/vertical-align11.htm
    I quoted and bolded the text on the basic requirements that the OP was looking for in my reply above. It is all explained in post #1.

    I don't think you can make the double relative shift vertical-align to the bottom for IE6/7. It handles v-a middle due to the nature of the bug.

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    I quoted and bolded the text on the basic requirements that the OP was looking for in my reply above. It is all explained in post #1.
    You posted yours right before I did, thus missing the OPs requirements (I didn't examine his post clearly enough to fully grasp all the dynamics)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •