help with some css centering

Discussion in 'Web Design and Development' started by andy5000, Jan 24, 2007.

  1. andy5000 macrumors regular

    Joined:
    Sep 17, 2006
    #1
    Hi i am building a website and i need to center my links on the page.
    Here is a snippet from the html:

    <tr>
    <!--Navigation-->
    <td class="toc;" rowspan="2"></td>
    </tr>
    </table>
    <a href="home.html">Home</a>
    <a href="dogs.html">Dogs</a>
    <a href="newYork.html">New York</a>
    <a href="misc.html">Misc Places</a>
    </td>

    Here is a snippet from the css:

    table, td{border:none;table-layout:fixed;}
    .toc{vertical-align:top;
    width:110px;
    background:#000000;
    padding:25px;
    text-align:center}

    .center {text-align:center}
    .right {text-align:right}
    .main {text-align:top;padding-left:10px}

    Hope you understand my problem and can help somehow.

    Andrew Mayo
     
  2. killmoms macrumors 68040

    killmoms

    Joined:
    Jun 23, 2003
    Location:
    Washington, DC
    #2
    Real question is why are you using a table for layout when you should be using divs defined in your stylesheet? :confused:
     
  3. dalvin200 macrumors 68040

    Joined:
    Mar 24, 2006
    Location:
    Nottingham, UK
    #3
    your html seems to be wrong anyway..

    you have an </table> and then some hyperlinks and then an </td>??? doesn't quite make sense..

    for it to work i guess you need the wrap the links within the table..

    ie:

    <tr>
    <td class="center">
    <a href="home.html">Home</a>
    <a href="dogs.html">Dogs</a>
    <a href="newYork.html">New York</a>
    <a href="misc.html">Misc Places</a>
    </td>
    </tr>


    you should be using <div>'s anyway :D
     
  4. andy5000 thread starter macrumors regular

    Joined:
    Sep 17, 2006
    #4
    i tried using divs and came with the same problem. the darn buttons wont center.

    Here is my css when i was using divs:
    #navbar, navbar ul {display:block;margin:0; padding:0; list-style:none;}
    #navbar a {display:block;width:10em;}
    #navbar li {float:left;width:10em;}
    #navbar li ul {display:none}
    #navbar li:hover ul {position:fixed;display:block;width:10.1em;}
    #navbar li ul li {float:none;width:auto;}
    div.comment {clear:left;padding-top:5%;}

    And my xhtml:
    <div id="navbar">
    <ul>
    <li>
    <a href="home.html">Home</a>
    </li>
    <li>
    <a href="home.html">Animals</a>
    <ul>
    <li>
    <a href="dogs.html">Dogs</a>
    </li>
    </ul>
    </li>
    <li>
    <a href="home.html">Travels</a>
    <ul>
    <li>
    <a href="newYork.html">New York</a>
    </li>
    <li>
    <a href="misc.html">Misc</a>
    </li>
    </ul>
    </li>
    </div>

    I am begginner you may tell lol
    Please help
     
  5. dalvin200 macrumors 68040

    Joined:
    Mar 24, 2006
    Location:
    Nottingham, UK
    #5
    add

    text-align:center;

    into the #navbar css..
     
  6. andy5000 thread starter macrumors regular

    Joined:
    Sep 17, 2006
    #6
    thats what i had thought but doesnt make any difference
     
  7. dalvin200 macrumors 68040

    Joined:
    Mar 24, 2006
    Location:
    Nottingham, UK
    #7
    your xhtml is also incorrect.. it should be this:

    <div id="navbar">
    <ul>
    <li>
    <a href="home.html">Home</a>
    </li>
    <li>
    <a href="home.html">Animals</a>
    </li>
    <li>
    <a href="dogs.html">Dogs</a>
    </li>
    <li>
    <a href="home.html">Travels</a>
    </li>
    <li>
    <a href="newYork.html">New York</a>
    </li>
    <li>
    <a href="misc.html">Misc</a>
    </li>
    </ul>
    </div>

    also, you don't need to use lists to do this..

    you could just have:

    css:

    #navbar {width:100%;text-align:center}
    #navbar a {padding:10px;}

    html:
    <div id="navbar">
    <a href="home.html">Home</a>
    <a href="home.html">Animals</a>
    <a href="dogs.html">Dogs</a>
    <a href="home.html">Travels</a>
    <a href="newYork.html">New York</a>
    <a href="misc.html">Misc</a>
    </div>
     
  8. andy5000 thread starter macrumors regular

    Joined:
    Sep 17, 2006
    #8
    now its totally broken seem to have sets of links.check your private messages
     
  9. dalvin200 macrumors 68040

    Joined:
    Mar 24, 2006
    Location:
    Nottingham, UK
    #9
    did u try the code above i posted?

    replied to your PM
     
  10. andy5000 thread starter macrumors regular

    Joined:
    Sep 17, 2006
    #10
    i wanted the main tabs (Home,Animals,Travels,Nature,Music,Misc,About) to be shown permantly then when you hovver over them the sub categories appear(Dogs,New York,flowers,Plants & Trees,musicians,instruments).
     

Share This Page