Jump to content

How do you manage your layout?


pedrobcabral

Recommended Posts

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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);
Link to comment
Share on other sites

  • 2 weeks later...
[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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.