So, You Want Positioning, Huh?

Please Note: You will need Netscape 4.x or Explorer 3.x or 4.x to finish this tutorial. This specific page will run in any browser, but the examples will need the higher level browser.

Use these to jump around or read it all...

[Positioning and Image] [How It's Done]
[Can This Be Done With Text?]
[Where's This List of Style Commands?]

Wouldn't it be great if you could make a point of placing every item on your page exactly where you want it? Even more -- make that placement exactly the same on every browser your page is viewed in? It looks like the answer is a series of Cascading Style Sheet commands that allow you to denote to the pixel where you want an item to be pinned up.

You should know that Style Sheets are not universal as the moment (1/8/98). Netscape's version 4.0 and Explorer 3 and 4 level browsers understand the style commands, but not always exactly the same way. This is a bit buggy at the moment. In fact, it's quite buggy. Netscape users will find that this works on the text but sometimes not on the images. You'll need to make sure those viewing your page are using one of the browsers above for this to work. I stress "need." If the browser doesn't get these positioning commands, then the page will just look bad.

I suggest you either use a routing JavaScript to send those with the correct browsers to one place and others to another place (I have one here) or don't use these commands, and Style Sheets in general, a great deal until they are more standard across browsers and platforms.

That said, we go forward....

Positioning An Image

You may notice soon that I am doing this by including all of the style sheet commands inside the items that I am positioning. You might wonder that if these are style sheets, why not put these in the text/css file or in the head commands inside <STYLE> commands. Well, you can. You can see how it's done in my Cascading Style Sheet tutorial. But, in order to teach this, it was easier to include the commands with the item that I am positioning. Plus I like doing it this way. To each their own I guess....

Avid readers of HTML Goodies might remember the commands for positioning an image from the Netscape Layering Commands. What you are going to do is tell the browser to position the upper left-hand corner of and image in a specific plot point on the page. Here's an example:

This new window will pop up with an image positioned 25 pixels from the top of the browser screen and 170 pixels from the left of the browser screen.

How It's Done

Here's the code I used to place the image at that specific plot point:

Here's What's Happening

IMG denotes that this will be an image.
STYLE= proclaims what will follow are style commands.
position:absolute; states that the image will go exactly where I say it will. If text or another picture is already there -- tough. This will go right over top of it. That is one of the drawbacks to this positioning stuff.
TOP:35px;LEFT:170px; These are the plot points for the image: 35 pixels down from the top and 170 pixels in from the left.
WIDTH:50px;HEIGHT:50px This is the height and width of the image itself.

Notice the semicolon between each section.

In order to demonstrate that the positioning of these images is absolute, here's the same example page as before with text where the image is positioned.

Can This Be Done With Text?

You bet. If you noticed in the last example, that yellow box that told you to close the window to get back to the tutorial also sat over top of the text.

Here's an example where a block of text is positioned 80 pixels from the top of the window
and 400 pixels from the left of the browser window.

Here's the command I used to position the text:

...and...

Here's What's Happening

DIV denotes that this is a "division" of the page, a section, if you will.
STYLE= denotes that some style commands will be put to work.
position: absolute; denotes that this division will be placed exactly where you want it placed.
top:80px; left:400px; is the positioning of the division.
width:200px; height:25px denotes the height and width of the division.
/DIV ends the division section.

Why Is The Text Jumped Down?

Because I made the width of the division too small for the text in it. Here's the same example with the division width set to 300px.

What Happened to the Color?

Easy fellah! It's simple enough to get back. Just add this command to the mix:

background-color: yellow

Now the division you set up is filled in with the color. It looks like this.
This will work with either word color codes or hex color codes. However, if you use a hex color code, make sure to place a hash mark (#) in front of the six characters. Like so: background-color: #FFFFFF

Can I Set Other Styles?

Sure, you can set just about any style command that works on text. Just make sure that if you set the font size higher that you give the division enough space to house it. Here's an example where I've used as many text-based style commands as I could find before it got boring.

The code looked like this:

Where's This List of Style Commands?

I have a pretty good one in my Cascading Style Sheet tutorial. You'll also find a very full list at C-Net and there's always the World Wide Web Consortium's Style Site.

You could even simplify the process by using Classes and ID's. But that's another tutorial.

Enjoy!

[Positioning and Image] [How It's Done]
[Can This Be Done With Text?]
[Where's This List of Style Commands?]