CSS tutorials...

[mmmdreg]

anyone got or recommend a good tutorial for learning all that CSS stuff?

[szark]

This online tutorial (http://www.w3schools.com/css/default.asp) has worked for me. I'm trying to learn how to use CSS to improve my personal website.

[Chaszmyr]

Whats up with css? I had never heard of style sheets until recently and now they are everywhere

[mmmdreg]

Umm...how do you do that nav bar thing at w3.org?

[Rower_CPU]

Chaszmyr:
Cascading Style Sheets have exploded recently for several reasons:
1) Adoption by web browsers
2) Promotion by professional web designers
3) Web standards compliance

I love CSS because it lets me do away with table based layouts, and create a visually interesting webpage without using heavy graphics.

mmmdreg:
Here's what they're doing there. The are creating a style for the a:link and a:hover properties, something like this:

a:link {
color: #0000CC;
background-color: #FFFFFF;
}
a:hover {
color: #FFFFFF;
background-color: #0000CC;
}

[mmmdreg]

I meant how do they make that whole nav box float there? I can't see where it is covered in the prementioned tutorial

[Rower_CPU]

Originally posted by mmmdreg
I meant how do they make that whole nav box float there? I can't see where it is covered in the prementioned tutorial

Uh...you use the float property. Which specific part are you referring to? :confused:

[mmmdreg]

ahh sorry..I meant http://www.w3.org/Style/CSS/

[Choppaface]

the O' Reilly mini handbook is pretty good

[mmmdreg]

Originally posted by mmmdreg
ahh sorry..I meant http://www.w3.org/Style/CSS/

anyone?

[buffsldr]

try webmonkey.com, they have many tutorials that are well written and entertaining

[dricci]

I try to avoid CSS myself... I just use standard html, and to make things dynamic, I use PHP.

[Rower_CPU]

Originally posted by mmmdreg
anyone?

Here's the code they used:

div.banner {
margin: 0;
font-size: 90% /*smaller*/;
font-weight: bold;
line-height: 1.1;
text-align: center;
position: absolute; /* Fallback if 'fixed' is not supported */
top: 2em;
left: auto;
width: 8.5em;
right: 2em;
}
div.banner {
position: fixed; /* Overrides 'absolute' above */
}

[Rower_CPU]

Originally posted by dricci
I try to avoid CSS myself... I just use standard html, and to make things dynamic, I use PHP.

Why avoid CSS? I'm really curious as to what the perceived negatives are...other than inconsistent support by older browsers....

[Gaz]

Originally posted by Rower_CPU


Why avoid CSS? I'm really curious as to what the perceived negatives are...other than inconsistent support by older browsers....

Well I've been involved with some Government work overhere in the UK. They have very strict guideliness that you should follow (as with losts of large companies). A good example is support for TV baised browsers that are similar to IE 3 and have bad support for css.

Generally I use css for all my text formatting as it is much more powerful. However using layers for positioning items is just so inconsistent that unless I'm designing an intranet application it isn't worth the hassle. It's a real shame that the older technology is holding back new advances that can make the web a much more usable place but that's the way it is.

[Rower_CPU]

Originally posted by Gaz
Well I've been involved with some Government work overhere in the UK. They have very strict guideliness that you should follow (as with losts of large companies). A good example is support for TV baised browsers that are similar to IE 3 and have bad support for css.

Generally I use css for all my text formatting as it is much more powerful. However using layers for positioning items is just so inconsistent that unless I'm designing an intranet application it isn't worth the hassle. It's a real shame that the older technology is holding back new advances that can make the web a much more usable place but that's the way it is.

Please explain "TV based" browsers. I've never heard that term.

Using layout tables is a ridiculous way to have to create websites, and it completely defeats the purpose of tables: data. Tables are horrible for accessbility by screen readers and other assistive devices. I'm never using them again, if I can avoid it.

[Gaz]

Sorry I wasn't very clear. These are web browsers in peoples TVs. The ones which were distributed, unfortunately have very restrictive functionality.

I agree with you that tables are a pain but they do have merit. I don't know if you've heard of a technology called XForms but I've just written a processor for that and to help make it a solution that is truely portable I'm making it render the forms using tables in low end browsers and allow for CSS formatting in newer ones.

I have to say it's a real pain using tables to make the output look good.

[Gaz]

Sorry, I wasn't very clear. These are web browsers in peoples TVs. The ones which were distributed, unfortunately have very restrictive functionality.

I agree with you that tables are a pain but they do have merit. I don't know if you've heard of a technology called XForms but I've just written a processor for that and to help make it a solution that is truely portable I'm making it render the forms using tables in low end browsers and allow for CSS formatting in newer ones.

I have to say it's a real pain using tables to make the output look good.

[Rower_CPU]

XForms look very interesting. A good way to make forms accessible on any platform for almost any user. :)

[Gaz]

Yeah, I think they present quite a good future at the moment. I'm quite proud as I wrote what we believe to be the first working implementation (for web browsers).

Still better stop gloating (it won't get me any money anyway). I personally don't see XForms as the final solution thou. It's more of a step towards something bigger and ultimately much better.

Sorry my english is really bad today (too tired).

[mmmdreg]

I'm still really clueless about CSS...is anyone able to write me some html/css where like an OSX dock could feature like in the navbar here (http://www.w3.org/Style/CSS/)...

[Rower_CPU]

Originally posted by mmmdreg
I'm still really clueless about CSS...is anyone able to write me some html/css where like an OSX dock could feature like in the navbar here (http://www.w3.org/Style/CSS/)...

If you can't make out how to use the code I already posted, you should really take two giant steps back and start to learn CSS from the beginning. Otherwise you won't know how to fix/change what you copied...

It's not difficult, just do some Google searches. :)