How do you manage your layout?

[pedrobcabral]

Sorry if this question has already been posted here before. I made a search for "layout/manage" but this is a Design/Layoutt thread so there are lots of topics with that word.

The question is, how do you guys manage to do your layout when starting a website project? What do you prefer to use: Tables? Layers? The "DIV" thing?

I'm making this question because I have ever used tables with border 0, and a little CSS. While I was searching the web from some templates I saw that thing DIV and Layer which I had never seen before  :o:o:o:o:o:o

- Could you tell some few words about this? Pros/Cons about each way.

Thank you.

[roopurt18]

CSS seems to be the norm these days.

[pedrobcabral]

I was talking about the places where you put the 'content', pictures/text..

[redbullmarky]

in a basic nutshell: layers (<div> tags positioned and styled by CSS) are often much trickier to set up, but make it easy to do some pretty drastic changes to a sites layout if required. tables on the other hand are the reverse. they are very easy to set up, but tricky when it comes to modifications. also tables are slower to draw for most browsers than layers are.

several months ago, i decided to make a site purely using CSS + layers. nothing complex, mind - just a nice, simple XHTML Strict site with a handful of pages. To say it was easy would be a lie, but i'm pretty chuffed i went down that road. once you get used to css, you realise how flexible things can be and how much more you can do.

i'm not gonna harp on about how tables are for tabular data and how layers are for layouts, as there's no getting away from the fact that tables can be a nice quick way of putting a page together - or organising forms (i still use tables for non-tabular data occasionally). but i'd strongly recommend taking the time out to learn about layers (<div>) and CSS and pretty much guarantee you wont look back.

[roopurt18]

Generally you're going to have 3 to 5 conceptual pieces on your pages.  There will be the logo / banner, the footer, the navigation area, and the main content block.  Every page will use that basic layout that has the same html and same stylesheet.

What you want to do is determine which pieces of that content are going to change during someone's use of your site.  The content is obviously going to change.  The navigation might change as well after someone logs in or out.

The pieces that are dynamic, or changing, are replaced in your template html file with slugs like {CONTENT} or {NAV_MENU}.  Each page in your site opens this template file, builds appropriate content, and then replaces the slugs with the end result.

$html = file_get_contents(TEMPLATE_FILE);
// build content into $content
$html = str_replace("{CONTENT}", $content, $html);
// build the nav menu into $nav_menu
$html = str_replace("{NAV_MENU}", $nav_menu, $html);

[pedrobcabral]

That's what I wanted to read. Thank you.

[anatak]

If you want to get into the DIV thing
this is a good site to start I think (I didn't take the step yet)

http://css.maxdesign.com.au/floatutorial/introduction.htm

EDIT fixed link

[RDFrame]

I definately go CSS these days.  What used to take me an hour to do with HTML tables now only takes a couple minutes. :)

Matt

[c4onastick]

Any other good suggestions on where to start looking for CSS tutorials for total site layout. I understand the basic elements, but I'm not sure I see the big picture. I spent for ever getting nested tables working to make my site, I'd love to learn CSS.

[c4onastick]

[quote author=c4onastick link=topic=111321.msg462241#msg462241 date=1162532894]
Any other good suggestions on where to start looking for CSS tutorials for total site layout. I understand the basic elements, but I'm not sure I see the big picture. I spent for ever getting nested tables working to make my site, I'd love to learn CSS.
[/quote]I'll go ahead and reply to myself, :D. I found a great page with some great examples of css layouts, as well as a "hack" for the IE5x compatability problem.

[url=http://www.glish.com/css/home.asp]http://www.glish.com/css/home.asp[/url]
This is what I was looking for. Looks pretty easy to implement. And much easier to change than table layouts.

[c4onastick]

Anyone else have any good tutorials to get a good, fluid, table-like layout set-up? I've been wrestling with a CSS layout for my page to replicate the table layout I have going but not getting any closer...

[bqallover]

I use only CSS for layout.  It's much better for accessibility as you can lay things out conceptually in code.  Screen-reading software can speak the page sensibly and you have very good control over where things go visually.

Having said that, CSS compatibility amongst browsers can be a total nightmare and one I generally bump into on every project.