Lesson 28 – Position:Fixed

Absolute positioning is good, very good, in fact, but sometimes you may end up in a situation where it’s not the answer. This is where fixed positioning comes in. Does the word ‘fixed’ sound familiar? If it does, you’re right to think so. Think back to this post, with the non-repeating backgrounds, and you’ll find out. Except, with Divs, you need to position it in pixels, not just by typing ‘center’, or ‘left bottom’, etc. Here’s the code you’ll need:

#IDNAMEGOESHERE { border: 2px groove #3399DD; font: 12px Arial; text-indent: 3px; height: 200px; width: 300px; overflow: auto; position: fixed; left: 100px; top: 100px; right: 100px; bottom: 100px; }

• There’s not much to it, really, is there? It’s very similar to absolute positioning, except that you put “position: fixed;” rather than “position: absolute;”.
• Remember that you can’t position it using left, right, top and bottom. You can only use combinations such as left bottom, and right top.
• This will have the same effect as it did on your backgrounds. When you scroll down on your page, the Div Box will remain in the same position, always. At times this can be very useful, for features on your webpage such as navigation, for instance.

The only warning I’ll give you, is to be careful where you position your Div Box in relative to other text that you may have on your page. You don’t want to have your fancy Div blocking all of your text, now do you? Bye.

Lesson 27 – Positioning Your Div Box

So, now you have your Div boxes. Great! You’ve made yourself a simple layout now. But the trouble is, you can only put these boxes on the far left, far right and centre of your page. This is where positioning comes in. Now you can put your Div boxes, wherever you want them. But be careful – this can go very wrong… Anyway, let’s start with the code:

#IDNAMEGOESHERE { border: 2px groove #3399DD; font: 12px Arial; text-indent: 3px; height: 200px; width: 300px; overflow: auto; position: absolute; left: 100px; right: 100px; top: 100px; bottom: 100px; }

• Woah, that’s a lot of coding, isn’t it. Well don’t worry, you already know most of it, from here, so you only need to concentrate on the text that is coloured.
• So what is the coloured text? Basically, that’s what will position your Div box wherever you want it, and you don’t even need all of it
• The “position: absolute;” part, tells the web browser that your Div box will always be in a certain place on the page. For example, it could be 100 pixels from the left of the window, and 100 pixels from the top of the window.
• You can customize everything coloured, except for the “position: absolute;” part (I’ll get onto that in a later post). But you only need to use two of the options (i.e: top & left, right & bottom).
• Make sure that when you position your boxe, they don’t conflict with your padding or margins, or cover up some other text on the page, because it looms messy and unprofessional.
• But finally, the most important tip: don’t position your Div boxes just for your computer, and your computer alone – the chances are, your layout will work for your computer, and your computer alone. Be aware that some people will have different screen resolutions to you.

And that’s it for now. If you’ve forgotten the HTML code for your Div box, then click here. (The positioning will not affect this code). Bye for now, and have fun positioning your Div boxes. (I know that sounds really sad…)

Lesson 26 – ID’s (Part Two)

I’m going to skip right to the chase here, for some reason. As well as all kinds of text, ID’s can be applied to tables, divs, and images, as well (there is some really, really cool stuff you can do with images, as well, but I can’t do them myself). Here’s the CSS code for you, for images:

#IDNAMEGOESHERE { border: 2px groove #3399DD; padding: 3px; }

• Yeah, unfortunately, there’s not much I can really do with images, to be honest. Check back to the borders and images post, for reference on how to customize these.
• Remember to put a new ID for your image, as well. And here is the HTML code for it:

<img src=”yourimageswebaddressgoeshere” id=”IDNAMEGOESHERE”>

• Remember to change the ID name for your image in the HTML, as well as it’s URL, or it won’t work for you.

Unlike the images, I can do a lot more with Divs and Tables. Now, a Div box is like a table, except it only has one column, and it is easier to position on your page. You’re less likely to get in a mess, putting Divs in Divs, than Tables in Tables. Here is some stuff you can put in their ID’s CSS:

#IDNAMEGOESHERE { border: 2px groove #3399DD; font: 12px Arial; text-indent: 3px; height: 200px; width: 300px; overflow: auto; }

• That is a lot of stuff to look at, isn’t it. Well, most of it is stuff that you’ve done before, like the border of your Div or Table, the Text Indent, Height, and Width.
• Now, a good thing about Divs, is that you can specify the font which you want in your Div, and only in your Div. However, you may want to use a <p> tag for your text inside Divs instead, in case you want to use italic, bold, or fancy text in your Divs (excluding headers).
• Then, there’s the “overflow: auto;”, bit. Sounds technical, doesn’t it? Don’t worry. Basically, if your text inside your Table or Div ends up being longer than 200 pixels of height, then it will go into ’scrolling’. Scrolling just means that you’ll be able to scroll in your little box, like you can on most webpages.
• Here’s the HTML code for these two:

<table id=”IDNAMEGOESHERE”><tr><td>Whatever you want inside your little box (text, images, etc) goes here. Remember to code the right amount of columns and rows you want!</td></tr></table>

<div id=”IDNAMEGOESHERE”>Whatever you want inside your little box (text, images, etc) goes here.</div>

---

Now, you may not think it, but that was a very valuable part of making your own webpage layout. You’ve just learned how to make a Div box, and how to specify it’s height and width. You even know how to get it to scroll for you! Have fun with your Images, Divs and Tables!

So…. what to do now, you ask?

Sorry this post took so long, it took me ages to root up the link I originally had to the site below. It was in my email archives somewhere, and well, that’s a dangerous place to go. But anyway, here are some examples of the next things CSSBytes will be showing you how to make.

You might think that you can already make layouts, and that is true, with the use of tables. However, putting tables inside tables, for instance, can get very cluttered, and make your page look, well…  look like a big eyesore. With the use of these things called Divs (short for divisions, I believe), as well as ID’s (which is really what you’d think it might be), you can make your own layouts like on the page above.

A bit boring, you probably think, looking at the layouts on the other page. Well, you can spruce them up, with CSS, as well as some software such as Adobe Photoshop CS3 (which I just got – yay!), or simply MS Paint. So, in the next post, we’ll be getting started, with some simple Divs. Until then, bye!