WEB Help with tables v.pics v.i'm the biggest noob ever

Discussion in 'OT Technology' started by Falconer, Oct 2, 2008.

  1. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    Ok I'm pretty sure what I'm trying to do is simple, but I've been messing with it in Dreamweaver and notepad for the last day and can't get it right. I am seriously annoyed right now.

    I have all my images and everything ready, but I can't get my site formatted the way I want.

    Here's the layout I want:

    [​IMG]

    I want the entire site to be at a fixed width (say 900 for now)

    I tried doing it all in one table, but I encountered two problems:

    1. On the menu option images on the left side, there were spaces between them, and I don't want spaces. I have borders and everything set to 0. How do I get no space between images stacked vertically?

    2. When I would try to add the data for the "info here based on whatever menu option you it would add another column to the right.
    This confused the hell out of me because in the original table property I set the width to 900. So how is adding another data column extending the table past 900? Isn't the first table value you set absolute for the entire table? How do I force a table to be one width and not change no matter what I do to subsequent rows?


    Now I'm very confused here because I tried it in w3school's html editor and got basically what I was looking for. But when I try the same thing in Macromedia, I get spaces between my menu buttons. What am I not seeing here?

    Here's the code I used (for the images I just used an image that was on that site):

    Code:
    <table width="900" border="1">
       <tr>
          <td colspan=2> <center>Image.jpg goes here</td>
       </tr>
       <tr>
          <td width="234"><img src="http://www.w3schools.com/images/w3default80.jpg">
    
             <img src="http://www.w3schools.com/images/w3default80.jpg">
             <img src="http://www.w3schools.com/images/w3default80.jpg">
                <td valign="top">hi I should be on the right
                </td>
         </tr>
         </td>
       <tr>
          <td colspan="2">I should be at the bottom footer.jpg
          </td>
       </tr>
    </table>
    </body>
    </html>
    
    And here's the correct result that I got (notice how there's no spaces between the images):

    [​IMG]

    But using that same exact format in my editor and browser puts spaces between the images. What am I doing wrong?

    Also, how do I eliminate the space between the title image and the first image in my menu? This seems to happen "sometimes" with Macromedia (ie. I preview page in browser and it doesn't have a space, and then I preview it again and there IS a space).

    Ok, is this possible to do with only one table or should I be adding more? I was thinking like the header gets its own row, then the menu items and info section are two rows, and then the footer is its own row. That's doable, right? I've seen other websites with roughly the same configuration but they have like 20 tables... is that necessary?

    Thanks.
     
  2. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
       <title>YUI Base Page</title>
       <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
    </head>
    <body>
    <div id="doc4" class="yui-t2">
       <div id="hd"><h1>Header</h1></div>
       <div id="bd">
    	<div id="yui-main">
    	<div class="yui-b"><div class="yui-g">
    	<!-- YOUR DATA GOES HERE -->
    	</div>
    </div>
    	</div>
    	<div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div>
    	
    	</div>
       <div id="ft">Footer is here.</div>
    </div>
    </body>
    </html>
    
    you're welcome
     
  3. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    oh snacks
     
  4. hurleyint1386

    hurleyint1386 Someone has sand in their vagina

    Joined:
    Jan 6, 2005
    Messages:
    3,687
    Likes Received:
    0
    Location:
    Rochester, NY
    :werd:

    Table layout == :nono:
     
  5. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    Wait why is table layout bad?

    I think I'm stuck in like 1999 of web design (last time I did anything)
     
  6. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    Thanks!

    But I don't think I know what any of that stuff means.

    Time to go do reasearch!

    can I leave that css in there or do I have to make my own?
     
  7. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
  8. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    say in the meantime I want a basic version of my website running.

    Is what i'm doing too complicated to do with tables, or is it possible? Also how do I prevent spaces between my images? How come it seems to be intermittent as to whether they appear or not?

    Is w3schools a good place to learn this? That code you gave me might as well be written in Russian. I have no idea what any of it means. Is it css? I need to at least know where to start studying.

    Thanks.
     
  9. hurleyint1386

    hurleyint1386 Someone has sand in their vagina

    Joined:
    Jan 6, 2005
    Messages:
    3,687
    Likes Received:
    0
    Location:
    Rochester, NY
    it's possible, but not fun. to switch from a table layout to CSS completely can be time consuming. Its better to do it at the beginning and not have to worry about it in the future
     
  10. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    When you guys say "tableless CSS" what do you mean? Like no <table> tags at all?

    I just did the CSS tutorial at w3schools and in their "CSS Table" lessons they use <table> tags.
     
  11. hurleyint1386

    hurleyint1386 Someone has sand in their vagina

    Joined:
    Jan 6, 2005
    Messages:
    3,687
    Likes Received:
    0
    Location:
    Rochester, NY
    Correct. tables aren't a bad thing, they should only be used for certain things. You don't use a table to layout a website. If you've got any kind of data input (i.e. a form) then a table is perfect for something like that. You can use CSS to alter tables which is what you see.
     
  12. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    Holy crap I'm (very slowly) starting to get this CSS stuff.

    I understand it in concept, but it takes me a while to do certain things. But I think I'm slowly getting the type of layout I want using CSS and no tables at all!
     
  13. hurleyint1386

    hurleyint1386 Someone has sand in their vagina

    Joined:
    Jan 6, 2005
    Messages:
    3,687
    Likes Received:
    0
    Location:
    Rochester, NY
    Awesome. Congrats! If you need any help, just ask. We're always here to help. Especially if you are staying away from table layout and using CSS, we'll definitely help.
     

Share This Page