Horizontal Link Padding Problem

**cpfreak23** · 12-15-2005, 10:27 PM

Hey im trying to create a set of horizontal links.
I need the height the link style to be 40px, and i need the link to be centred vertically in the link style. Heres the css ive made so far:

Code:

#navi_links {
	height: 40px;
	width: auto;
	float: right;
}

#navi_links a.link, a.link:active {

	border-right-color: #C0C0C0;
	border-bottom-width: 1px;
	border-left-color: #F5F5F5;
	border-bottom-width: 1px;
	padding: 20px 0px 2px 10px;
	display: block;
	text-decoration: none;
	font-size: 12px;
	color: #000000;
	font-family: "Franklin Gothic Medium", Garamond, Verdana, Arial;
	}

but when go to the html page and put in the links, it either displays it horizontally (if i out block in as display), or vertically w/o any padding if i dont put anything in the display style. Again, I need the links to display horizontally but with the padding, and it just aint doing it. Also i need the right and left borders to be the same height as the link style (40px)

**funkdaddu** · 11:26 PM

If you just want to verticaly align your text in a block, there's a couple ways:

display: table-cell;
vertical-align: middle

or try making your line-height the same height as the block size:

line-height: 40px

the downside to that is that text can't run on 2 lines

Does that help any? Here is a working example of what I ithink you want:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
		<meta name="generator" content="Adobe GoLive 6">
		<title>Welcome to Adobe GoLive 6</title>
		<style type="text/css" media="screen"><!--
ul.nav {
	margin: 0;
	padding: 0;
}

ul.nav li  {
	list-style-type: none;
	margin: 0 0 10px 0;
	display: block;
}

ul.nav li a, ul.nav li a.visited  {
	color: white;
	border: 2px outset #df0000;
	background-color: #df0000;
	padding: 10px 40px;
	height: 40px;
	width: 200px;
	text-align: center;
	text-decoration: none;
	display: table-cell;
	vertical-align: middle

}

ul.nav li a:hover {
	background-color: #ef0000;
}

ul.nav li a:active {
	background-color: #ff0000;
}
--></style>
	</head>

	<body>
		<ul class="nav">
			<li><a href="nav.html">Link asd asd asd</a>
			<li><a href="asd.html">Link asd fwefw f</a>
			<li><a href="asd.html">Link asdkjnlasd</a>
			<li><a href="asd.html">Link opiquiosdjf</a>
			<li><a href="asd.html">Link asdas dawqeqwe</a>
			<li><a href="asd.html">Link 9od98d id9di</a>
		</ul>

	</body>

</html>

**cpfreak23** · 12-16-2005, 12:38 AM

yes i think that mite help lemme try it out-thanx