Want a vertical menu bar with equal-size buttons

[GregHester]

I am trying to build a list of links to various pages for a PDF-based library navigation menu. I want the buttons to all be the same size, despite having text of varying length.

I have followed several different CSS examples to no avail. All of the sources I've seen have indicated that the display: block property should do what I want easily. But Flare seems to be ignoring it. Am I missing something fundamental here?

Here is my CSS:

Code: Select all

ul.links
{
	list-style-type: none;
	padding-left: 0;
	margin-left: 6px;
	margin-top: 0px;
	padding: 0px;
}

ul.links li
{
	font-size: 14pt;
	font-weight: bold;
	color: #003399;
	list-style: none;
	margin-top: 12px;
	margin-bottom: 12px;
}


ul.links a
{
	display: block;
	font-weight: bold;
	text-decoration: none;
	background: #005ABC;
	color: #FFF;
	border: 4px solid;
	border-bottom-color: #003571;
	border-left-color: #004ea3;
	border-right-color: #003e82;
	border-top-color: #004da0;
	padding: 5px;

}

I have tried it both with and without a width property on the a tag. It hasn't made any difference either way.

Following is a screen shot of what I'm getting in Flare. I currently have the links in a two-column table. I have also tried them outside of a table with the same results. (Note that the colors/alignment/padding are all still very much representative of a work in progress. But I just want all buttons to be the same size and know I can get that working before proceeding.)

vertical_menu.png

[i-tietz]

Use one table cell for each link and fill the table cell with a background-color.
If you assign a fixed widthj to the table and assign the width of 50% to each column, they should all be the same size.

You can "store" that table as a snippet that you isnert where you need it or as a table style that you generate the table with. - Or a combination of both ...

[kwag_myers]

I played around with another option of making the background a GIF using Paint. It didn't force the size like I though it would. I think the table option i-tietz mentioned is a good way to go. That gives you a lot of control over how the layout is configured.

I suggest adding a new td style in your master stylesheet and not the table stylesheet. You can set the background color in the table stylesheet, but I don't see where to set the cell border colors. If you set the borders and background in the master you won't have to use this table style with that cell style.

[sfoley]

I have followed several different CSS examples to no avail. All of the sources I've seen have indicated that the display: block property should do what I want easily. But Flare seems to be ignoring it. Am I missing something fundamental here?

From your example, it appears that each of your a elements is in a unique li element. Because li elements are already block elements, adding display:block to a elements will have no effect.

There are two ways to do what you want. You can retain the two-column table structure and remove the ul/li tags:

Code: Select all

<table class="full">
    <tr>
        <td class="halfcol"><a href="" class="blocklink">Item 1</a><a href="" class="blocklink">Item 2</a></td>
        <td class="halfcol"><a href="" class="blocklink">Item 3</a><a href="" class="blocklink">Item 4</a></td>
    </tr>
</table>

CSS:

Code: Select all

table.full {
    width: 100%;
}
td.halfcol {
    width: 50%;
}
a.blocklink {
    display: block;
    width: 100%;
    background: #aaa;
    text-align: center;
}

Or, for a more elegant solution, you can dispense with the table too, and use float:

Code: Select all

<a href="" class="blocklink">Item 1</a>
<a href="" class="blocklink">Item 2</a>
<a href="" class="blocklink">Item 3</a>
<a href="" class="blocklink">Item 4</a>

CSS:

Code: Select all

a.blocklink {
    display: block;
    float: left;
    width: 50%;
    background: #aaa;
    text-align: center;
}

The trick with percentage widths or heights is to make sure that there is a parent element whose height or width is not auto. In the first example, we must set the table width to 100%, because by default the table element is width:auto. In the second example, we don't have to worry about it, because by default the body element is width:100%.

Remember that adding margins, padding, or borders can add width in browsers that don't do the CSS box model correctly (*cough* IE 6-8 *cough*). You will need to decrease the width % for the table cells (first example) or links themselves (second example) to fix that.

EDIT: added a clarification on width.

[GregHester]

Thank you!! That was exactly what I needed.