Anchors over multiple lines

I’m working on a menu where the anchors need to go over multiple lines (1 to 4 lines). One main text in bold and 1, 2 or 3 descriptive lines in a smaller font

The dimensions for the menu are 1000px x 80 px and there are 7 menu items involved. I actually don’t want to give the anchors a width since the bold head lines are very various in width. but I want the the distance between the anchors to be the same. What would be the best way of doing this? I was thinking of using <span’s> like we discussed in a post about a heading over multiple lines some time ago

Another thing that breaking my head is the vertical alignment. The bold head lines from the anchors should be aligned at about 10px from the top but it is very difficult to work with a bottom padding since the number of lines for each anchor is different but I still want the 80 px height to remain because of the background image in use.

This is an example screen shot

Hi,

You can do this for browsers that understand display:table and make the text wrap at the headers width (although you may need a minimum width if there are small headers).

Here’s an example although it isn’t automatically distributed across the width if that’s what you were after. For ie6 and 7 you’d have to give it a width and float it or perhaps have a standard width and then enhance with js.


<!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">
ul {
    width:1000px;
    height:80px;
    display:table;
    margin:0 auto;
    padding:0;
    list-style:none;
    background:red;
}
li {
    display:inline
}
a {
    padding:0 5px;
    margin:5px 10px 0;
    width:1%;
    display:table;
    min-height:0;
    position:relative;
    z-index:1;
    float:left;
    color:#fff;
    text-decoration:none;
    font-size:77%;
    text-align:right;
}
li strong {
    white-space:nowrap;
    font-size:120%;
    display:block;
    min-width:100px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#demo a{width:100px}
</style>
<![endif]-->
<!--[if lte IE 7]>
<script type="text/javascript">
fixwidth = function() {
        if (document.getElementById) {
        var el = document.getElementById('demo');
        var items = el.getElementsByTagName('a');
            for (i=0; i < items.length; i++) {
            items[i].style.width = items[i].parentNode.offsetWidth-12; 
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", fixwidth);
</script>
<![endif]-->

</head>
<body>
<ul id="demo">
    <li><a href="#"><strong>This is the title</strong> and this is the text that may run to four.</a></li>
    <li><a href="#"><strong>A title</strong> and this is the text that may run to four or five lines .</a></li>
    <li><a href="#"><strong>This is the title</strong>and this is the text that may run .</a> </li>
    <li><a href="#"><strong>This is the title</strong> and this is the text that may run to four or five lines within.</a></li>
    <li><a href="#"><strong>This is another longer title</strong>and this is the text that may run to four or five lines .</a> </li>
    <li><a href="#"><strong>Title</strong> and this is the text that may run to four.</a></li>
    <li><a href="#"><strong>This is the title</strong>and this is the text that may run to four or five .</a></li>
</ul>
</body>
</html>


Or you could add breaks at each line length but I’m guessing you wanted an automatic wrap. This is very similar t a previous quiz.

You can evenly distribute it across the width if you use display:table again for IE8, Firefox and Safari quite easily. (assuming that’s what you were asking).


<!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">
ul#demo {
    width:1000px;
    height:80px;
    display:table;
    margin:0 auto;
    padding:0;
    list-style:none;
    background:red;
}
#demo li {
    display:table-cell;
    vertical-align:top;
}
#demo a {
    padding:0 5px;
    margin:5px 10px 0;
    display:block;
    min-height:0;
    position:relative;
    z-index:1;
    color:#fff;
    text-decoration:none;
    font-size:77%;
    text-align:right;
}
#demo li strong {
    white-space:nowrap;
    font-size:120%;
    display:block;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
*+html #demo li{zoom:1.0}
#demo li{display:inline;}
#demo a{width:100px;float:left;}
</style>
<script type="text/javascript">
fixwidth = function() {
        if (document.getElementById) {
        var el = document.getElementById('demo');
        var items = el.getElementsByTagName('a');
            for (i=0; i < items.length; i++) {
            items[i].style.width = items[i].parentNode.offsetWidth-12; 
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", fixwidth);
</script>
<![endif]-->

</head>
<body>
<ul id="demo">
    <li><a href="#"><strong>This is the title</strong> and this is the text that may run to four.</a></li>
    <li><a href="#"><strong>A title</strong> and this is the text that may run to four or five lines .</a></li>
    <li><a href="#"><strong>This is the title</strong>and this is the text that may run .</a> </li>
    <li><a href="#"><strong>This is another longer title</strong>and this is the text that may run to four or five lines .</a> </li>
    <li><a href="#"><strong>Title</strong> and this is the text that may run to four.</a></li>
    <li><a href="#"><strong>This is the title</strong>and this is the text that may run to four or five .</a></li>
</ul>
</body>
</html>


Of course supporting Ie6 and 7 is a pain and therefore if you need all the above functions for ie6 and 7 (without js) then perhaps this is one of the times when a table will be the easiest element to use.

Hi Paul. My admiration is growing by the day. This is brilliant stuff. One last question about your final statement!

Of course supporting Ie6 and 7 is a pain and therefore if you need all the above functions for ie6 and 7 (without js) then perhaps this is one of the times when a table will be the easiest element to use.

Let me see if I understand this right!

As long as I use the javascript (which with I don’t have problems) this will hold in IE 7 as well?

Yes the js will set the width to be the same as the header.

As a fallback you can just set a fixed width so that it at least holds together if js is disabled. The only other difference in IE is that it won’t evenly distribute x number of items across the full width unlike the browsers that are using display:table.

Fair enough. There are two items in the menu that can be combined I.M.H.O, which I will suggest to them tomorrow and with six items it looks good even in IE. Thanks again Paul

Hi. I have to come back to this, hopefully one last time :eek: It turns out that the client is not satisfied with the spacing between the different menu items so we have decided to work with fixed width after all. What, except for the width on the anchor, should I adjust so that the spacing between all elements is the same?

Thank you in advance!

Hi,

The last example I posted has even spacing between all menu items because it is equally distributed via the display:table rules so I’m not sure where you see a discrepancy?

If you are going for a fixed width for all items then you can ignore all the clever stuff and just float the blocks across the screen with the exact width you need and then divide the space left to give you the amount of margin to apply to each.

It would depend on how many items you have in the menu but here is an example with 6 items and each list set to 140px width.


<!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">
ul#demo {
    width:1000px;
    height:80px;
    margin:0 auto;
    padding:0;
    list-style:none;
    background:red;
}
#demo li {
    float:left;
    margin:5px 0 0 22px;
    display:inline;
    width:140px;
}
#demo a {
    padding:5px 0;
    float:left;
    position:relative;
    z-index:1;
    color:#fff;
    text-decoration:none;
    font-size:77%;
    text-align:right;
}
#demo li strong {
    white-space:nowrap;
    font-size:120%;
    display:block;
}
</style>
</head>
<body>
<ul id="demo">
    <li><a href="#"><strong>This is the title</strong> and this is the text that may run to four.</a></li>
    <li><a href="#"><strong>A title</strong> and this is the text that may run to four or five lines .</a></li>
    <li><a href="#"><strong>This is the title</strong>and this is the text that may run .</a> </li>
    <li><a href="#"><strong>This is another title</strong>and this is the text that may run to four or five lines .</a> </li>
    <li><a href="#"><strong>Title</strong> and this is the text that may run to four.</a></li>
    <li><a href="#"><strong>This is the title</strong>and this is the text that may run to four or five .</a></li>
</ul>
</body>
</html>


Thanks a lot Paul. That works great. :tup: