The trasition from table to div layouts

DonkeyStyle \o/

I've been reading a few pure css layout articles/guides lately, and I'm really finding it hard to do anything usefull with divs.
It all seems like such a chore, trying to align things and have everything exactly as I want it to appear... something I could be guarenteed to achieve with tables in a fraction of the time... I know it's always going to be like this when you're learning a new way of doing something you can already do another way, and I've got the patience for that.
I'm absolutely sold on using style sheets to replace font tags (etc), and customising form elements, but layout with divs seems more trouble than it's worth. (at least from my perspective based on my lack of experience using divs for layout)

Sometimes I wonder why I bother, when I keep seeing the same old boring 3-column designs, with text spilling out past the divs, sites that are kept extremely basic, presumably because the designer couldn't get his images aligned the way he wanted them. :rolleyes:
I've seen the Zen Garden site, and at least that's something to aspire to... but it seems you need to be a css master before you can realistically use divs to create the same site as you would with tables.

I think the main problem is, as one article pointed out, that I'm still thinking in tables... thinking in grids.
So really what I'm wondering is what new thinking came about that helped you make the transition to div layouts?
Do you use div layouts exclusively now, or do you think there are some things divs just can't do?

I'm not having a go at css btw, I'd actually appreciate a clean alternative to my often temperamental tables... but reading about the box-model hack(s) doesn't exactly fill me with hope.

smeggle

The problem most have with divs is using 'Fixed pixel' dimensions instead of percentages. Content does not spill then.

The other problem is the incoorect use of the id and class identifiers.

ID is used for main divs - class for sud divs (nested).

so

< div id="maindiv">
   <div class="subdiv-nested"></div>
   <div class="subdiv-nested"></div>
   <div class="subdiv-nested"></div>
   <div class="subdiv-nested"></div>
</div>

Here I can set the values for div id"maindiv implicitly and the values for the subdivs will all run from one set of css values under .subdiv-nested. If I then want say the first two sub divs at left and the second two at right I simply identify them seperately like so

< div id="maindiv">
   <div class="subdiv-nested"></div>
   <div class="subdiv-nested"></div>
   <div class="subdivtwo-nested"></div>
   <div class="subdivtwo-nested"></div>
</div>

Here I can set the different values and achieve a div set up that will look like a box with four boxes inside - two each side by side. The problem with spill over occurs by also not adding the correct margin, padding and border. These are implicit for each div. So maindiv has it's own padding, border, margin and so do the class element divs.

Remember to use percentages as opposed to fixed pixel values.

DonkeyStyle \o/

Thanks for the input smeggle.
The most recent <div> layout I saw that had spilling text, had the text in a scalable column... maybe 'spilling' was the wrong word... I mean the text didn't wrap to the <div> as it changed width... that's one of my pet-hates, and probably not css's fault anyway.
All of these badly made css layouts don't impress me at all... granted there are very badly made table layouts aswell, but I can't help wondering if these things are caused just by lazy html/css or if they're browser dependant bugs/quirks like the infamous box model implementation I hear so much about.
I've seen so many flakey websites that I could tell straight off that they were using a div layout... view source, and - yep, a div layout.
If divs are supposed to be a replacement for tables (layout-wise) then should we really be able to so often tell the difference visually?

Are fixed pixel values a complete no-go in css then?
How do you keep a div the same width as a banner image above it without text spilling problems in that case?

I like to use a lot of images in my designs, sure simple is good and you can do a lot with colour, but I don't want my hands tied in terms of what I can or can't do graphically.
I've seen people using modified ul's/li's along with a float alignment, just to snap a bunch of images together without spacing... confusing to say the least.
So much messing for such a simple task IMO.

wheres me jumpa

DonkeyStyle \o/ wrote:

I've seen the Zen Garden site, and at least that's something to aspire to... but it seems you need to be a css master before you can realistically use divs to create the same site as you would with tables.

ive just started learning css and im beginning to come around to it. but as you mentioned i was stuck with a basic layout.

thats why i was so interested in the css zengarden site, i bought the book to go with this site, the zen of css design. it basically takes some examples from the site and rips them apart. this in turn helps you(me) realise that literally anything is possible with css.

Serbian

smeggle wrote:

The problem with spill over occurs by also not adding the correct margin, padding and border. These are implicit for each div. So maindiv has it's own padding, border, margin and so do the class element divs.

That's not strictly true. The problem is more often when people set a fixed height on a div. IE interprets height like min-height and unfortunately doesn't recognise min-height. This causes a bit of confusion as most of the remaining browsers interpret height and min-height correctly (i.e. If you set height on a div, it should be that height, no smaller or bigger. Min-height means the element should be at least that height).

You need to use the Prop-Clear hack to get around this.

smeggle

Are fixed pixel values a complete no-go in css then?

Not neccessarily - in some cases they are ok such as setting implicit borders, image widths/heights. There are other areas where they can be used but for resolution compatibility a lot of stuff should be in percentages.

How do you keep a div the same width as a banner image above it without text spilling problems in that case?

As I said this is mainly a problem where borders, margins and padding are not used. You can apply these values to any div and I allways use them for divs with text content. Text won't 'Spill' then. The problem of 'Text Spill' in tables was because of the same reason.

So really what I'm wondering is what new thinking came about that helped you make the transition to div layouts?

Well simple way to answer that is to show you two examples. One of divs used incorrectly (from a ripped off dreamweaver 6.0 template)

www.corkandcounty.ie - the dreamweaver template (try viewing in all resolutions from 800x600 and up)

and the replacement site I am making

www.blogireland.ie/corkandcounty (again try all resolutions).

I think you'll very quickly see the difference between incorrect use and correct use.

Now take that dreamweaver template and 'Fix it' and you can end up with this

www.trybalink.net - This where I do a lot of my trial and error stuff so it doesn't get updated much, apart from the mad heads that live at my forums there.

Believe it or not that started life as the dreamweaver template, as did blogireland.ie.

You can also see a similar incorparation of the design at www.2412electrics.com/fi_Lock_test

which takes this design www.an-sanctoir.net and incorparates the two.

www.2412electrics.com (currently off line a lot longer than I hoped) is again you'll notice the same dreamweaver template (So I like the template lol).

Point is with a little study it's not hard and that little lot shows you just how versatile xhtml/css is.

Couple of others others to look over www.normalbreathing.com and www.blogireland.ie/buteyko (Needs more tidying up to finish it).

As I say some examples of just how versatile css can be and is. I certainly wouldn't go back now especially as more and more of the older code is becoming so depreaceated. My own opinion of the future of web coding is that html 4.0/4.01 will be gone in another few years and search engines just won't bother to even look at the stuff. (simple - they'll be configured not to). I'd say give it another 5-6 years and most browsers will be 'Switched' off from reading it.

Thats a personal observation maybe but the sooner the better if you ask me. A site correctly designed and written in xhtml/css will load faster, have no compatibility problems and will be fully accessible by the disabled. That last bit alone is nigh on impossible with html 4.0/4.01 and the same applies if the xhtml/css is incorrectly written.(It's also illegal under European and National law of most Western Countries!)

I know I'll probably get quite a few come backs maybe for the last above comment and I'll gladly welcome it as it is what I see and with the advent of the new xml modules now being fully implemented over the last few years I suspect I can fully back up what I've said.

xhtml/css coding is the way of the future is all I can say, even form attributes/elements are now being controlled by css (css 2.0). Learn it and get used to it if you still want to be in the game in the future.

btw I also believe that it is a big step in cleaning up the mess that abounds on the internet, others say otherwise but I personally can only call it as I see it as I said.

@ serbian - As you say the problem lies with I.E. but only if I.E. is allowed to fall back on it's I.E. 5.0 engine. It's awkward I agree but if you getb the balance right I.E. 6.0 will render the xhtml/css correctly. Supposedly this is all corrected in I.E. 7.0 (due out soon?), as I say though 'Supposedly' but knowing that dork of a browser probably not. It relates back to the old 'Box Model' problem. One thing to note is if you get the xhtml wrong in any way, especially the header the browser also falls back to I.E. 5.0 and all the inherant problems. Second note to that is that I.E. 6.0 is really just a patched up version of I.E. 5.0 - uses the same engine, so you have to be extra careful to ensure that your xhtml is correct. Get any thing wrong and the inherant I.E. problems reappear and you'll need the 'tan' hack to fix it.
As you say though again it's how I.E. inteprets the css as well.

I'll shut up now as you'll start me on my microjerk rant lol

Sidane

smeggle wrote:

As I say some examples of just how versatile css can be and is. I certainly wouldn't go back now especially as more and more of the older code is becoming so depreaceated. My own opinion of the future of web coding is that html 4.0/4.01 will be gone in another few years and search engines just won't bother to even look at the stuff. (simple - they'll be configured not to). I'd say give it another 5-6 years and most browsers will be 'Switched' off from reading it.

Definitely have to pull you up on that one smeggle. Sure in a purists perfect world it would be nice if that happened, forcing all existing sites to switch to compliant XHTML but no way in hell will it happen.

Billions of web pages will just stop working in 5 or 6 years? That would be browser suicide. There'd be uproar from every tom dick and harry website owner out there. They certainly won't go back and recode everything for the simple fact that it's too much work and they won't see the benefit of it. As far as they're concerned the page works.

Craply coded pages are the legacy of the web's infancy and they'll always be around in some shape or form, as will the Quirks mode in browsers. Getting rid of it makes no sense from a practical point of view.

Finding ways to educate and encourage both amateur and professional web developers about using standards compliant code is the big challenge. A heavy handed approach like the above is not the way.

As for the OP's query. I found switching from tables to CSS a serious head wreck at first. I was trying to implement designs using DIVs and having all sorts of problems, knowing all the while that I could slap it together with tables in no time.

But that's how I learnt the ins and outs of it all and once you do, there is no going back and I can churn out designs faster and better than using tables. Trust me, you can do so much more with CSS based designs. The more you use it the more you'll realise that and start to push your designs out more to take advantage of the possibilities.

So don't get disheartened, stick at it and read some good books like I did.

Recommended:

Designing with Web Standards by Jeffrey Zeldman
Eric Meyer on CSS
Web Standards Solutions by Dan Cederholm
The zen of CSS design by shea/holzchlag

One thing to remember with coding with XHTML/CSS - this is as bad and awkward as it'll get. Browser support will only improve until (touch wood) they will all render sites identically. So if you can master it now, you're more than set for the future.

Serbian

Sidane wrote:

Loads of text

I agree with this post in essence. I don't think that HTML 4.0 will disappear for the forseeable future. In fact, technically, virtually every xHTML site out there does not adhere to the xHTML spec, for one simple reason: The content type is text/html. According to the spec, it should be sent as application/xhtml+xml.

So why don't people just set the content type as application/xhtml+xml? Well, there a number of reasons which I won't go into, but you can read this article explaining the problems of sending XHTML as text/html. Anyway, I don't know if IE7 is due to support the xHTML MIME type or not, but if it is then it will be a big step towards true xHTML on the web.

Further reading: The xHTML 100.

smeggle

wonder if you guy's heard of the case last year when a disabled user took a very large and busy commercial web site to court in Britain and successfully sued them because there web site was all but inaccessible by there speech software?

Result was it cost them a lot of cash, in both payment to the guy and in re-design costs. The point here is that most web sites fail in this area and as I stated above are 'Technically' illegal. ok I agree that was a one of instance but it is an aspect that a lot of companies should be aware of when building sites/or having them built.

Maybe I am going out on a limb where html 4.01 is concerned but more and more over the last few years that coding standard has been depreceated bu the standards commission, self appointed maybe but it is still happening.

Over the last few years, I've spent a lot of time on U.S. based forums and the highest majority of 'New Coders' (the web masters of the future so to speak) have been giving and getting the advice to switch to xhtml mark up and to follow the standards set out by W3C. A new guy comes along with the 'Review my site' please and the site is taken apart and the overall recommendation is to go over to W3C and learn xhtml. This gives a clear indication that a big impetus is under way to get websites and coders upto speed with the newer markups.

As then more and more coders appear and write with xhtml markup as opposed to html 4.01, (html 4.0 you can allready ignore as not even W3C validates this any more), then what I said above about html 4.01 dissappearing is actually becoming a reality and I totally agree with it. Browsers are becoming increasingly compliant and microsoft, who have caused the majority of the problems in this area are even getting there act together, hence the attempt to correct the problems with compliancy in the I.E. 6.0 version of there browser. I.E. 7.0 being fully compliant. (Most browsers allready do follow W3C compliancy/guidelines).

The point of this, as more and more coders/designers do make the switch and as more and more of the older code becomes depreceated then what is the point in allowing sites with the older code? Really there will be none. And lets not forget about Internt2, part of what I suspect is the reasoning behind the change/s.

Also of note is the fact that most of the major changes/influence comes directly from the U.S. and as I say the move that I have seen over the last couple of years over there is towards the newer xhtml coding standards. Allready some of xhtml 1.0 is becoming depreceated as we move towards xhtml 2.0.

I have definately seen this pattern emerging and whilst I agree that we may not lose html 4.0/4.01 alltogether in the time span I indicated above, I'd have to say that it is not something to be totally dismissed. Also to remember is 'Internet 2'. This is still a reality and I very much doubt we'll see any of the older coding standards being allowed there.

Another thing that supports this theory is 'How often do you see html 3.2 around anymore?' Very little and no webmaster of any repute uses html 4.0 anymore, 4.01 yes but not 4.0. The only real difference being to put the values back into speech marks. Thats why html 4.0 had all it's problems (Again bloody microjerks influence). As more and more of the styling of web pages is now in the css including now, Forms and the like, what is the point then in keeping a code that is a nightmare to control, use and causes problems for the end user? There is none and remember the disabled accessibility issues. One of the main reasonings behind xhtml-xml markup is in this area.

Also in the U.S. there is an increasing movement back towards 'Open Source' products. Nearly all of these are using xhtml-xml markup. microsofts strangle hold is being very quickly eroded in a lot of areas and most os the newer U.S. based coders all use open source based products under the new coding standards.

It is becoming a reality and whilst it may not be something that will happen overnight, I fully believe it is a very important aspect of the future of the Internet and web-design/coding in the future.

cgarvey

smeggle, any link to that case?

smeggle

cgarvey wrote:

smeggle, any link to that case?

I'll see if I can find it - was something I picked up over at winamp if I remember right.. might have been earlier this year actually now I come to think of it. They don't actually mention the site in question in the article.

but it was either towards the end of last year/earlier this year that it happened.

DonkeyStyle \o/

Do UK restaurants have braille menus now aswell?
Major lawsuit opportunity there tbh... now I just need to find a blind man who wants in on the deal. :rolleyes:

Are there even screen-reader emulators people can use to check?
I know W3C have an online checker, but you'd want to be pretty damn sure and test the end-result if you've got a major website.
Shocking/disgusting story if it's true.

Sidane

Looking forward to the day I see the headline "Disabled user sues Internet"

I agree with what you're saying smeggle in terms of the move towards standards, all of which is good.

But the fact remains that there are still billions of poorly coded webpages out there that will never be brought up to spec. Pages by some joe bloggs who may not have a clue about proper web coding practices but still has a site with content that is of value to certain people.

To just "turn them off" in search engines and browsers would be ridiculous. It's basically saying, this site isn't accessible to some, so we're making it accessible to none.