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?
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.
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)?
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.
<!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> </b></a></li>
<li><a href="#2"><span>some longer testing text</span><b> </b></a></li>
<li><a href="#3"><span>some much longer testing text</span><b> </b></a></li>
<li><a href="#4"><span>test text</span><b> </b></a></li>
<li class="last"><a href="#2"><span>some longer testing text</span><b> </b></a></li>
</ul>
</body>
</html>
You could PM it if you wanted to.