Need a new web host or having a problem with a script? Tips and advice on the best way to design, build and maintain your most valuable asset - your website!

Using CSS in Dreamweaver
bobbyd
Posts: 4
Joined: 17 Apr 07
Trust:
27 May 08 8:43 pm

Using CSS in Dreamweaver

Hello,

How's it going?

I have been a member for about a year now and have been doing alot of 'learning' lately and finally have come to a place where I feel prepared to move forward with my site..

I've submitted to designing with CSS layouts as this seems to be the wave of the future and more efficient in the long run.

Does anyone have some insight on which CSS layout is most 'user friendly' in DW Cs3 packaged layouts.

Choices are:

* Elastic layout – The values for the overall width, as well as any columns within, are written in em units. This allows the layout to scale with the browser’s designated base font size. This can be more attractive and accessible for low vision users since the column’s widths will get wider allowing a comfortable, readable line length at any size. Since the overall width will scale, your design must allow for a variable width.
* Fixed layout – The values for the overall width, as well as any columns within, are written using pixel units. The layout is centered in the user’s browser window.
* Liquid layout – The values for the overall width, as well as any columns within, are written using percentages. The percentage is calculated from the size of the user’s browser window.
* Hybrid layout – Hybrid layouts combine two of the other types of layouts – elastic and liquid. The overall width of the page is 100% but the side columns values are set to em units.
* Absolutely Positioned layouts – all the previous layouts use floats for the outer columns. The absolutely positioned layouts do exactly what their name implies – they have absolutely positioned outer columns. You must remember, when using these layouts that the side columns are taken “out of the flow” of the document and thus, may have some undesirable results (for instance, your footer won’t “see” where the side column ends and may overlap them on pages where the main content area contains less content than the side columns).

I've used the elastic layout to practice and learn how to manipulate tools and css on the page, and it seems fairly straightforward, but before I start building my site, I was hoping to get some insight on whether this is the best choice or not?

Look forward to any reply,

Thanks

Bobby D.
  • 1
Site Admin
aletta
Posts: 3392
Joined: 09 Jul 06
Trust:
28 May 08 10:59 pm

 Hey Bobby,

From a webmonkey's perspective it's wonderful to see someone actually considering these things, rather than just whacking in a bunch of tables :) Good job, old boy!

As for which one is most useful... with the exception of the absolute positioned layout (not recommended unless you're doing a really graphics heavy, highly designed site that will never be updated, ever) they're all much of a muchness.

Probably the easiest one to start with is the fixed width layout, since you'll be able to design headers and graphics and things with a definite size in mind, and it's easier to make a swish looking site that isn't going to be offensive for users with different capabilities. You can usually assume that people are running a minimum of 1024x768 these days, so it's not as cramped as it used to be when we were designing for 800x600.

Fluid layouts can be problematic for people with really big monitors (or really high resolutions) since it tends to make text flow aaaaallllll the way across the screen, and line lengths are too long to read. Until Internet Explorer properly implements the "max-width" thing that will allow you to say "this should never be wider than XXX pixels" you're going to run into problems.

For the new Affilorama layout we're going with an elastic layout, which keeps everything in proportion. I think your CSS mojo needs to be pretty strong for this one... particularly if you want your images to be elastic as well! :D

If I were you, I would probably start out with a fixed width design, and fix it at 800-1000 pixels wide. Keep it in DIVs... don't go back to tables whatever you do. Once you know how to make great looking sites in a fixed width layout, try to convert a fixed width layout page into an elastic page and see if you can make it look the same. I think you'll learn more than if you were just to jump into elastic layouts, since there are design tricks you can do in fixed that are really difficult to do in elastic, and if you were just to jump into elastic you might never even think of them.

I think the definition of "geek" is when you can rant on for five paragraphs about the pros and cons of web layouts. Gah.

Hope that helps though!
Aletta
  • 1
Are your changes not showing up on your website? Try doing a hard refresh! http://www.refreshyourcache.com/en/cache/
 
Site Admin
aletta
Posts: 3392
Joined: 09 Jul 06
Trust:
28 May 08 11:08 pm

 P.S - Moved to the "website stuff" category because of super geekiness :)
  • 1
Are your changes not showing up on your website? Try doing a hard refresh! http://www.refreshyourcache.com/en/cache/
 
PremiumMember
chatyak86
Posts: 1085
Joined: 17 Jun 06
Trust:
01 Jun 08 10:34 pm

 I voted fixed layout for your main tables using CSS and div tags. etc...
  • 1
Topic locked