Domain: csszengarden.com
Stories and comments across the archive that link to csszengarden.com.
Comments · 240
-
As someone who does small-business websites
I recommend notepad, or a nice IDE. Invest in the latest version of Paintshop Pro (it's all you need and much cheaper than Photoshop), or tough it out with The GIMP Read up on CSS based layout, and if you're feeling especially adventurous, buy a book on PHP and MySQL. I can't stress enough the importance of CSS based layout. Keeping content and structure separate from layout and design will let you refine your skills and perfect the look of the site without tinkering with the core of it.
-
Re:HTML and CSS? On Slashdot?
I haven't seen this mentioned yet, so I thought it appropriate to post as a response to your gripes:
http://www.csszengarden.com/
CSS Zen Garden is an extensive collection of sites designed and manufactured entirely with CSS. One caveat: most of the more intricate styles do not work well, or at all, on any other browsers besides Firefox (yet another reason to switch). If you are designing for a company intranet where the browser can be controlled by the IT department, then I'd recommend using CSS to it's greatest potential aimed at a specific browser, otherwise you'll most likely run into cross-browser functionality headaches. -
Re:Teach Concepts ... CSS
If you're going to skip over CSS why not send them to look at http://www.csszengarden.com/ for homework. It illustrates well the separation of the interface from the engine
... a good point in a HCI class. -
Re:I can't find ONE relevant comment!
I can't pass comment on the book reviewed above but I've just finished reading The Zen of CSS Design (from the makers of http://www.csszengarden.com/). It's actually an excellent guide to CSS - aimed at the intermediate to advanced web designers / developers who know CSS and HTML basics.
If you don't know about the csszengarden then you should take a look - it's an invitation for web designers to come up with new designs for the site changing only the CSS. The HTML has no presentation markup whatsoever and only the hooks (quite a few divs) to make it flexible for the designers. The best ones (hundreds!) are linked from the site.
In the book the authors have chosen 36 of the best csszengarden designs and one by one they explore examples of a particular topic: how it's done, browser compliance, how it's implemented in CSS3 etc. It also covers DOCTYPEs and document encoding.
Yes, the designs are all by web designers, and they are real eye candy but it really is a demonstration of how powerful CSS is and what can be done with a little bit of imagination. None of the designs would choke in the majority of browsers and some had little bonuses for those browsers that supported it (as in W3C compliance - not browser-specific tricks). It also has many links to fantastic resources and techniques and also a crib sheet.
This book has changed the whole way I think about web design (it's part of my job) and I recommend it to anyone who writes HTML/XHTML.
-
Re:Elaboration?Ask and you shall receive...
From the folks at http://www.csszengarden.com./
-
W3C trying to make me PC *rolls eyes*
Macromedia, Adobe and gang have to push things forward to keep getting us to buy product right. Is HTML now "designed obsolescence"?
No
Jakob Nielson and the gang have pushed us to really boring text based browsing that is a chore to read, and not worth a casual flipping. Why should *I* care if my website is Modem/text based browsing compliant? Sure if I had a research website I can see the point, but my website is a video hosting portal http://videos.streetfire.net/ [streetfire.net] so I doubt the 40,000 folks coming to my site every day care about text based browsing or low-bandwidth options, since the end media is video.
FWIW though I chose 3.0 HTML because it's easier to integrate the 13 ASCX objects into my single ASPX page than if I kept styling separate with XHTML.
Now that if course is just me and maybe I'm bothered by people saying my site is obsolete. I admit there are a lot of neat things you can do with XHTML http://www.csszengarden.com/?cssfile=/152/152.css& page=1 [csszengarden.com] (Click "select a design to see the style changes). But again I see that as new candy that doesn't really solve problems that neither I nor my viewers are having. [/rant]
PS I used the BR tag too, because I still think the P tag is lame.
-Adam HTML guy since 1994. -
Re:Disable Greasemonkey
That said, it is impossible to separate the content from the presentation. This has been true for hundreds of years (think fonts, script styles, illuminated texts)
This is where the web and (X)HTML are great, because they allow you to do that (to an extend).
Check out CSS Zen Garden if you don't know it already, to see how content and presentation are independant from one another.
Granted it's a demo website and not a real "live" one, but you can find some site making great stylish use of the CSS without it having any impact on the information itself (you get the same "raw" information when surfing it without any style, or with a different style, the issue then is your own interpretation).Going back to the book example - if you read the book backwards (or upside down or whatever) you can't blame the author if it sucks and the plot seems, well, backwards (or upside down or whatever). Its fine to change the 'viewing angle' but if you do, you can't blame the creator if it seems out of whack. It is fine to say 'This book sucks when you read it backwards' - at least that way the opinion is qualified and I know I'm risking wasting my time if I read it backwards.
I see that point and I perfectly agree with it (and the first phrase of your first paragraph). If the originator had phrased it that way I wouldn't have tried to beat him with an ugly stick. But he didn't say it that way at all, and made it sound like GM was an absolute horror and was A Bad Thing© which is untrue. -
Re:IE still #1 a-ok
renders sites better than Firefox
I *really* hope you were joking when you wrote that down, because it's one of the most beautiful pieces of bullshit i've read today...
Please do pay a visit to the CSS Zen Garden and compare IE renderings to FF renderings.
the Special Effects Designs are the most interresting ones in terms of IE sucking badly, BTW... -
Re:Yeah...
You can create decent looking websites without Flash. I might argue that you cannot create a decent website with Flash.
Much above "decent" in fact, if you have both the will and the skills.
See CSS Zen Garden for proof of that...
(and for the web illiterates out there: there are no tables in CSSZG, and the only thing that changes between two designs is the stylesheet associated with the page, the HTML file doesn't change anywhere but where it links the aforementioned stylesheets) -
Re:And why is this a problem?
I like PDF too.
I'd like to see you do this in PDF, or Flash. Yeh, you could probably come up with one of the stylesheet designs there and put it in your PDF, but these days HTML isn't a poor cousin any more... properly used it puts all your tightly encoded plugins and print document formats to shame. -
Re:bah.
With proper semantic markup and effective use of CSS (including 'mobile' stylesheets), you can create content that renders fantastically nice on the big screen and simply and effectively on the small screen.
Don't believe me? Load up Konqueror, Firefox, IE, or Opera, and go to http://www.csszengarden.com/. Looks nice, right? I particularly like the design called A Simple Sunrise. Pretty nice actually.
Now grab the link for A Simple Sunrise and look at it in Lynx. More readable than most websites I go to.
With very little work, you could accomplish a design that is similar in colours, but is geared towards mobile users, just by adding a second stylesheet to your site (or another section to the primary one).
The problem isn't the tool that people are using to view the site, the problem is the idiots that write terrible site designs. We've had the technology to do things right for more than five years, and yet no one uses it. Why? Because IE is broken, so no one tries (even though most things can be done in IE and Firefox easily). As a result, people think CSS is useless and can't do a lot of things, and therefore don't try.
More important than that, however, is that most 'web designers' are complete hacks. People who grab a copy of Frontpage and commit an atrocity against design, then turn around and sell it. They don't know anything about actual design, use of colour, shapes, graphic design, and so on, so they just kind of splatter text and graphics on the page and there you go. These sites then completely break in any non-IE browser, and choke any mobile device to death.
The problem is not the device - the problem is the designers. -
Re:bah.
With proper semantic markup and effective use of CSS (including 'mobile' stylesheets), you can create content that renders fantastically nice on the big screen and simply and effectively on the small screen.
Don't believe me? Load up Konqueror, Firefox, IE, or Opera, and go to http://www.csszengarden.com/. Looks nice, right? I particularly like the design called A Simple Sunrise. Pretty nice actually.
Now grab the link for A Simple Sunrise and look at it in Lynx. More readable than most websites I go to.
With very little work, you could accomplish a design that is similar in colours, but is geared towards mobile users, just by adding a second stylesheet to your site (or another section to the primary one).
The problem isn't the tool that people are using to view the site, the problem is the idiots that write terrible site designs. We've had the technology to do things right for more than five years, and yet no one uses it. Why? Because IE is broken, so no one tries (even though most things can be done in IE and Firefox easily). As a result, people think CSS is useless and can't do a lot of things, and therefore don't try.
More important than that, however, is that most 'web designers' are complete hacks. People who grab a copy of Frontpage and commit an atrocity against design, then turn around and sell it. They don't know anything about actual design, use of colour, shapes, graphic design, and so on, so they just kind of splatter text and graphics on the page and there you go. These sites then completely break in any non-IE browser, and choke any mobile device to death.
The problem is not the device - the problem is the designers. -
Re:Tell that to the clients and PHBs
It's not (primarily) the web designers' fault that they use flashy designs. The people who get design contracts aren't the ones who use well-formed, W3C compliant XHTML that is functional even in text-based browsers. The people who get the contracts are the ones who have a 500KB Flash animation on every page and poorly coded Javascript rollovers because clients and PHBs see these things and go "Ooo! Shiny!"
The whole point of modern XHTML and CSS is so that web designers can seperate the function of the webpage (deliver content via XHTML) from the form (the particular layout using CSS) and let end users choose the CSS that they want. In theory this should have a minimal XHTML with just pure text and all the glitz should be added in via CSS. FF and similar browsers support switching between multiple stylesheets by defaul, but IE requires webdesigners to allow it via a Javascript widget. Thus, the designers just stick with the flash. Maybe IE7 will help change this if it doesn't suck as much as the previous versions or maybe not given the amount of glitz in Longhorn.
In an ideal world, one CSS would have the glitzy flash animation and postneoantimodernismdeco-that-will-win-art-contest s design for when I first visit the page and am sucked in by beauty. Another CSS would have a minimalist UI that allows me to find the information on that site as fast as possible. Then handheld users would just use this latter lowbandwith UI by default instead of the flash hog. The web designers can just show the PHBs both versions so it is their fault that modern websites suck. They're making websites with 5 year old technology and the users are suffering for that.
If you really want to see the power of proper XHTML+CSS, look at the CSS Zen Garden. The entire site uses a single XHTML file but each version of the main page has a different CSS file. If you didn't know this, you would think that each page was individually coded. And the site is still usable if you strip out the CSS and view just the plain XHTML file.
--
Want a free iPod?
Or try a free Nintendo DS, GC, PS2, Xbox. (you only need 4 referrals)
Wired article as proof -
Re:I'll take content over "hip-looking, style-lade
a site focused on content without any style is still useful; a site focused on style without content is not.
Actually, style without content doesn't have to be useful. I mean, why do people like to go see art in a museum, cause it's useful?
I visit sites like css Zen Garden and CSS Beauty to check out nice designs. I couldn't care less what the site content is about. -
I say fuck-em and built
Beautiful CSS. www.csszengarden.com
I mean honestly, there comes a point.. -
Re:What does CSS2 give you that is needed?
My question was what is (if there is one) the killer reason for CSS2?
How about separation of display and content?
You just include basic tags in the markup (h1, h2, p, li, etc.), which tell you what the content is (heading, list, paragraph text), and use CSS to affect how it's displayed (font, color, background, graphics, etc.) - including things such as fold-out lists, drop-down menus, and other eye candy.
You can then alter the display without touching your markup (see here for an example.) -
Re:This sounds great but...
If they actually cared about developers, which they don't, they would make absolute, float, and hover work as expected and on arbitrary elements. For those of you who don't know of these issues, check out this for some nice examples of stuff IE can't handle. It's also work looking at the Zen Garden too.
Bad CSS support in Windows is the main reason I use IE7 (no, that's not from microsoft). -
Re:w3c sucks
Full height-sidebars? "height: 100%;"
Which planet do you live on? I really wish it was that simple. According to the CSS spec, height: 100% is the exact same thing as no height property at all, except when the block is absolutely positioned - in which case it will fill the viewport, but nothing more. I gave it a test run yesterday, and browsers (IE6/FF1.0/O8b1) acted very inconsistently.
In short, having an element with 100% height (other than body or html), like in the good old days of table layout, is an impossibility with CSS. I find it hard to understand the reasoning behind this.
The goal that CSS has is admirable and while it is plagued by things like flaky browser support *cough*IE*cough* and some stupidities like the aforementioned, it's a great tool when used right. But still... it doesn't give me absolute control over the looks of my site as I would like it.
-
Re:w3c sucks
If anyone needs a little help with the imagination part, I suggest checking out The CSS Zen Garden.
It's a bit tricky to get some tableless stuff right, but in the end it's way better: most of the stuff (not only the colors and fonts, but positioning and sizing too) can be easily changed, and things get real clean when generating pages dynamically. -
Re:"Poor CSS support"
Oh, yeah, that CSS totally looks like shit. I'm sure MS would totally support it, if it didn't look so bad...
Man, you are so full of shit, it makes me want to punch you. Have you ever even looked at a webpage's source code? -
Re:Proof that CSS is better than XSL
Shouldn't that be http://www.csszengarden.com/?
-
Re:Incredibly Off Topic
Late reply and further off topic. Anyhow, that is a great page.
Two other good CSS sites are http://www.positioniseverything.net/ and http://www.csszengarden.com/.
P.I.E. has a list of IE CSS bugs and plenty of workarounds, mostly using other IE bugs to hide CSS rules from other browsers.
CSS Zen Garden's highlight is the main page. Hundreds of others have created different stylesheets for it which completely change the appearance. The special effects set has some very impressive effects accomplished with pure CSS.
The bad thing about the CSS Zen Garden is it's depressing. Few people designing sites professionally for a company are able to really use CSS, only using the pitiful amount it supports correctly. It's depressing because the web could be so much better if only IE would go away. -
Re:That site failed
I think you missed the point - its a site that has 1 set of content, and as many 'themes' as you can shake a stick at.
Didn't like the gray on white style? No problem - click the side links and try some others. Note: the links simply change the CSS stylesheet.
try Black on parchment
or orange and black on light grey
or plain black and white-ish
So, to discover a few ideas about design, as opposed to tying it to content, look at what people have done with the exact same site. It should be a bit of an eye-opener as to what you can do with a bit of imagination, instead of thinking that certain content has to appear in certain ways.
-
Re:That site failed
I think you missed the point - its a site that has 1 set of content, and as many 'themes' as you can shake a stick at.
Didn't like the gray on white style? No problem - click the side links and try some others. Note: the links simply change the CSS stylesheet.
try Black on parchment
or orange and black on light grey
or plain black and white-ish
So, to discover a few ideas about design, as opposed to tying it to content, look at what people have done with the exact same site. It should be a bit of an eye-opener as to what you can do with a bit of imagination, instead of thinking that certain content has to appear in certain ways.
-
Re:That site failed
I think you missed the point - its a site that has 1 set of content, and as many 'themes' as you can shake a stick at.
Didn't like the gray on white style? No problem - click the side links and try some others. Note: the links simply change the CSS stylesheet.
try Black on parchment
or orange and black on light grey
or plain black and white-ish
So, to discover a few ideas about design, as opposed to tying it to content, look at what people have done with the exact same site. It should be a bit of an eye-opener as to what you can do with a bit of imagination, instead of thinking that certain content has to appear in certain ways.
-
Re:Good point
and if you want to make yourself stand out somewhat, go look at CSS Zen Garden for something a bit fancy.
-
Re:Medical needs
The native version as it came out of Word
It was a mistake to not do it in LaTeX, although if you did it successfully in Word, you didn't really make a ``wrong'' choice.
People just beginning their dissertations/theses have been able to learn enough LaTeX to create terrific papers with it. Mostly they gave up on Word quickly and were directed to LaTeX as a superior option. Many colleges already have LaTeX templates available for people to use.
To anyone else who is about to write a paper of some sort and is wondering about LaTeX: you have to be careful with what image formats you can use. Decide early on in the process, or you'll create more trouble. If you're not behind schedule, try LaTeX on this paper. I use this page as my first reference, and Google if I have more problems.
If you're using Word today to produce a scientific paper, then you're misusing it. Word isn't meant for doing large works. It has no concept of separating content from structure, and you'll often find yourself fighting the document to get it into the right shape. TeX (LaTeX is a macro language that boils down to TeX) was designed by Donald Knuth (the computer genius) to follow the correct rules of typesetting. It properly leaves the job of providing content to you. Think about CSS/HTML; it's the same stuff. CSS provides the structure, and HTML provides the content. Explore CSS Zen Garden for the power of this (correct) approach. -
CSS Zen Garden
I'd highly recommend CSS Zen Garden, from the makers of csszengarden. It's not out yet, but I'd recommend it to any webdesigner out there.
-
Re:Yay
How do you suggest I make the columns in pure XHTML/CSS?
You can create columns in a CSS based layout using a combination of float and margin:
http://glish.com/css/9.asp
http://www.alistapart.com/articles/fauxcolumns/
Have a look at CSS Zen Garden for more design ideas. I think you'll find CSS and XHTML are quite flexible enough to do what you need to do. -
Some survival tips from a fellow non-expert.These are some of the things that I've learned from my mistakes and from experience. I was in your situation about two years ago. Enjoy!
- 1. Stock photos. A good picture is worth a 1000 design elements. Start scavenging for stock photos NOW. A good place to start is here: http://sxc.hu/.
- 2. Avoid excessive effects and filters when not needed. Nothing ruins a good design like trying to emboss everything or making it 3D.
- 3. Keep it clean and simple. Think Apple.
- 4. Learn from the experts. Visit places like http://www.deviantart.com/ You can even post designs and get peer reviews. Also, http://http//www.alistapart.com will help.
- 5. Use and abuse CSS. The separation of design elements from everything else will help immensely. You will be amazed by this site: http://www.csszengarden.com/ Change the themes and be amazed by the power of CSS!!!
-
6. Buy graphic design books, preferably those with collections of commercial art made by different designers. Get inspired
;-) - 7. Get a digital camera and take lots and lots of pictures of the world around you. Current examples of designs and logos and ads will help.
Cheers,
Adolfo -
Re:Amazed Again
Honestly, all there is to the design is a PNG image with alpha transparency and a fixed background image. I have seen much more impressive designs that are compliant.
From the site:
Remember: as you look this demo over, there is no Javascript here, nor are any PNGs being used, nor do I employ any proprietary extensions to CSS or any other language.
Anyway, CSS Zen Garden is fantastic!
-
Re:Amazed Again
The site is nice but I'm very far from being impressed. Honestly, all there is to the design is a PNG image with alpha transparency and a fixed background image. I have seen much more impressive designs that are compliant.
Look over CSS Zen Garden. The same XHTML page has dozens of CSS files and the layout absolutly never look the same. The source is very clean too. That website really shows the power of CSS, and it has been running for years. Check out multiple skins, some of them are vertical, some horizontal, there is really variety. It's not just about swapping images.
-
3 words
-
Ransomware...
First we had shareware, then we had freeware, now we have ransomware...
I'm not sure that I'm so happy with the recent trend in software development. The whole idea of ransomware is a bit, shall we say, reprehensible. I'm happy for all of the projects that have finally made it to open source, but there are many more that were abandoned, and could have become something if people hadn't just gotten tired and gave up.
We all know (or should know), that the GPL isn't a philosophy, it's a contract. But it comes from an idea. That which says that pooling our work in software development is better for all of us, including myself when I write something to release, or you when I use something of yours.
There are many companies who are trying to find the "loopholes" in the GPL. It's companies who try to find ways to hamper the use of their code to make it more worthwhile to purchase their product. Some companies to it to greater or lesser degrees. Like the guys who publish the WineX CVS sources, but threaten to shut it down if anyone tries to make it easy to build from there. (Shut down Gentoo project, anyone?)
But the ransomware idea is step below even them, as they won't even go that far, instead demanding payment before giving back. If you're going to do that, you might as well go closed source, because trying to cash in on our good will is just that, trying to cash in.
If you really believe what you say, and want to put it out, and want the good will of the open source community, put the code up in escrow, such that if you stop updating frequently, it will go open source as well, then I will gladly help you along with the ransomware thing. (And this is meant directly for the Devil Whiskey developer. If you escrow your code, I'll put up and pay the $25 for your software, even though I have no intention of actually playing.) Until then, it's just extortion...
And for those who wonder how I can be self righteous, I'm a software developer, and yes, I've released the source to one software project so far, and it was TPOP, a Tivo email client, which I had to drop development of when I sold my Tivo to move to France. I'm constantly starting little projects at home, and the next one that I code to more than just a skeleton phase will get open sourced as well..
(I'm currently working on a webmail system inspired by both GMail and CSS ZenGarden, I'm really hoping this one gets off the ground).
-
Re:re standards
I would have to say that the sites at CSSZenGarden [csszengarden.com] look quite different.
Funny you should mention it. I followed your link and checked out the C-Note design, which has overlapping text in the sidebar in Opera 7.5. Whoops.
The grandparent is right in that CSS is not a panacea for designers and that it can be hard to guarantee perfect compatibility.
However, for the CSS Zen Garden, no matter how badly the CSS renders, I can always just drop into user mode and read the content thanks to its lovely semantic mark-up (of course, the design is the site's draw and not the content, but that's beside the point). In my opinion, flexible data is more important than pixel perfection, so I ultimately disagree with the grandparent's half-hearted tables-with-CSS approach. Clearly, you'll never, ever get pixel perfection for every user without a lot of hacks (using tables for anything other than tabular data is a hack), so you should really just give up and focus on fluid designs.
(And yes, I know, ideals don't get you far with clients and compromise is often necessary, but maybe you should be compromising your design whims for accessibility instead of the other way around?)
-
Re:re standards
Yes, i'm sure there are some simple sites that can be pulled off with CSS and look pretty much the same but honestly, when you reduce your site to this level, they ALLL look alike:
No, they sodding don't: http://www.csszengarden.com/
-
Re:re standards
Yes, i'm sure there are some simple sites that can be pulled off with CSS and look pretty much the same but honestly, when you reduce your site to this level, they ALLL look alike:
Ummm... you might be suprised at the varity that is allowed when you know what you are doing with CSS. I would have to say that the sites at CSSZenGarden look quite different. I could point out other examples, but I'll promote a bit of myself, just click on my URL and check out the code for both the front page and the Forums. Both use tables only on imported content from outside sources. The rest is full CSS.
Ted Tschopp
-
HTML for structure, CSS for presentation
they don't want to be locked into a specific set of HTML
Not having a gmail account I can't speak with certainty, but Google needs to be using valid HTML and use CSS to position the content. See CSS Zen Garden for examples of CSS' power, and an example of the beauty of well-structured HTML markup. -
Re:doesn't seem to work II
That's just the main page, there are far better in there to use for inspiration OR intoxication (Whatever is you pleasure). Looks like you are using Opera 6.06 or similar, is that right? That's the only browser I can get to give me that error. I'm sure one of the better webdevs here could tell us where the page designers went wrong (I do databases /
.NET - I'm only average at XHTML & CSS).
I like these (Mainly because they are pretty, but some have elastic layouts). If you are using Opera 6.06, these first pages wont work properly for you. (They're done for graphical style, not compatibility.)
http://www.csszengarden.com/?cssfile=/063/063.css& page=0
http://www.csszengarden.com/?cssfile=/090/090.css& page=1
http://www.csszengarden.com/?cssfile=/089/089.css& page=1
These pages work in Opera:
http://www.csszengarden.com/?cssfile=109%2F109.css
http://www.csszengarden.com/?cssfile=108%2F108.css
http://www.csszengarden.com/?cssfile=/095/095.css& page=1
http://www.csszengarden.com/?cssfile=/094/094.css& page=1
I just like to use zen as an example for people that don't realise just how powerful css layouts are (Many make the argument that you cannot attain the power of table based design with a pure XHTML / CSS layout, which quite frankly is utter crap). -
Re:doesn't seem to work II
That's just the main page, there are far better in there to use for inspiration OR intoxication (Whatever is you pleasure). Looks like you are using Opera 6.06 or similar, is that right? That's the only browser I can get to give me that error. I'm sure one of the better webdevs here could tell us where the page designers went wrong (I do databases /
.NET - I'm only average at XHTML & CSS).
I like these (Mainly because they are pretty, but some have elastic layouts). If you are using Opera 6.06, these first pages wont work properly for you. (They're done for graphical style, not compatibility.)
http://www.csszengarden.com/?cssfile=/063/063.css& page=0
http://www.csszengarden.com/?cssfile=/090/090.css& page=1
http://www.csszengarden.com/?cssfile=/089/089.css& page=1
These pages work in Opera:
http://www.csszengarden.com/?cssfile=109%2F109.css
http://www.csszengarden.com/?cssfile=108%2F108.css
http://www.csszengarden.com/?cssfile=/095/095.css& page=1
http://www.csszengarden.com/?cssfile=/094/094.css& page=1
I just like to use zen as an example for people that don't realise just how powerful css layouts are (Many make the argument that you cannot attain the power of table based design with a pure XHTML / CSS layout, which quite frankly is utter crap). -
Re:doesn't seem to work II
That's just the main page, there are far better in there to use for inspiration OR intoxication (Whatever is you pleasure). Looks like you are using Opera 6.06 or similar, is that right? That's the only browser I can get to give me that error. I'm sure one of the better webdevs here could tell us where the page designers went wrong (I do databases /
.NET - I'm only average at XHTML & CSS).
I like these (Mainly because they are pretty, but some have elastic layouts). If you are using Opera 6.06, these first pages wont work properly for you. (They're done for graphical style, not compatibility.)
http://www.csszengarden.com/?cssfile=/063/063.css& page=0
http://www.csszengarden.com/?cssfile=/090/090.css& page=1
http://www.csszengarden.com/?cssfile=/089/089.css& page=1
These pages work in Opera:
http://www.csszengarden.com/?cssfile=109%2F109.css
http://www.csszengarden.com/?cssfile=108%2F108.css
http://www.csszengarden.com/?cssfile=/095/095.css& page=1
http://www.csszengarden.com/?cssfile=/094/094.css& page=1
I just like to use zen as an example for people that don't realise just how powerful css layouts are (Many make the argument that you cannot attain the power of table based design with a pure XHTML / CSS layout, which quite frankly is utter crap). -
Re:doesn't seem to work II
That's just the main page, there are far better in there to use for inspiration OR intoxication (Whatever is you pleasure). Looks like you are using Opera 6.06 or similar, is that right? That's the only browser I can get to give me that error. I'm sure one of the better webdevs here could tell us where the page designers went wrong (I do databases /
.NET - I'm only average at XHTML & CSS).
I like these (Mainly because they are pretty, but some have elastic layouts). If you are using Opera 6.06, these first pages wont work properly for you. (They're done for graphical style, not compatibility.)
http://www.csszengarden.com/?cssfile=/063/063.css& page=0
http://www.csszengarden.com/?cssfile=/090/090.css& page=1
http://www.csszengarden.com/?cssfile=/089/089.css& page=1
These pages work in Opera:
http://www.csszengarden.com/?cssfile=109%2F109.css
http://www.csszengarden.com/?cssfile=108%2F108.css
http://www.csszengarden.com/?cssfile=/095/095.css& page=1
http://www.csszengarden.com/?cssfile=/094/094.css& page=1
I just like to use zen as an example for people that don't realise just how powerful css layouts are (Many make the argument that you cannot attain the power of table based design with a pure XHTML / CSS layout, which quite frankly is utter crap). -
Re:doesn't seem to work II
That's just the main page, there are far better in there to use for inspiration OR intoxication (Whatever is you pleasure). Looks like you are using Opera 6.06 or similar, is that right? That's the only browser I can get to give me that error. I'm sure one of the better webdevs here could tell us where the page designers went wrong (I do databases /
.NET - I'm only average at XHTML & CSS).
I like these (Mainly because they are pretty, but some have elastic layouts). If you are using Opera 6.06, these first pages wont work properly for you. (They're done for graphical style, not compatibility.)
http://www.csszengarden.com/?cssfile=/063/063.css& page=0
http://www.csszengarden.com/?cssfile=/090/090.css& page=1
http://www.csszengarden.com/?cssfile=/089/089.css& page=1
These pages work in Opera:
http://www.csszengarden.com/?cssfile=109%2F109.css
http://www.csszengarden.com/?cssfile=108%2F108.css
http://www.csszengarden.com/?cssfile=/095/095.css& page=1
http://www.csszengarden.com/?cssfile=/094/094.css& page=1
I just like to use zen as an example for people that don't realise just how powerful css layouts are (Many make the argument that you cannot attain the power of table based design with a pure XHTML / CSS layout, which quite frankly is utter crap). -
Re:doesn't seem to work II
That's just the main page, there are far better in there to use for inspiration OR intoxication (Whatever is you pleasure). Looks like you are using Opera 6.06 or similar, is that right? That's the only browser I can get to give me that error. I'm sure one of the better webdevs here could tell us where the page designers went wrong (I do databases /
.NET - I'm only average at XHTML & CSS).
I like these (Mainly because they are pretty, but some have elastic layouts). If you are using Opera 6.06, these first pages wont work properly for you. (They're done for graphical style, not compatibility.)
http://www.csszengarden.com/?cssfile=/063/063.css& page=0
http://www.csszengarden.com/?cssfile=/090/090.css& page=1
http://www.csszengarden.com/?cssfile=/089/089.css& page=1
These pages work in Opera:
http://www.csszengarden.com/?cssfile=109%2F109.css
http://www.csszengarden.com/?cssfile=108%2F108.css
http://www.csszengarden.com/?cssfile=/095/095.css& page=1
http://www.csszengarden.com/?cssfile=/094/094.css& page=1
I just like to use zen as an example for people that don't realise just how powerful css layouts are (Many make the argument that you cannot attain the power of table based design with a pure XHTML / CSS layout, which quite frankly is utter crap). -
Re:doesn't seem to work II
That's just the main page, there are far better in there to use for inspiration OR intoxication (Whatever is you pleasure). Looks like you are using Opera 6.06 or similar, is that right? That's the only browser I can get to give me that error. I'm sure one of the better webdevs here could tell us where the page designers went wrong (I do databases /
.NET - I'm only average at XHTML & CSS).
I like these (Mainly because they are pretty, but some have elastic layouts). If you are using Opera 6.06, these first pages wont work properly for you. (They're done for graphical style, not compatibility.)
http://www.csszengarden.com/?cssfile=/063/063.css& page=0
http://www.csszengarden.com/?cssfile=/090/090.css& page=1
http://www.csszengarden.com/?cssfile=/089/089.css& page=1
These pages work in Opera:
http://www.csszengarden.com/?cssfile=109%2F109.css
http://www.csszengarden.com/?cssfile=108%2F108.css
http://www.csszengarden.com/?cssfile=/095/095.css& page=1
http://www.csszengarden.com/?cssfile=/094/094.css& page=1
I just like to use zen as an example for people that don't realise just how powerful css layouts are (Many make the argument that you cannot attain the power of table based design with a pure XHTML / CSS layout, which quite frankly is utter crap). -
Re:ASP has nothing to do with it
Good old Peter Blum - quality validators. While on the subject of
.net improvements, don't forget to update the machine.config file so that .net doesn't detect uplevel browsers as downlevel and start outputting HTML 3.2. You can find a fairly good browsercaps file here: http://www.codeproject.com/aspnet/browsercaps.asp though there may be better resources around.
For CSS - I can recommend (In no particular order):
http://thenoodleincident.com/tutorials/css/
http://www.meyerweb.com/eric/css/edge/
http://www.positioniseverything.net/
http://www.s7u.co.uk/
http://alistapart.com/topics/css/
For CSS inspiration, go here: http://www.csszengarden.com/
But I would go for a book:
Designing with Web Standards, Jeffrey Zeldman (ISBN: 0735712018). Possibly also the Eric Meyer on CSS books too.
Enjoy. -
Re:Why You Should Use XHTML 2.0 ????
Yes, most of them are fixed width -- just like most of the table-based layouts on the web are also fixed width. This is a design choice, not a technical constraint. CSS can do the standard three column layout on all browsers through a variety of methods.
No, it's not the only layout on CSS Zen Garden that does. In fact my favorite, Bonsai Sky is quite flexible in addition to being visually stunning.
Then again, I think that quite a few of the fixed width layouts are great too. So they don't scale out to 1000px wide. In my opinion, some of them don't have to; It doesn't detract from the experience.
But the moral to the story is that every layout on that site is the exact same XHTML markup. The exact same. Only the CSS stylesheet changes. Can your table-based layouts do that when your company decides the web site needs a facelift, or are you hacking and slashing your logic, scripting, and markup to get it done? -
Re:Why You Should Use XHTML 2.0 ????
Three words: CSS Zen Garden. Or do you consider those "real basic layouts"?
...and they work in IE.
The only reason you think tables are easier is because you already know how to make layouts with tables (and have learned the necessary cross-browser hacks), but you haven't learned CSS to the same extent.
CSS can do anything a table-based layout can do AND can do a few things that tables cannot. And please don't bring in comparisons or DOM/CSS to HTML. The DOM has nothing to do with it unless you're scripting. If you're scripting, then yes, DOM/CSS is worlds better than document.write()/HTML.
Oh yeah... Dreamweaver does XHTML now. So I guess that makes your entire post wrong. A shame that. -
Has anyone tried coding a site in pure XHTML/CSS?
It's horribly painful to create a decent layout using strict XHTML and CSS. You can make some nice-looking things after a bit of work, such as the samples at CSS Zen Garden. However, try looking at the CSS file for any of the nicer designs. They appear to be completely hacked together! Separating the CSS stylesheets from the XHTML source makes them even harder to understand, since you can't figure out which element has which id/class and what order the elements come in.
For 99% of site designs, tables work perfectly well. You want some header accross the top, a sidebar with links on the left, perhaps another sidebar on the right, then some content and a footer that spans the bottom. It's very natural to perform a layout using rectangular blocks. If you look at any print publication, it's probably also laid out using blocks.
When you're making a website, one of your main goals is to make it look good. If you just wanted to give the user annotated data, you could just give them a plain XML file. -
Re:Ugh
Clearly you aren't a web developer.
Most of the web developers I know (and I know a lot) started out using tools like Dreamweaver and GoLive etc, which now output decent XHTML, but now they are starting to move toward XHTML and CSS in their designs (which are some of the best on the net, might I add), and they're switching to using text editors exclusively for writing the code, plus your standard graphics programs for the images. I do the same.
The great thing about XHTML is that is separates the content from the design, which in turn makes your code beautiful and easy to write and maintain. I was looking at an XHTML page I had written the other day, and I thought, gee, I could just put this up as plain text and people would still understand it. It was free of all that contextual crap (tables, font tags, one-pixel spacer images) that heavily-designed HTML pages of two years ago were full of. So no, a text editor is not just for writing static text. I use mine for every aspect of the design process, though, admittedly ConTEXT is not notepad, it's pretty close. And I would contest that the sites I develop aren't crappy looking.
You may be able to design sites with a tailored WYSIWYG HTML editor, but you usally have little control over how everything fits together, and it results in messy code that is hard to understand. If that works for you, then fine, great. All I can say is that you better "know some of this stuff" and how to do it without your XHTML editor -- learn it in notepad -- and then, once you see what was output by your editor, and if you have any respect for the XHTML standard and the ideals that the W3C had in mind when they thought of it, I have a feeling you won't go back.