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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post

    Aligning a logo and menu table at top of page

    Hi

    I'm trying to align a logo and a table together at the top of the page.

    The logo at the top left and then the table (which is the menu bar) to the right of it. I have tried using <div> tags around both but the table is to the right under the logo.

    Code:
    <a href="home.html">
    <div align="left"><img src="pictures/pages JoHO LOGO.png" alt="Joho Designs Logo" border="0"/></div></a>
    <div align="right">
    <table width="90%">
    <tr>
    <td width="12.5%" align="center"><img src="menu bar/row1sq1_home_OP.png" border="0" alt="home"/></td>
    <td width="12.5%" align="center"><img src="menu bar/row1sq3_about_OP.png" border="0" alt="about"/></td>
    <td width="12.5%" align="center"><img src="menu bar/row2sq3_cards_OP.png" border="0" alt="cards"/></td>
    <td width="12.5%" align="center"><img src="menu bar/row3sq1_illustrations_OP.png" border="0" alt="illustrations"/></td>
    <td width="12.5%" align="center"><img src="menu bar/row3sq4_wedding_OP.png" border="0" alt="weddings"/></td>
    <td width="12.5%" align="center"><img src="menu bar/row4sq2_portraits_OP.png" border="0" alt="portraits"/></td>
    <td width="12.5%" align="center"><img src="menu bar/row4sq3_contact_OP.png" border="0" alt="contact"/></td>
    </tr>
    </table>
    </div>
    
    </body>
    can anyone shed any light? is it some CSS needs to be added?

    Cheers

    C

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    You are using outdated elements.

    Get style sheet and link to it in the head of your browser.
    html
    <div class="left">Content</div>
    <div class="right">Content</div>
    <table>
    <tr>
    <td></td>
    <td></td>

    CSS
    .left { float:left; width: 30%;}
    .right {float:right; width: ?}
    table {width: 90%; border: 0;}
    tr {width: 90%; /* less any padding you put on the table*/}
    td {width: 12.50%; border: 0; text-align: center;}

    Really you should not be using table for navigation, there are plenty of free scripts for navigation. Try www.cssplay.com

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Why not use an unordered list for a menu. Thats basically what a menu is anyway.

    Tables, as quartzy said, are not really a good idea for anything other than columnar data and are somewhat limited in how they can be presented and styled.

    A good option for someone new is to download the free tool CSS tab designer. Google it. With it you can quickly design horizontal and verticle navigation menus.
    Teed

  • #4
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post
    Thanks

    I know using Tables is not good, still learning and I find tables easiest!

    however am currently converting site to css so thanks for help!!

    C



  •  

    Posting Permissions

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