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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    kin
    kin is offline
    New Coder
    Join Date
    Jul 2011
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS - Cannot use text-align

    HTML:

    Code:
    <nav>
    <div id="menu">
    <ul id="nav">
    <li class="top"><a href="index.php"  id="home" class="l"><span class="ts">Home</span></a></li>
    <li class="top"><a href="index.php"  id="support" class="l"><span class="ts">Forums</span></a></li>
    <li class="top"><a href="index.php"  id="support" class="l"><span class="ts">Support</span></a></li>
    </ul>
    </div>
    </nav>
    				
    </html>

    CSS:

    Code:
    #nav a.l, #nav a.l:visited{
    text-align:center;
    display:block;
    width:106px;
    height:34px;
    position:relative;
    top:-4px;
    line-height:34px;
    text-decoration:none;
    font-weight:bold;
    margin-bottom:4px;
    background:url(images/link_bg.png) left top;
    }

    problem:


    It does not align my navigation bar, I want it to center itself in the middle of the page. It just does not want to do so, no matter where i put it it will not center. If i need to post a picture please tell me to, otherwise my issue is just a center align issue.
    Last edited by kin; 07-29-2011 at 09:42 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    At first you need to fix any error in your code like this one:
    Code:
    <a href="index.php"  id="home"><a href="index.php" class="l">…
    You can’t have an anchor inside another anchor.
    And then this:
    Code:
    … Home</span></a></li>class="l"><span …
    What is this?

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Also class cannot have numeric name

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    That’s an “L”, not a “1”.

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,725
    Thanks
    41
    Thanked 191 Times in 190 Posts
    in addition to VIP... you cannot use text-align to move a div... to center your div (note with regards to it's parent) use
    Code:
    margin:0px auto;

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

  • #6
    kin
    kin is offline
    New Coder
    Join Date
    Jul 2011
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    in addition to VIP... you cannot use text-align to move a div... to center your div (note with regards to it's parent) use
    Code:
    margin:0px auto;
    not moving a div, im trying to move an unordered list, i have checked other websites and they have successfully achieved it.


    Plus i was tired while making this webpage, i will fix the errors.

    @vip that was a copy error, for the second one.
    Last edited by kin; 07-29-2011 at 09:43 PM.

  • #7
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,725
    Thanks
    41
    Thanked 191 Times in 190 Posts
    you have
    Code:
    <div id="menu"> <-- ...... that's a div, and it is around your ul
    the ul inside here...
    </div>

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

  • #8
    kin
    kin is offline
    New Coder
    Join Date
    Jul 2011
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    you have
    Ok, but explain to me why it works on another website? Thats what i do not understand, i have checked over this other website multiple times. It just wont function the same as that one.


    P.S I have fixed it, just using positioning.


    The website is google
    Last edited by kin; 07-29-2011 at 10:21 PM.

  • #9
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,725
    Thanks
    41
    Thanked 191 Times in 190 Posts
    nononononononononononooooooooooooooooooooooooooo
    don't use positioning for this...
    just do this in your CSS
    Code:
    #menu{margin:0px auto;}
    and if you already have margins set on your #menu then just make the left and right margins "auto"

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

  • #10
    kin
    kin is offline
    New Coder
    Join Date
    Jul 2011
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    nononononononononononooooooooooooooooooooooooooo
    don't use positioning for this...
    just do this in your CSS
    Code:
    #menu{margin:0px auto;}
    and if you already have margins set on your #menu then just make the left and right margins "auto"
    i have tried that, it did nothing. I guess i will just rewrite the whole entire webpage.
    Last edited by kin; 07-29-2011 at 10:53 PM.

  • #11
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,725
    Thanks
    41
    Thanked 191 Times in 190 Posts
    post rest of code please

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

  • #12
    kin
    kin is offline
    New Coder
    Join Date
    Jul 2011
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #13
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    probably need to define a width

    Code:
    .center {
     width: 100px;
     margin: 0 auto;
    }
    there can be no floats or position: absolute; on center for margin: 0 auto; to work

    EDIT: your code

    Code:
    #menu{
    width:766;
    need 766px

  • #14
    kin
    kin is offline
    New Coder
    Join Date
    Jul 2011
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    probably need to define a width

    Code:
    .center {
     width: 100px;
     margin: 0 auto;
    }
    there can be no floats or position: absolute; on center for margin: 0 auto; to work

    EDIT: your code

    Code:
    #menu{
    width:766;
    need 766px
    just a typo, wrote this at 5am


    Edit: Fixed all "px" typos.
    Last edited by kin; 07-29-2011 at 11:04 PM.

  • #15
    New Coder
    Join Date
    Sep 2011
    Location
    USA
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    add this to your css
    Code:
    .menu ul li {text-align: center; }
    Let me know if this will work.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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