Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts

    Nav text alignment . . .

    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?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,307
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Ah, where did you want the text? Right now it's centered in FF.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

    }

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by sunfighter View Post
    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
    Last edited by michael180; 07-13-2011 at 11:49 PM.

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    If you want it to vertical align inside the parent element, just simply use the vertical-align property in your css.

    Code:
     
    vertical-align: middle;
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Define top and bottom padding of navigation element.

    You need to adjust padding according to what height you want

  • #7
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    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.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Set line-height: 40px; to .navigation
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    michael180 (07-14-2011)

  • #9
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    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.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • Users who have thanked Chris Hick for this post:

    michael180 (07-14-2011)

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    michael180 (07-14-2011)

  • #11
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by Chris Hick View Post
    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....

  • #12
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by Chris Hick View Post
    If you want it to vertical align inside the parent element, just simply use the vertical-align property in your css.

    Code:
     
    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)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    michael180 (07-14-2011)

  • #13
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by vikram1vicky View Post
    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 . . .
    Last edited by michael180; 07-14-2011 at 04:56 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •