20 replies to this topic

[bragadocchio]

If you've never had the chance to set up a site that was mostly formatted with CSS, you might like the Layoutomatic.

If you have worked with CSS before, this is a good automated system for starting out on that new design.

If you haven't used CSS before, and you try one of these out, but have questions, please let us know, and we'll get you moving in the right direction.

[James]

Bill,

A very handy resource there Bill. Combined with list-o-matic, they give a good idea of how to get the basic structure of a CSS-based web site built.

Regards,
James

[bragadocchio]

Good point James.

Between the two, they've made it easier for people to try out CSS.

And the layoutomatic design has been tested for cross browser support, which is great, too.

[James]

Indeed, the main trouble with CSS is that browsers don't support it in the same ways and therefore there are a number of hacks that are required to get more of less the same effect.

[bragadocchio]

There's now a sequel to the listamatic site

It's the listamatic2, which shows how to do nested lists.

[James]

Don't get too excited though as:

Unfortunately, these examples are not very suitable for practical use, as the most widely used browser (IE6/win) is not supported (try!).

[bragadocchio]

I'm going to have to try these out James.

They write in their browser support chart that most of these, except for the CSS3 example, will work in IE5 and IE6.

(I also had listamatic3 in my previous post. It's only listamatic2.)

[James]

You are right Bill. All of the others work fine in IE. However, they aren't overly exciting. Still a useful educational resource though.

[dragonlady7]

Those are good resources, guys. Thanks. I'll be looking into those. How did you know I was in the middle of working up a good CSS stylesheet? Oh, right, because my site's totally unformatted black text on a white background and I don't have the chutzpah to pull that off as minimalism.
But, heh heh, the thread reads like you're two news anchors. I don't know why, there's just something about it, but it's pretty funny. Just read it aloud in your best Dan Rather voice. "Back to you, Bill!"

[bragadocchio]

You're welcome, Bridget.

As James says:

However, they aren't overly exciting.

And he's right, but if you can bring a lot of simple parts together, you may end up with something pretty nice. Use a three column layout, and incorporate the css lists, build in an "@media print" printable style, a handheld style, a couple of alternative style sheets selectible on the front page, throw in a skip navigation link, and you're moving in the right direction. At least for a template for that blog that I hear is coming.

[dragonlady7]

Can you explain the concept of the "skip navigation link" to me again? I don't really understand it in this context. I assumed it was for if you had an elaborate menu system. I must've missed where it was explained.
Is it a screen reader thing, so that the user doesn't have to listen to my navigation read out every time he opens a page? How does that work? I haven't ever used a screen reader so this is hard for me to anticipate.
I've never even seen anyone using a screen reader. My programmer has, and said it was one of the weirdest things to listen to-- the kid had the speed cranked up all the way on the reader so it sounded like high-speed gibberish.
Anyhow, is that what a skip navigation link is?

[Adrian]

http://www.camaban.co.uk/skipnav.php should help you out there Bridget

Let me know if that doesn't answer all your questions on Skip Nav

[dragonlady7]

Hmm... how convenient. You didn't just write that for me, did you? (hey, it prints pretty well, too. Well done.)

OK, so I was right, it was for screen readers to skip the navigation and go straight to the content. Hmm... That is a challenge, to design a good-looking one that works and doesn't confuse visitors using a regular web browser...

[Adrian]

Heh, I did it when I was finding answers to the same kind of questions, I had a rough idea of what it was, but not much, and had trouble finding somewhere that explained it. Glad to see it did its intended job

[winteromeo]

Dreamweaver also have the option to format CSS layer. But is it difficult to do? What is the guidline to use CSS?

http://winteromeo.tk

[winteromeo]

Dreamweaver also have the option to format CSS layer. But is it difficult to do? What is the guidline to use CSS?

http://www.winteromeo.tk

[bragadocchio]

Hi winteromeo,

Welcome to the forums. Have you ever tried Cascading Style Sheets?

The official standards for CSS are on the W3C website:

http://www.w3.org/Style/CSS/

There are a lot of tutorials on Style sheets on the web. Here's a link to one:

http://hotwired.lyco.../tutorial1.html

There are a lot of benefits to using Style sheets. One of the biggest sites using style sheets these days is the ESPN web site.

[winteromeo]

hi, thanks for thr reply.

using CSS means must plan your site first before comitting to designing. haven't really learn CSS yet. but will try..

[bragadocchio]

You're welcome,

I do think that you can start learning some CSS without going having to learn it all in one lump.

For instance, try taking a page that you already have, and use a little CSS on it. Format some of the font colors, or redo a navigation menu. It is possible to learn some of it in increments.

But do try out some tutorials, and maybe make a test "hobby" site or two before you rely upon your CSS skills. It can increase your comfort a lot by having some success with it.

[James]

Bill,

I have to agree with you there. Do not jump in with both feet, otherwise you may find yourself up to your neck in something that you'd rather not land in. Take it slowly, understand how each bit of CSS affects another. I can recommend neck deep in Eric Meyer's book, Eric Meyer on CSS: Mastering the Language of Web Design.

Regards,
James