...

View Full Version : Nav text alignment . . .



michael180
07-13-2011, 04:16 PM
REF: http://chieftainclothing.com/mockup/

I have some navigational text at the bottom of my page, and I can't get it align properly. I've tried tweaking all of the elements involved, but I can't move the text.

Any suggestions?

sunfighter
07-13-2011, 08:49 PM
Ah, where did you want the text? Right now it's centered in FF.

Seb Meikle
07-13-2011, 09:13 PM
Well, I'm not sure where you want the text aligned. For me, in Google Chrome, FireFox 3.0 & IE 8 it's in the centre.

I'm sure you know this, but all you need to do is change the text-align in your .navigation rule.

.navigation {

font: italic 11px/17px georgia;

background: url("images/bottom_bar.png") no-repeat 0 0;

height: 40px;

text-align: center; // Edit This i.e right, left etc...

}

michael180
07-13-2011, 11:36 PM
Ah, where did you want the text? Right now it's centered in FF.

I would like it aligned in the middle of the bar. In FF, Chrome, and Safari it's at the top of the bar.

Here's what I mean http://www.moderntimes.com/tmp/bottom_bar.png

Chris Hick
07-14-2011, 08:50 AM
If you want it to vertical align inside the parent element, just simply use the vertical-align property in your css.




vertical-align: middle;

vikram1vicky
07-14-2011, 09:15 AM
Define top and bottom padding of navigation element.

You need to adjust padding according to what height you want :)

Chris Hick
07-14-2011, 09:54 AM
Vikram, that is a solution but not a very wise solution. The reason is because if you use padding to vertically align text in that box, you will end up being very limited on what else you can include in that box beside the nav. In other words, if later on he/she wants to put an image in that box, it has to be size of whats in between the padding aka the size of the text. I'm not saying you are wrong by any means, I am just stating that it limits what he can do with that box.

abduraooft
07-14-2011, 10:23 AM
Set line-height: 40px; to .navigation

Chris Hick
07-14-2011, 10:45 AM
Abduraooft, that would mess up if he ever decided to change the height of his box. It would limit him.

As you can see, Michael, there are several ways to solve your problem. You must think about what you plan on doing with this box in the future, if you don't plan on changing anything or adding anything else in the box, then Abduraooft's and Vik's suggestion would work. If you are unsure, you should try what I suggest or someone else might have a better solution that allows more freedom of change. In my opinion, you should always try to make things as flexible as possible.

abduraooft
07-14-2011, 10:47 AM
Abduraooft, that would mess up if he ever decided to change the height of his box. It would limit him.
I don't think, he'd need to frequently change the height. The idea is to set a line-height value that equals to the height applied to that element.

vikram1vicky
07-14-2011, 12:35 PM
Vikram, that is a solution but not a very wise solution. The reason is because if you use padding to vertically align text in that box, you will end up being very limited on what else you can include in that box beside the nav. In other words, if later on he/she wants to put an image in that box, it has to be size of whats in between the padding aka the size of the text. I'm not saying you are wrong by any means, I am just stating that it limits what he can do with that box.


Thanks for your suggestion :)

But I never added another element in parent element of navigation, so padding or height-line property is good option to make navigation vertically aligned :)

We can use separate containers in header/footer/side bar to add other content (other than navigation) and apply CSS accordingly....

alykins
07-14-2011, 04:03 PM
If you want it to vertical align inside the parent element, just simply use the vertical-align property in your css.




vertical-align: middle;



unless I am missing something- no... the OP wants to center("middle") the text and this does not center("middle") text (vertically)

michael180
07-14-2011, 04:52 PM
Thanks for your suggestion :)

But I never added another element in parent element of navigation, so padding or height-line property is good option to make navigation vertically aligned :)

We can use separate containers in header/footer/side bar to add other content (other than navigation) and apply CSS accordingly....

I must be missing something because when I add padding it simply moves the bar up, the text remains. NEVER mind, the line-height worked.

Thanks all . . .



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum