Tutorial #11:
Cascading Style Sheets Positioning
Other tutorials
CSS-P
|
Cascading Style Sheets Positioning, or CSS-P, is an aspect of CSS. It allows you to move objects such as text or images around the screen. It basically functions the same way as tables, but takes less time to download.
One little note of warning before I start is that CSS-P can be a little buggy in Netscape. My new and improved home page was going to use only CSS-P, but then I had problems in Netscape, so I had to use layers for it. Make sure you have NN 4 or up, or IE 4 or higher.
CSS-P is pretty simple. There are three VERY important things that you need to know about, but after that, there's not much of a problem. I assume that you have either taken my CSS tutorial, or you already know the fundamentals of it. Take a look at the first example...
<style type="text/css">
<!--
h2 {position: static;}
-->
</style>
Okay, let's take this as it comes. I put in h2, my selector, to be modified. position: is what you're going to see throughout the tutorial, because this tells the browser that you're going to mess with positioning. Static positioning is the most used. Why? Because it is the default. If you don't put anything in, then it will assume static positioning.
That wasn't so bad, was it? Okay, now it's going to get a little more sophisticated. Take a look at this:
<style type="text/css">
<!--
.brendan {position: absolute; top: 50px; left: 20px; width: 150px;}
-->
</style>
See? There is some more stuff in there, but it is pretty easy to understand. I'm using a class, brendan, to modify. This time, I'm using absolute positioning. Absolute positioning is cool because you can put whatever you want wherever you want on the screen. The next thing says top: 50px;. This says that the top of this class is going to be 50 pixels down from the top of the screen. You can set this to whatever you want. The same thing applies to the next property, except that you're setting the distance from the left side of the screen. The last thing that I put into there is optional. It sets the width in pixels of this class. So if I'm typing something in this class, The width won't continue till you're off the screen. Get what I'm saying?
There is one more type of positioning. Take a look at the results:
<style type="text/css">
<!--
#brendan {position: relative; top: -5px;}
-->
</style>
I defined an ID - Brendan (again) - and I introduced relative positioning. Relative positioning is kind of like absolute positioning, except that it stays in context. In other words, it would position a word in a paragraph, instead of a word positioned in a document.
With this knowledge, you can make your own dynamic pages. Good Luck!
Next tutorial up to bat: Frames! |
