How do I align text to the bottom right of a nav box?

[Perseus]

Here is what I need:

My section titles are: "home" "portfolio" etc
I am using display:block to represent the nav buttons, which are lets say for argument 150px by 100px blocks.
Right now the section names are in the top of the box, aligned right.
I want these words to be aligned right, but on the bottom in the box.

How do I get that?

 

[Thank The Cheese]

there are a few ways you could tackle the problem. Without actually seeing the site I'm not sure which would be best. Here I'll give the simplest way I can think of.

If I understand correctly, you have a DIV with a background image (or colour) you are using as the button, and in that DIV you have the link text for that button that you want to appear on the bottom right.

If so, the easiest way to do it would be to add a padding value in the text that the text is in to push it down the DIV. for example:

The box CSS:

div.navigationBox 
{
width: 150px;
height: 100px;
text-align: right;
}

The paragraph text CSS:

p.navText
{
padding-top: 80px;
}

You would have to play around with the padding to get it in the right spot. Then the HTML would be:

<div class="navigationBox">
<p class="navText">Home</p>
</div>

If that solution doesn't work, post back fooling around with paragraph padding and margins can create unexpected results, so it might end up screwing up other elements near by. HOpefully it's cool though :/

 

[mdnky]

Depends on the final look, but usually it can be done with some creative trickery in CSS. There is no valign in CSS, so you have to play with the margin/padding to get the effect right. I did a quick example of it (one vertical, one horizontal [almost no difference between the two] since you didn't specify which). Almost all of "it" is from the #navlist li a tag.

BTW, it might need some minor tweaks to work in IE (in fact, the HTML files in the zip won't because of the media type...forgot to change it to text/html).

 

[Perseus]

mdnky,

Thank you so much for your help. I noticed I had a fixed height for my li a, which meant that the padding wouldn't work anyway! Once I removed the fixed height, and added the padding, it turned out fine!

I appreciate the fact you made seperate little files...a nice design too!