hey there,

I have a simple page online, and tried to style it a little. here is my page. there are five links. I tried to build a simple, css-styled vertical menu. however, the button-like appearance of the links is not of equal length. would anyone tell me what part of my css file do I need to modify, and how, so that I can have the 'buttons' be of equal length?

#navigation{
	font-size: 100%;
}

#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-top: 1em;
}

#navigation li {
	margin-top: 0.5em;
}

#navigation a:link, #navigation a:visited {
	margin-right: 0.2em;
	padding: 0.2em 0.6em 0.2em 0.6em;
	color: #A62020;
	background-color: #FCE6EA;
	text-decoration: none;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-bottom: 1px solid #717171;
	border-right: 1px solid #717171;
}

#navigation a:hover {
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-bottom: 1px solid #717171;
	border-right: 1px solid #717171;
}

Recommended Answers

All 2 Replies

For example:

#navigation {
  display:inline-block;
}
a {
  display:block;
  width:100%;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.