Please help confused HTML guy with css vertical menu?

BobMCT · Nov 9, 2005

OK - Thanks for looking!
I've been struggling with this issue for much too long so I've decided to post my problem and hopefully with the responses received be able to move on in my project:

And yes - I have googled, read, downloaded, keyed, played with, purchased several reference books, studied examples, actually tried not only modifying several but creating several from scratch. And I still CANNOT get the effect that I desire. I've even searched for sites with these types of side menus and looked at the code. But, by using style @imports the css cannot be seen (I understand why).

But this is a learning (my own) exercise and should be easier than I am experiencing. Anyway, here goes...

For some new sites I am trying to create I wish to have the usual and customary left column vertical menu buttons with rollovers. I would like to accomplish this with css only so I have complete textual control over the content and appearance of the menu and buttons.

I think I understand the vast majority of the elements in either the classes or ids but I am having extreme difficulty with the following:

- relative positioning of the buttons under one another (can't get rid of the vertical spacing between them even with padding/borders/margins set to 0)
- positioning of the overlay text in the vertical center of the box (it rides high on the box)
- getting rid of the underline of the text when I am using the href tag (most likely an html issue)

So perhaps, in lieu of a couple of shotgun answers, someone (and yes, I HAVE searched this forum as well as others and other sources) can actually provide a two button example as a start and possibly EXPLAIN what effect each element may have on this button/menu? Yes, the css docs do state this but without being in context with the other elements the actual effects are quite unknown.

Boy, that would a great help not only to my feeble brain, but most likely to others who read this or for those who search in the future, especially in the FAQs.

So, for anyone who can take the time, thank you very very much from an appreciative, eager to learn, fellow working stiff.

Bob

Vragabond · Nov 9, 2005

So, for your three questions, three answers:
1. This can be done easily, but without seeing the code we can only speculate why margins don't work.
2. Use [tt]line-height[/tt] which is identical to the height of your "button" for that.
3. Use [tt]text-decoration: none;[/tt] in the style of your links.

For more in depth solutions, post code.

BobMCT · Nov 10, 2005

Vragabond:

Per your request - here's a small runable html piece that can be used for this example. It simply creates a left hand vertical row of css buttons. When you run it you will see that the text is positioned near the top edge of the button/box, the text (links) are underlined, and the vertical buttons/boxes are spaced when it would desirable to have them physically touching or very very close to each other.

You will also notice that there is a table definition that splits the page into TWO columns... the 1st which contains the vertical menu, and the 2nd which contains the body. I know there is a method to accomplish this same effect using pure css so if possible perhaps THIS can be answered as well.

Remember, my request is that if this example is answered with sufficient detail to cover most bases, it SHOULD be entered into the FAQs for this forum so it doesn't have to be asked again.

Let's see what all you css guru's can do with this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>

<html xmlns="

http://www.w3.org/1999/xhtml"

xml:lang="en">
<head>

<style type="text/css">
body {
background-color: #FFFFFF;
color: #000000;
}
.rollover a {
display: block;
background-color: #0F3;

width: 100px;
height: 25px;

margin: 0;
padding: 0;
font-family: verdana, arial, helvetic, san-serif;
font-size: 8pt;
font-weight: bold;
text-align: center;
}
.rollover a:hover {
color: #049;
background-color: #CFC;
}
.rollover a:active {
color: #CF0;
background-color: #0F3;
}
</style>

</head>

<body>

<table width=100%>
<tr>
<td width="20%">
<div class="rollover">
<a href="?s=1">button 1</a><br />
<a href="?s=2">button 2</a><br />
<a href="?s=3">button 3</a><br />
<a href="?s=4">button 4</a><br />
<a href="?s=5">button 5</a><br />
<a href="?s=6">button 6</a><br />
<a href="?s=7">button 7</a><br />
<a href="?s=8">button 8</a><br />
<a href="?s=9">button 9</a><br />
<a href="?s=A">button 10</a><br />
</div>
</td>
<td width="80%">
general page area
</td>
</tr>
</table>

</body>
</html>

Awaiting everyone's clever and ingenious resolutions...
[2thumbsup]

Thank you.

Vragabond · Nov 10, 2005

Here:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
  <head>
    <title>Menu</title>
    <style type="text/css">
	body {
		background-color: #FFFFFF;
		color: #000000;
	}

	#col { width: 20%; float: left; }

	#main { width: 80%; float: left; }

	#nav a {
		display: block;
		background-color: #0F3;
		width: 100px;
		line-height: 25px;
		margin: 0;
		padding: 0;
		font-family: verdana, arial, helvetic, san-serif;
		font-size: 8pt;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
	}

	#nav {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	#nav a:hover {
	    color: #049;
	    background-color: #CFC;
	}

	#nav a:active {
		color: #CF0;
		background-color: #0F3;
	}
    </style>
  </head>
  <body>
    <div id="col">
      <ul id="nav">
        <li><a href="?s=1">button 1</a></li>
        <li><a href="?s=2">button 2</a></li>
        <li><a href="?s=3">button 3</a></li>
        <li><a href="?s=4">button 4</a></li>
        <li><a href="?s=5">button 5</a></li>
        <li><a href="?s=6">button 6</a></li>
        <li><a href="?s=7">button 7</a></li>
        <li><a href="?s=8">button 8</a></li>
        <li><a href="?s=9">button 9</a></li>
        <li><a href="?s=A">button 10</a></li>
      </ul>
    </div>
    <div id="main">
      general page area
    </div>
  </body>
</html>

I would like to mention all the problems with your code, but don't have time. Just look at the changes. Also, when I suggest you use line-height and text-decoration it would mean a lot to me if you actually decided to try those out.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Please help confused HTML guy with css vertical menu?

BobMCT

IS-IT--Management

Vragabond

Programmer

BobMCT

IS-IT--Management

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor