that's it i'm giving up CSS :(

Beyonce...yummmmmmmmmmmmmmmmmmmmm!

What were you talking about?

What were you talking about?

aahhhhh
men.

( )

Aw, women. They're so shallow. They have no appreciation of the æsthetics of surrounding oneself with beauty. With them, it's just 'how fast can she type'. Shallow, shallow, shallow.

On to the page design:

While the detail may get hairy, the basic layout may be simplified. Think of it as three horizontal bands. These are

• the banner across the top,
  
• the first content band with
  • two equi-width columns
    • the right hand column being subdivided into two columns


• the second content band with
  
  
  • two unequal width columns

Set up the basic containers and get them located in relation to one another. Then, each container can be filled with content and appropriately styled.

cheers,

gary

[/][/][/][/]

Well I could say that part of your problem lies with those two programmes , but many do use them and I suppose quite successfully ,
It may well be to do with the learning curve involved with getting used to producing layouts with them and that questions on how to use them and overcome problems would be best dealt with by a forum that is aimed specifically at those programmes and where you would probably gain more detailed help.

Here you will find that there are many like me that have no love of either of these programmes, considering them to produce bad code and to confuse the web design process with there proprietary methods and would always advocate learning to hand code especially if one wants to really get to grips with understanding how it all gels together.

I worry that like many you may be trying to jump in the deep end, having produced an image you now want it to become a web page .

You really need to sit down and sketch out a layout on paper first, working out what sections you want, where your major divisions are going to be and how they will be positioned, on to this you need to mentally lay the image and sort out where you will slice it up to fit the layout i.e the main image at the top will doubtless be the header so you would slice the image at a point just bellow the picture and set in the header as a background image adjusting the header height as needed.
To be honest the rest of the image looks to be just background colours and could be achieved by just adding background colour to the various divs.

I think that DW may be overcomplicating the layout with tables and image slicing and do think that you really could do with just going through some basic CSS-P tutorials, you need a good idea of how css boxes and positioning work before you can piece together a layout, don't confuse DW with web design it is a device to supposedly make life easier by 'doing' as much as possible for you chief amongst which is your thinking.

Whatever you decide to do don't give up , it does get easier and you'll laugh at yourself when you look back.
Start going through tutorials, try to start getting a mental picture of how your layouts going to flow on the page and how you want image to fit in to it, it's just as easier to hand slice an image to fit the divs in your layout.

Whatever you do don't use tables though

Have a go at setting out a page and post it up here we can start to show you how to proceed but if it's going to be a DW construct expect a little moaning

Hugo.

Hugo's right. There is no substitute for learning html+css by sitting at the keyboard and hand coding.

My only experience with DW and other 'helper' apps is in fixing what they call html. I suppose it has a place, and likely that place is in a production sweat shop cranking out templated pages.

Find somebody you really don't like, and sell them your copy of DW.

cheers,

gary

He's done it again, beaten to it and by one minute (and probably a few milliseconds) I've just got to learn to type faster.

"Going on and on, Hugo wrote"
Are you trying to tell me something Gary

The art of waffling is a subtle and practised one, and I am a master.

As an example of DW place, I recall sitting in a cafe listening in to two young, suited, slightly full of themselves marketing/media types discussing the fact that now they had bought a copy of DW they could start designing and maintaining their own web site, that is of course once they had spent the couple of days learning the interface that they imagined it would take, dead simple. Oh how I almost rounded on them with a vitriolic outburst on the effort and skill involved in coding, but instead I ordered another coffee and sighed deeply :roll:

This is the problem with that piece of **** software giving the impression that there is nothing else involved in the skills required to be a web designer/developer , makes me mad it does.

Hugo.

If I might chip in here please Hugo old bean: the original DreamWeaver was a great bit of software. It helped graphic designers like me to create our first websites and it did so in a way that impressed the clients who paid our bills and so helped us to make a living.

It was thanks to DW that I could see how html code was used to construct tables, and it even helped me to make a start with ASP. It was a helping hand up the first rung of the coding ladder (not strictly true in my case as I had a previous life with computers, but the sentiment is valid nonetheless). As I created pages with DW, I looked at what was happening and then decided to read about the resultant code. At this point I started to see the weaknesses of DW as, like all such 'helper' applications, it doesn't know what I want to end up with so it throws all sorts of complex code down in order to create relatively simple layouts.

The more I read about html and ASP (soon replaced by PHP studies), the more I realised that hand coding was far, far neater, leaner and more efficient in every respect. Many years later I still use DW to colour my code and ftp my files up, but that's all I use it for. But like the racing driver who looks back with fond memories to his first race in a go-kart, so I recognise that I owe a lot to DreamWeaver.

That said; it's had its day and in the new 'CSS' era, it and other applications like it cannot get anywhere close to the power and efficiency of hand-coding layouts. CSS is so flexible and fluid that the only way a helper tool can possibly help is by way of creating pre-determined templates such as the excellent Layout Generator that you'll find on this very website.

So RedHurricane, use DW to get your first foot on the ladder but don't hang around there too long. No self-respecting modern-day website designer should even contemplate going beyond their first website project without learning about CSS and doing it all by hand (oh-er). It's not easy and you'll pull your hair out over Internet Explorer, but if you pride yourself on good workmanship and efficiency, you'll get reading and experimenting. Trust me - you won't look back

hi everyone,
thanks for encouraging me
i haven't given up on css, i promise i'll do everything i can to lay off the tables. slowly.

kk5st, thanks for outlining my request it's been very helpful!
hugo & roytheboy, thanks for sharing the stories of unfortunate css tales.
i forgot to add that i myself notepad-code everything, but i will usually use editors to show how to do something i'm not sure of.

i hope i'll be able to use tutorials as an assitance from now on,
though i really feel most of them are much too difficult and advanced for me :?

thanks guys!
Sarit

I hand code, and have been using CSS for three months now. I really like the control I get with stylesheets, but I still can't get myself to build a site without tables.
At what point we will transform?

Liz

Blasphemy!!!!!!!

At the point that you decide to take the plunge ,no point avoiding the issue , you'll have to make the decision to try at some time , there's no blinding light , no burning bush ,it's up to you and the longer you leave it the more you'll feel left behind in the march towards standards and semantic markup.

Start creating some practise layouts or convert an old layout to get the feel ,but make a start and bear in mind that here you will not find many supporters of table based layouts here.

Homily over

Hugo.

Preach it, brothah!

my suggestion is ..... ditch fireworks..... forever, and never look back. And by this I don't mean use Imageready.

as far as dreamweaver goes, its a great tool for beginners, and personally I still use it quite often.... but only for the color coding, my other suggestion to you would be a program called "homesite" from macromedia, great program and lets your preview your designs before you save them! ... no more having to save numorus backups (although its always a good idea) so if it doesn't work, just close without saving and reopen the version that did work .

another plus side to dreamweaver personally, it has taught me alot of what I know about CSS.. those handy little drop down menus with all the commands in them really helped me get started with CSS (at first just styling tables, don't really use the dropdowns anymore, but still nice to have around sometimes).

don't deny the power of dreamweaver!

its a sloppy buggy resource hog of a tool, but still a valid and respectable tool none the less.

++ SUMMARY ++
= ditch fireworks
= learn with dreamweaver
= get Homesite
= read the next post

P.S. I still love tables too, they are sloppy big and cumbersum, but they give you a level of control will CSS that can't be beat (YET). If its an information driven site... CSS all the way, E-Commerce, or very graphically heavy... tables.... just my opinion. Once CSS becomes more standard and predictable accross MOST browsers (and by this I mean no more "hacks" to get a layout to look the same in safari as it does in firefox as it does in IE, get my drift) then it will be a tool so powerful tables will be put back in their place of just holding series of numbers and data .... can't wait

Never a truer phrase spoken in all objectivity.

Like you said CSS will be great. Until then my advice is to combine CSS and tables to get the layout you require. Not everybody wants a lame, blog-looking layout. Sometimes we want something that looks a little more exciting and right now only tables can give that to you across the major browsers.

RedHurricane, et al, nothing against pure CSS. I really admire the concept and have been trying to convert my old table-based sites to div-powered sites, but it could make you tear your hair out. My advice to you would be to come up with 3 home pages you admire most visually (lots of multi-column image layouts, sub-layouts, etc.). Then get some of the pure CSS gurus on here to convert that to pure div-powered pages (no tables) that look exactly as the traditional table-based layout, and exactly the same in Mozilla, IE, Firefox, Opera, and Safari. It cannot be done.

I wish I had the time to prove you wrong. And there's the rub: just about anything can be done with CSS that can be done with tables BUT it takes a lot of experience and time to get it working across all browsers (which is the fault of the browser vendors, not the CSS). CSS is far from perfect and yes, tables are much easier to use for layouts per se BUT the flexibility, control and ability to change layouts in an instant without touching the html mark-up cannot begin to be matched by tables. There is no contest and it's a no-brainer to see, once you start laying sites out from scratch with CSS instead of just trying to convert table layouts (which admittedly is a good place to start). Not so long ago I looked on CSS in the same way that you do now, but once I realised that I could afford to start thinking 'outside the box' (quite literally), it was like the dawning of a new age for me. Long live CSS and will M$ pleeeeeease get their act together with IE [-o<

Roy beat me to it,

canobi2004, are you seriously trying to say that table layouts are more interesting than CSS based ones ( I've seen many lame blogs created with tables) half the problem is that people when coming to CSS-P from table based thinking fail to actually try and understand the positional power and subtlety that CSS offers and are still thinking in terms of table based layouts converted straight to CSS, they have no one to blame but themselves for uninspired design.

Granted that their are issues with the CSS specs and that some properties were ill considered but the majority of the problems stem - as Roy mentioned - from poor implementation on the part of the browser manufacturers and we shouldn't blame CSS nor use it as an excuse to continue to use tables for layout. Remember that it is considered semantically incorrect to use a table for layout it's intended purpose is to hold tabulated data and as such if one is to code correctly and follow standards then you have no choice but to understand how to use CSS-P

It's all very well giving advice to continue using tables for layout but this is a CSS forum and a large part of that concept is 'Standards' and semantic accessible coding and the general thinking is that tables should not be used for layouts, and we attempt to demonstrate that fact time and time again.

Your statement regards tearing your hair out over converting layouts suggests the fact that as I previously said one is attempting to re-create one concept directly to another and imo this is a mistake. Table layouts don't necessarily convert directly, one has to rethink the layout with a different mindset, essentially breaking the rigid inflexible mode one becomes trapped in with tables.

CSS represents a certain amount of freedom in laying out divs and it seems that this, more than anything, throws table based designers. yes sorry there are problems but one needs to just get on and deal with them, these problems as frustrating as they are ( and believe me, I get as frustrated as the next person with them) do not outweigh the benefits that come with using CSS to it's fullest

In short every time I hear the argument that it's better to continue to use tables until such time as CSS works fully cross browser, I tend to think yet again someone has not really put the time and effort in with CSS.

Oh and please don't advise anyone to present a table layout for us to convert, just in order to show that it's impossible ?, why should we want to bother I would rather spend my time helping out someone making the effort to work with CSS fully, than be challenged to prove a point

Hugo.

To abandon CSS because of incompatibilities between browsers is simply short sighted at best. We live in a new world with new technology. Have you ever tried to look at a tables based website on a mobile phone or similar web device? Have you looked at your site with a screen reader?

CSS separated the markup from the presentation and allows you to use the markup to create a document flow that will work in any web appliance. Even if images are off. The content will be laid out in a logical and contextual manner. Then you can use CSS to place the parts into a beautiful layout (or an ugly one as we've all seen ).

CSS also allows the same markup to be laid out in different manners for different purposes. No need to create a page for a browser and another for printing...just change a few of the css rules and there you have it.

Why the hell would you ever care whether a page looked exactly the same in every browser? If you want pixel perfection, go down to your print shop and have your page litho'd. The web is not print. You have no control over the UA that will render your work. Lynx will not ever show your lovely background image, nor will a Braille pad or a screen reader. Have you checked out that wonderful table layout in your cell or PDA?

The visitor has no idea and couldn't care less if something is different in another browser. Pixel perfection? It just doesn't matter. The page only needs to render well, not exactly the same in all browsers.

A page which has html that is well formed, well structured, and semantic, regardless of how complex the css controlled layout is, will render intelligibly in any UA. The same is not true of any complex (nested) table design. A complex table's html may be well formed, but cannot be well structured or semantic. A UA that does not support tables, and that includes most, if not all assistive technology*, will render in unknown ways.

You're worried about hacks? There are really not that many css hacks, and most are aimed at one browser. (OK, that browser is the 800lb. gorilla of browsers.) There is certainly no css hack that compares in ugliness to the spacer.gif. The table markup itself is a gawdawful hack.

My experience and that of others, if their stories are true, is that it takes at least twice the time to maintain a table layout page. It's kinda screwing your customers if you have to charge them double the hours that it should take.

Finally, if you can't get the results you want, don't blame the tools. Where html+css is concerned, you just haven't developed the skills yet.

cheers,

gary

*Is your client subject to the various accessibility laws? In the US, some courts have held that commercial websites are subject to the ADA. I understand that the EU, UK, Australian and Canadian laws are tougher than ours. Table layouts could put them in jeopardy.

Deep breaths now....deep cleansing breaths!

I've got to defend Dreamweaver a little bit. I've used it since it became available since I could not stand the silly Microsoft attempt with FrontPage. IE and Front Page is what sucks. Not Dreamweaver.

Dreamweaver has these truly awsome features.
Snippet Library (I add my own collection of stuff)
Rapid Templating
Rapid application development
Rapid integration of external code (Flash, PHP, MySQL, etc)
A truly beautiful feature I use in nearly all my site projects for clients is the ability to use a skin image in the background as a guideline for layouts.
And the list goes on.

Now if I could just master that damn CSS.... I would be unstopable.

Jared

*tiptoes in carefully*

I'm pretty new to web design in every way ('bout 6 months in), and I confess I've never used either tables or any software to create pages. Just good ol' trial and error with a simple text editor (if you're on Mac, BBEdit can't be beat) for both html and CSS, using practice layouts I've found all over the web.

I'm a freak, no doubt, or maybe just The New Generation but I personally find tables far more complicated and confusing to work with for layout unless I need to tabulate stuff within a div somewhere (whassup with all those weird <td>s everywhere? How do you always make sure you've closed everything off? 6 lines or code or more when you could just float or center a <div>? Aghhh!) I've had to convert some pages that were written by someone else in tables, and it can be a nightmare. Now I'm gingerly wading into javacript and PHP, but that's a different kettle o' fish --

I'm probably repeating my betters here in terms of advice, but WestCiv has some brilliant tutorials that taught me literally everything I needed to know about CSS.

Why not take a look at some of the excellent CSS layout reservoirs that are floating around, & see which one might be adapted for your image? A header image with a bunch o' columns seems to be everywhere, & pretty much each of these "prefab" CSS designs has already been worked over for browser compatibility, so they won't glitch you while you individualize 'em:

http://www.glish.com/css/

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

http://www.dezwozhere.com/links.html

http://www.positioniseverything.net/index.php

etc.

Hm interesting site, was that produced with Dreamweaver?

I will concede that these sorts of programs can aid one in marshaling their forces so to speak, to keep things organised as long as you do really know how to deal with things by hand first otherwise you are just in the hands of a program designed to create the illusion that it is the be all and end all of web design.
It's no good if when the program is removed one just flounders because they don't really know how to code, as is the case with so many.
And it can produce rubbish code, also one tires of hearing how "it looked alright in DW preview but not when I looked in a proper browser" :roll:

Oh and Html-kit has all of the features mentioned and some(maybe not 'skin image' whatever that may be) including very good PHP and other language integration and it's FREE!

Hugo.

After my first pure CSS layout written by hand I trashed both Dreamweaver and Golive. It is much easier to do everything by hand than it is to layout something in either wysiwyg and then fix the crappy code it puts out.

I've been using CSS for font and element formatting for a few years now, but for layouts about three months. I just ordered two books on CSS so I'm not in denial as to the fact that it will become the major standard. However, the innovation is incredibly discontinous (no fault of its own because if there's a better way it's only fair to use it) and the browser manufacturers aren't making it easier. Maybe when I'm done with the texts I'll have a completely different view. It's just very frustrating with all the hacks, getting it to work on one browser then it doesn't work as well on another, etc.

Your point is well taken and perhaps one needs to think differently about the overall design. Bottomline is that I need the old sites to look the same with CSS as they did with table layouts. How I'm going to do that is another question. I have to keep it locked until I can get around CSS to make it happen. The sites aren't mine, they are for clients so they have look the same, CSS or no.

Point taken. However I don't think there's anything wrong in wanting a table-based site looking the same with CSS, across browsers. Why should I make a compromise in design because of a change in technology? I'd rather learn how to get the same results with the new stuff, even if I need to build in accessibility, mobile access, etc. With the new learning tools I'll soon be receiving, that shouldn't be too long from now.

Anyway, thanks a lot for the constructive criticism.

No Hugo; That site wasn't developed with Dreamweaver, thats my remote server where I post my working pages. Theres just no front page yet.

CSS would be my new best friend if layouts had a more intuitive or should I say visual means of achieving them. I likely just spoke without having all the facts since I've avoided CSS for the last three years.

I need to take a second look at html-kit, "Just Because" I wasn't aware that it was that feature rich.

About that hand coding :twisted: I havn't seen anyone hand code a page since I left college in 1995. Back then we bragged about it because it was cool and fashionable to tell people that you were above all the fancy software you just hand coded your pages.

So... I'm a bit amazed at how much "RAW" hand coding is still done. I'm pampered I guess by the split window in Dreamweaver where I can just plug in elements and change them with the code window.

Now What about these layout issues? tutorials anyone.

Jared

I see I thought that maybe you were paying homage to Andy Warhol's film 'Blue'

Regards CSS being more visual and without wishing to sound too full of myself I find that the more I hand code the better I become at visualizing raw code in my head, I tend to find that I can code a CSS layout blind and know pretty much how it will look when I check it in a browser it's a useful discipline as it prevents that possible pampering creeping in and keeps one sharp also one tends to absorb things much better.

Having said all that I will and do use editors as they do make life a bit easier and I do like my colour coding pointing out the fact that I missed a > so I'm not against using tools per se but just to allowing them to be substitutes for raw ability, these tools are best used by those that understand their limitations.

So hand coding is not about being cool and fashionable it's about knowing your craft fully, once you do, hey use any tools you like to make life easier

Html-kit does seem to be extremely feature rich for free software
having template librarys, snippets, active preview windows, batch actions, ftp, php support , plugins,speech recognition etc

All too much for me, I prefer something less cluttered and simple

Hugo.

Thanks HUGO; Not a bad film "Blue".

About that CSS. The challenge for me is gravitating to what I know to be a better method of layouts using CSS. The layout is my main issue.

I get that repeating head-ache when I use the CSS Generator on this site only to find that any number of the columns can grow beyond the footer when I plug dynamic content into it. Very unattractive. Very frustrating, and is likely the main reason I have stuck with tables above all else.

I certainly respect your CSS and coding knowledge and the learning curve is my handicap considering I have a project due YESTERDAY entirely CSS layout.

Thanks for your response.
Jared.

sites I'm working on..

All Css :

http://lifeorganizers.com/indexpos.htm
http://cableorganizer.com/cabopos/
http://www.abccook.com/c101pos/

all work relatively well in most browsers. BUT I can't trust em for large scale multiple user sites.

and still after I spent all that time and effort.... I took another hour using the same files and re-wrote the entire site in tables and CSS ... because I know its safer

http://lifeorganizers.com
http://cableorganizer.com

.... I just can't make myself make the leap yet, CSS is to unsupported and buggy, and since browser makers won't conform to the standards ... I'm afraid... very very afraid to let a site with a growing number of vistors be left at the mercy of CSS.

plus I hate getting phone calls in the middle of the day or interupting me on a day with amazing surf saying. "you need to come in because this doesn't look right in this one browser this user is calling and saying .. " ya get my drift?

once CSS is more supported and web browsers start conforming to standards, or atleast the same standards, I will be a CSS junkie.

believe you me

can't wait