Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6

Thread: tables help

  1. #1
    Member
    Join Date
    Jan 2005
    Posts
    96
    Member #
    8693
    Hi, this is what my code looks like:

    <table width="100%" cellspacing="0" cellpadding="0" class="3a">
    <tr valign="top">
    <td><img src="side.gif" height="79" width="8"><img src="#" height="79" width="122"></td>
    </tr>
    <tr valign="top">
    <td valign="top"><img src="side.gif" height="168" width="8"><img src="logocolumn.gif" width="122" height="12"><img src="logocolumn.gif" width="122" height="12"><img src="logocolumn.gif" width="122" height="12"></td>
    </tr>
    </table>

    What I'm trying to do is create a table row that has a vertically long image on the left side of the table row, and a series of smaller images (buttons, to be exact) stacked on top of one another, immediately to the right of this vertically long image. The effect I'm looking for is similar to Web Design Forums's Earth background, where a picture of the Earth is to the left of the content. To give you a better example, I created this mock up in photoshop.

    Thanks for your help!
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    In order to achieve this, you would apply a "rowspan" to your <td>. That will prevent you from having to break up the image. This code will create a side bar with room for 6 buttons (but no open spaces like above, to add those, make the rowspan="8" and create two more rows in your table).

    HTML Code:
    <table>
      <tr>
        <td rowspan="6"><img src="side.gif" /></td>
        <td>button1</td>
      </tr>
      <tr>
        <td>button2</td>
      </tr>
    .
    .
    .
        <td>button6</td>
      </tr>
    </table>
    Quick tut: rowspan & colspan (AKA column span, might be used for say, a header) allow a cell (or td) to extend the width or height of the span. It is IMPERATIVE that you count correctly or things get really nutty!
    Shani

    I have an eye for detail like you'd never believe.

  4. #3
    Member
    Join Date
    Jan 2005
    Posts
    96
    Member #
    8693
    sorry, but that didn't work. Instead of arranging the buttons in a vertical row next to the side.gif, it arranged the buttons horizontally, which expanded the table horizontally.

  5. #4
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    Go here...

    http://css.maxdesign.com.au/listamatic/index.htm

    Then never look back at trying to use tables to create your navigation.
    No ma'am, we in IT don't have a sense of humor we're aware of.

  6. #5
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Please post your code.
    Shani

    I have an eye for detail like you'd never believe.

  7. #6
    Member
    Join Date
    Mar 2006
    Posts
    84
    Member #
    12765
    Not sure, but DCScene's code worked as it should, looks similar to the image you posted


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:25 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com