RELLY stupid newbie question

Discussion in 'HTML Basics' started by sticker, May 10, 2008.

  1. sticker

    sticker New Member

    Hi,

    I'm a self taught web designer so I'm learned in some areas - lacking in others!

    With the shameless apology out of the way - here goes...

    I'm using tables to build a site - (I know, i know!), Within one master table I've a second split vertically into 2.

    So I have a left side for text / graphics and a right side (much narrower) for a side bar graphic effect.

    Trouble is when I paste the side bar image into the right column, it just sits in the middle - the master table itself is LONG, so I suppose it just centers itself verticially.

    I understand I could just return (shift) the image up, but accross different browsers, it appears in different places!

    I simply want to have the graphic appear at the absolute top of the right side of this table.

    There must be a way!

    PS - In Dreamweaver there's a reference to "Align" in the properties section - "absolute top" doesn't work!

    Thanks in advance - I've been trying to figure out a way all afternoon!
     
  2. MickyWall

    MickyWall New Member

    maybe try valign as a td attribute?
     
  3. sticker

    sticker New Member

    valign="top"

    Worked a charm! thanks Micky!
     
  4. gav240z

    gav240z New Member

    Yeah old school :). Its useful for Email Marketing HTML.

    Using tables for say your grid layout is ok (this is why the doctype transitional was inveted), I'd avoid using lots of nested tables though. It can become somewhat cumbersome to maintain.
     
  5. sticker

    sticker New Member

    Whats the modern alternative - like I said, I'm self taught!

    I'll invest some time into learning the newer method!

    Thanks
     
  6. gav240z

    gav240z New Member

    Modern alternative is to use DIV's for layout and control those through CSS. Infact all formatting information should be removed from your HTML and controlled by CSS.

    So learning XHTML and CSS is your best bet. Its a bit easier these days as browser support is much better than it was previously, however it can be tricky when dealing with IE6 / IE7.

    A List Apart: A List Apart is a good start, but can be somewhat confusing when you get started.

    Also try HTML and CSS Tutorials, References, and Articles | HTML Dog

    and Max Design - standards based web design, development and training

    Using XHTML means you can basically trim lots of data out of your HTML making page load times alot faster and future upgradings and design changes much easier. Its about using the correct markup for the correct items.

    I would probably suggest buying some books by Eric Meyer and Jeffrey Zeldman as some of the information on the internet can be confusing to follow with different people applying *Hacks* to their style sheets.

    Its a bit of a learning curve but certainly worth doing if you are seriously about web design.
     
  7. sticker

    sticker New Member

    Thanks for taking the time to reply! I'll get into those links asap!

    I'd suggest that my current methods are far too time-consuming...

    Appreciate the help. Cheers :)
     
  8. Urgh, I wouldn't want to be learning div layouts all over again... there are so many preachy, waffly guides out there.

    All I can suggest is sitting down with notepad and starting from scratch... don't allow yourself to use any tables and see how good a page you can make... keep building on what you know until you can feasably ditch table layouts.
    You might find yourself thinking "If I was doing this with tables, I'd be done by now", I know I did... a lot.
    But I think you have to forget everything you know and lower your expectations while you learn this new mindset, otherwise it's just frustrating.
    It's hard to change from thinking in tables to thinking in divs, but it's well worth it.

    I think the key to being able to see what you're doing and understanding divs is adding a border:
    border: 1px solid #000;
    to your div's CSS... then playing with size, position, nesting, backgrounds, padding, margin, float, clear, etc.

    And if you get in trouble, just slap different coloured borders on everything (even <p> if you have to) and you'll soon see what's wrong and where.
     
  9. sticker

    sticker New Member

    Thanks 404 - some good advice :)
     

Share This Page