Stay with me window!

Wow! This is a new feature I've never thought about. You can add all sorts of stuff like a menu or something and It'll stay with you all the way!

Of course it will cover the text if the window is too narrow and you can't have two of them since they'll cover each other. Cool enough though!

Here's another new thing. Id tags work too!

Oh, and by the way, the fixed position thingy doesn't work in IE6. I've added the float: right; style so that it's at least not in the way.

This here is a side note. This note should appear in its own box beside the text, which in turn should wrap around the box.

These paragraphs should render differently from the normal text too.

Observe that the paragraphs contained in this division are also contained within the main division, which means they will adapt any styles set for the main divisions paragraphs. This effect must be canceled out by redifining the styles within the "div.side p"-definition.

The header is here!

Alrighty. This page is only for testing some new stuff I learned while browsing through w3c's web site. Is that website or web site? Anyway in order to test these style definitions or whatever they are I'll need a lot of text. That's why I'm filling it up with nonsense...

Another paragraph! Yes. Yell some more. Yell 'till your face is blue, 'till you drop, and I won't have to listen to it no more! Or not. Choise is yours. My point is only that it really hurts when you yell into my ear. I did not yell! You just did. I mean you did it again. And person one storms out the door.

The paragraph in the footer. Again, this paragraph will render differently from the main text. Please note that I said will. As in I know it will happen. I bet I'll have to eat those words.

CSS test result

While everything worked as it should, I also learned something new. For instance, a paragraph, contained within a div, contained within another div, will adapt the same style as a paragraph within the root div, except for the style defined specifically for paragraphs in the top div. As an example the side text in the test turned red when I changed the color for the main text. I you look at the style sheet you'll notice I've redefined the color to turn the side text black again.

Another thing is that defining only the border color of a specific side of an element will not let that side adapt the line style and width defined for the borders of the entire element. Is this a bug in Firefox or is it meant to be? Logically it's meant to be, since the border definition is a whole.

Lesson learned. I'll use this knowledge when I distribute my final thesis on the Internet.

Tabbed interface

This is fun. You can select which information should be shown using stylesheets. Of course everything will be shown if the browser does not support css.

Here are the alternatives: one, two and none.

The one is selected. The one is shown.

The two is selected. The two is shown. Fun huh? Now press None in order to clear this text.

Of course, this doesn't work in IE6.

Centering without centering

This text should not be centered yet the block in which the text is written should be centered. This is by using the auto for left and right margins. Of course auto works also for top and bottom margins too.

What the auto actually does is that it fills up automatically. If it's only auto from one side then the text is pushed to the other side. With auto on both sides the text is pushed to the center.

And, of course, as it is with most of the fun stuff, it doesn't work with IE6!

This text, however, should also center in IE6. Rather irritating that we need an HTML-tag for it to work. Oh that silly IE6!

Well, All in all It's been great. And now I hate Microsoft even more.