yet another css question

[Mike Teezie]

I have a little div (24 px tall), and I'm trying to force text to the bottom of it. Right now, the text is staying at the top, right aligned, like it supposed to.

http://mnjordan.com/kmo/

It's the bar that says "moore blog!" with the text links to the right. I'm trying to get those links to the bottom of the menubar div.

Here's the code for the menubar:

#menubar {
	text-align:right;
	border:1px solid #CCCCCC;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	background: url(images/menubar.gif);
	height:24px;
}

a.menuitem {
	color:#f8f8f8;
	text-decoration:none;
	padding-left:10px;
	padding-right:10px;
	background-color:inherit;
}

a.menuitem:hover {
	color:#f69100;
	text-decoration:none;
	padding-left:10px;
	padding-right:10px;
	background-color:inherit;
}

Help?

 

[elppa]

I have a little div (24 px tall), and I'm trying to force text to the bottom of it. Right now, the text is staying at the top, right aligned, like it supposed to.

http://mnjordan.com/kmo/

It's the bar that says "moore blog!" with the text links to the right. I'm trying to get those links to the bottom of the menubar div.

Here's the code for the menubar:

#menubar {
	text-align:right;
	border:1px solid #CCCCCC;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	background: url(images/menubar.gif);
	height:24px;
}

a.menuitem {
	color:#f8f8f8;
	text-decoration:none;
	[COLOR="Red"]display: block;
	padding-top:10px;[/COLOR] // 8/9px looks a little better IMO. Play with this until you are happy.
	padding-left:10px;
	padding-right:10px;
}

a.menuitem:hover {
	color:#f69100;
	text-decoration:none;
}

Help?

That'll get the job done, but I'm not a big fan of the way the height fixed to a pixel value.

I will post a different/slightly more flexible way of doing it when I am less tired.

 

[Mike Teezie]

Excellent elppa, thanks so much for the help!