Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

CSS Layouts on the Fly


  • Please log in to reply
20 replies to this topic

#1 BillSlawski

BillSlawski

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 15644 posts

Posted 27 September 2003 - 07:13 PM

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.

#2 James

James

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 2104 posts

Posted 28 September 2003 - 05:59 AM

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

#3 BillSlawski

BillSlawski

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 15644 posts

Posted 28 September 2003 - 07:42 AM

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.

#4 James

James

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 2104 posts

Posted 28 September 2003 - 08:38 AM

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.

#5 BillSlawski

BillSlawski

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 15644 posts

Posted 29 September 2003 - 12:48 AM

There's now a sequel to the listamatic site

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

#6 James

James

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 2104 posts

Posted 29 September 2003 - 01:48 AM

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!).



#7 BillSlawski

BillSlawski

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 15644 posts

Posted 29 September 2003 - 05:33 AM

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.)

#8 James

James

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 2104 posts

Posted 29 September 2003 - 07:24 AM

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

#9 dragonlady7

dragonlady7

    Honorary Member

  • Members
  • 1117 posts

Posted 29 September 2003 - 08:00 AM

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!"

#10 BillSlawski

BillSlawski

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 15644 posts

Posted 29 September 2003 - 07:08 PM

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. :D At least for a template for that blog that I hear is coming.

#11 dragonlady7

dragonlady7

    Honorary Member

  • Members
  • 1117 posts

Posted 30 September 2003 - 06:49 AM

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?

#12 Adrian

Adrian

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 5779 posts

Posted 30 September 2003 - 07:33 AM

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 :)

#13 dragonlady7

dragonlady7

    Honorary Member

  • Members
  • 1117 posts

Posted 30 September 2003 - 08:39 AM

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...

#14 Adrian

Adrian

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 5779 posts

Posted 30 September 2003 - 01:28 PM

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 :)

#15 winteromeo

winteromeo

    Ready To Fly Member

  • Members
  • 38 posts

Posted 05 October 2003 - 10:31 PM

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

#16 winteromeo

winteromeo

    Ready To Fly Member

  • Members
  • 38 posts

Posted 05 October 2003 - 10:31 PM

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

#17 BillSlawski

BillSlawski

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 15644 posts

Posted 05 October 2003 - 10:41 PM

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.

#18 winteromeo

winteromeo

    Ready To Fly Member

  • Members
  • 38 posts

Posted 30 December 2003 - 06:07 AM

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..

#19 BillSlawski

BillSlawski

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 15644 posts

Posted 30 December 2003 - 06:59 AM

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.

#20 James

James

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 2104 posts

Posted 30 December 2003 - 07:49 AM

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

#21 BillSlawski

BillSlawski

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 15644 posts

Posted 30 December 2003 - 08:11 AM

...otherwise you may find yourself up to your neck in something that you'd rather not land in.



I always hate when that happens. ;)

Sometimes you have no choice, and no control, but in this, it is there.

Here's a link to the companion web site for the Eric Meyer Book:

http://www.ericmeyeroncss.com/

It describes the different projects that the book takes on in much more detail. The project approach really works well, and is fun, too.



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users