General Info please

[johndove]

Hi,

I basically have only Beginner-Intermediate level .css skills. I don't know shorthand very well, and have bascially only used .css for text styling, not to create site aesthetics. I have some general questions:

Is it worth the time it takes to construct PURELY from .css (NO tables) and create a stylesheet with dozens; perhaps even a hundred or more styles, to put together a 6 or 8 page site? (i.e., I could build the whole site in the time it takes to put together a .css aesthetic) The .css reference materials I have are basically limited to creating boxy little kiddy-type sites, not highly-stylized walking-talking sites (like the ones I create).

Purely using .css, how do you incorporate other code and media like .js, rollover (graphic) buttons, etc.? In other words, what is the .css “container” equivalent of a table cell?

Any other insight is welcome. - Thanks.

[ray326]

Yes, it's worth it. If you have a hundred styles for a 6-8 page site, you're probably doing something wrong, generally with the content.
The .css reference materials I have are basically limited to creating boxy little kiddy-type sites, not highly-stylized walking-talking sites (like the ones I create).Oh, and which one of these (http://csszengarden.com) is less "stylized" than the ones you've created?
In other words, what is the .css “container” equivalent of a table cell?There isn't "one". Any one of the block-level tags might be an equivalent.

[WebJoel]

Gee... not sure how to feel here. Was this a question, an ephiphonic pontification or just thinking-out-loud on the witness-discovery of what is being done with Internet Publishing/Web Development? -Why to I feel slighted somehow? :o Yhe CSS should not be that big. If you're not re-using class in the site, you are no better off than just uses tables throughout. Re-using from an externally-loaded (and therefore, cached) stylesheet greatly reduces page-bloat, reduces down-load time, reduces bandwidth consumption, if the site is E-comm, you get more cutomers because you get fewer 'back-outs' whom will not wait more than 8 or 10-seconds for a page to load, etc. Hmm... -you create 'highly-stylized walking-talking sites', but are you not impressed with how some truly talented people are doing things? I checked your profile to see if you have a site or portal set up to show some of your sites. I should like to view them and if they are any good... -to take notes. :rolleyes: I certainly stare is awe at some of the work done by the giants that do remarkable things with code, vis the link above that Ray provided. :)

[qwik3r]

Coming from an intermediate level skill I can offer that switching to CSS is worth it, albeit frustrating. Most of my experience with html have been with tables but having seen the light, css is truely the way to go. LIke anything it has a learning curve. "Why the hell is my div not pushing my footer down" "why won't my columns expand" "what the hell is a floated div?" "why is my content falling outside of its container div?" Then you switch over to IE and watch in horror as 25 more errors occur, fun stuff eh?

Its called learning, its hard, but thanks to AWESOME members like WebJoel and Centauri (to name a few) it takes the pressure off that much more.

In a nut shell CSS is worth it, its the future its semantic and its the way to go. Grab a book and experiment, eventually you will see the errors of your ways and never look back.

I started with CSS Web Development from Novice to Professonal and then off to transcending css(which i didn't like) now i'm on css mastery. You can read and read and read but until you take sites apart and make your own and experiment you won't fully grasp it. I am still on the level of letting small problems get the best of me, mainly because i don't take the time to understand why but just want to fix it.

good luck

[johndove]

Joel,

I’m not sure what you read between the lines but I had no intention of slighting anyone and I don’t believe I ever said I wasn’t impressed with anyone’s talent. I said the reference materials I have offer instruction that is basically limited to mickey-mouse aesthetics and functionality. Though I think it came across wrong, all I meant by “walking, talking” is that the sites I do look very nice, and always require some sort of functionality that calls for .js, Flash, etc., which, in the context of pure .css is a whole other level that I need to get to. I guess the question I’m really trying to ask here is this — Is applying .css formatting to table cells really such a sin? Yes, I know it’s incorrect, but right now it’s what I know how to do - so I do it. That said, I DO want to learn to do it properly. But also, as Qwik3r suggested, is working out the kinks with PURE .css that much less of a pain in the ass than what I’m presently doing?

This site for example…how difficult would it be to reconstruct this site properly? (tables non grata)

Terra Voce (http://www.terravoce.com)

Qwik3r,

Thanks for your words of encouragement. You nailed it. It helps to know that others are going through the same thing. Thanks.

[WebJoel]

Some referance materials are better than others. Fortunately I have not been too bothered with the bad ones. I can generally see through them and dismiss them easily enough. If their actual site's coding is very bad, I do not trust their gospel. I have no grievance with people trying to apply a few of the gifts of CSS to their older, TABLE-built layout. It is transition and they (as was myself) fall within a fortunate period whereby the new standards are overtaking the old. I in fact somewhat feel concern for completely new builders whom might learn CSS first and never know about legacy-built TABLEs other than a brief chapter in their education.

I too am not a big fan of *js either, and definately dislike FLASH on sites for certain important things like content, navigation, etc.

I'll check your url that you gave. :)

back:

Hey I like that, -it's not bad. Clean design. Just a few rather minor proprietary things and a container that isn't expanding vertically to accomodate text , -easily fixed.
A bit slow on the download time for dial-up users (see screenshot), -but again, fixable. I would say that this is easily update-able and quite possible could get this download-time to closer to 10-seconds @56K maybe..

edit: back again.

I wrote this with your design over lunch, optimized the images, etc. Those images took a nice optimization. One was 162,776bytes, reduced to 10,635. another image went from 396,288 bytes to 29,336 bytes. Probably anyone other than myself could do even a better job here (image manipulation is not my best ability).
Validates, looks exactly the same in Fx as IE (well, maybe the text is a pixel or two different, but closer than it was :) ).
Difficulty rating: since the site was already in existance and it was a matter of merely re-writing the containers and adjusting some widths, I'd rate 4 on scale of 10. -Fairly easy (you did most of the work, I merely copied it over).
My HTML could be condensed a bit more, -I have some use of 'inline styles' that could be moved to the CSS and that, moved external. This was just a maybe-45-min.re-write so I did some shortcuts.

I noticed that the 'white-ish border' around the images is maybe 3-pixels on the right, and 2-pixels on the left. If you look very closely just to the left of the "hr"-looking line, you can see where I had to fudge them together to mate to the existing image's white border. :)

[qwik3r]

Joel to the rescue again lol.

JohnDove: Is it worth moving from CSS to tables? Yes in every way. Tables have their usages and purposes such as creating a form quickly or arranging data however try floating a logo anywhere on your site outside the confines of a tabular structure or putting text and an image next to each other w/o having to make 2 extra cells then putting vertical aligning. (eg: just put text and image next to each other and float imgs in the div, done)

Your site is not particularly difficult to reproduce, even for someone with my beginning-intermediate skills with CSS structuring. Anyone can say they use CSS, but to use CSS in a way different then just stylizing fonts and colors is the true mastery.

I personally hate flash now and if you notice the trend in web 2.0 more and more sites are forgoing it. Flash is out, standard compliant, fast loading, php driven dynamic sites are in.

Checkout a few of the books i suggested aswell as hanging around a few awesome sites (to name a few:
alistapart.com
stylegala.com
wisdump.com
dfckr.com
semanticfocus.com
connorwilson.com
cssglobe.com
thinkvitamin.com
stylegrind.com
web dev bookmarks: http://www.alvit.de/web-dev/css-techniques-and-examples.html
zeldman.com
cssbeauty.com
designmeltdown.com

also checkout for examples of AWESOME SITES
zengarden.com
cssbeauty.com
cssremix.com
bestwebgallery.com
cssmania.com

good luck