SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Coding a Layout - no idea where to start!!!

    Hey all-

    I'm working on a VIP right now. (very important project).

    I know exactly what look I'm going for and exactly what the layout should be - but I'm clueless as to what would be the best way to code the site. I'm sure that there are endless possibilites, but I'm looking for something clean, efficient, fast, and easy to manage.

    Here's what I want it to look like: CLICK HERE

    That's not an image of the final project, just an example. I don't need the up/down scrollbar either.

    Here's what the layout will be: CLICK HERE

    It's going to be a bunch of boxes, all with 1px borders. I'm not looking for full out code, just an IDEA or something that will work. I'm having trouble with the 1px border and the 3px gap between each box.

    Like I said I want the code to be clean and fairly compatible. I'm all for using CSS, but I'm not looking for 5 nested tables.

    I appreciate ANY and ALL help! I really do!

    THANKS!!
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  2. #2
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WoW! a chance to help my idol

    Look at this expertly hand coded beautiful example of web design (note the cute kids too) ...

    http://www.yourwebbuddy.com/psp/

    Expand and shrink the window, the boxes stay separated. The 1px border can be added by a tag in the style sheet. It's only one table nested within another.

    It would work for what you're trying to do I think. Just look at the source code (remember it's hand-coded) You (and only you) can steal my code in exchange for not entering the next trading post logo contest.

    Palmer

  3. #3
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd try a hybrid css/table design I think, all CSS could be alright too I guess, i still like using tables though

    But if you're going all out for compatability, maybe a few tables would be a good idea

  4. #4
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the cleanest and most efficient in my book would be to use a css/table based layout... using only 1 table for the middle sections structure

    use divs for all the inline stuff such as the header, navigation/footers and use the one table to create the columns, its still far more efficient/easyer creating columns with tables in my opinion, and then use css/divs for the content areas.

  5. #5
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is that site going to be fixed width? If so, it's the ideal candidate for a pure CSS layout - in fact you might even be able to get it working in NS4 as well without having to hide all of the styles. Even if you do go for a hybrid table I strongly suggest using a div for all of the box elements on the site - doing so will make it stupidly easy to sort out the backgrounds, borders and padded edges around the content.

    Why don't you have a go at it with pure CSS and if you get stuck or find it isn't going to be possible switch back to nasty ol' tables? There's no time like the present after all If you decide to do this marking up the page becomes a trivial excercise - just define a div for each "box" and give it an ID, then add the markup for the contents of each div.

  6. #6
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is always Netscape.

    * waits in his tea cup with an umbrella *

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  7. #7
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thanks guys for the great responses!

    Yes, the site is going to be a fixed width: 760.

    Palmer: If I decide to go with HTML, I'll take a look at your code - thanks!

    pl@ and iTec: Thanks guys! I figured that that would be a safe way to go, especially because I am fairly good with tables and I like to use them.

    skunk: You introduced quite the idea for me - I've never tried an all CSS layout. I think I'll spend some time learning about how it's done and see how it works. Is all CSS really that much better than using HTML and CSS? I want something that is extremely easy to template.

    Thanks!
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  8. #8
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    don't worry about the ALL css template things... I havn't seen a good one yet they all have dotted lines and are squared off everywhere

    Just do the main bit as a table, the inner tables can be individual tables and you can define some CSS borders I guess to reduce the need for another table (unless you wanted rounded corners or somthing fancy)

  9. #9
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From a coding point of view, here's why CSS is superior to tables for layout:

    http://www.bath.ac.uk/~cs1spw/nemesis/nights.php

    Take a look at the source code for that page (in particular the stuff in between <body> and </body>). It's beautifully simple - there are four divs, called "header, "content", "navbar" and "footer". Not a table tag in site and as a result the markup is almost as readable as the rendered HTML. Editing the code is a pleasure compared to the unpleasantness of having to wade through lines and lines of table code.

    There are plenty of well designed CSS sites out there if you care to look for them - when you realise that any div in CSS can have a background image with complete control over where in the div it is positioned (and how it is tiled) you can create some very snazzy visual effects. Unfortunately I suck at design so neither of my CSS sites exhibit this

  10. #10
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Adam, here's a place to find the code for an all css table layout. I think it's what you're looking for.
    http://www.glish.com/css/

  11. #11
    SitePoint Addict psychedelic's Avatar
    Join Date
    Feb 2002
    Location
    Boston
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Skunk
    http://www.bath.ac.uk/~cs1spw/nemesis/nights.php

    Take a look at the source code for that page (in particular the stuff in between <body> and </body>).
    I'm using IE 6 on WinXP, and nothing happens when I do View > Source
    The Internet is prettier on a Mac.

  12. #12
    Shiver me timbers!! anthony_irl's Avatar
    Join Date
    Aug 1999
    Location
    Dublin, Ireland
    Posts
    495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by psychedelic


    I'm using IE 6 on WinXP, and nothing happens when I do View > Source
    Same here. I put view-source: in the location bar before the address and it displayed then.

    BTW swimm I'm doing the exact same thing at the moment and was wondering which way to go myself. I think Im gonna use a hybrid of no more than 2 tables and divs.
    Last edited by anthony_irl; Jul 10, 2002 at 05:40.
    Anthony - How's tings?

    24 hours in a day, 24 beers in a case. Coincidence? I think not.
    Contact me by: PM Email NEW! Carrier Pigeon

  13. #13
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like I'm going to have to do quite a bit of messing around before I find which route I want to take. All CSS looks like a nice way to go, if I can figure out. Thanks for the great link, Palmer.

    Can CSS layouts do as much as table layouts? For example, could www.sitepoint.com be done in CSS and look exactly the same?
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  14. #14
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would be pretty close although I don't know if it would be identical.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  15. #15
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by swimm5001
    Can CSS layouts do as much as table layouts? For example, could www.sitepoint.com be done in CSS and look exactly the same?
    see for yourself :0)


    http://www.webmasterbase.com/article/379/

  16. #16
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can CSS layouts do as much as table layouts? For example, could www.sitepoint.com be done in CSS and look exactly the same?

    In a perfect world yes. You'd of course run into older browsers that would be clueless. Some browser sniffer code could redirect those relicts to a table based layout or a page that suggests it's time for a new browser.

    I believe we're at the point in design where we can safely assume most people are using version 4 browsers and later. All of those support CSS although there might be a debate about that statement with Netscape 4.7

    Palmer


Bookmarks

Posting Permissions

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