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 19 – Padding

Alright, I won’t blame you to be a little taken aback from what the title of this post is. After all – padding? What could that mean? Well, basically, padding is very similar to margins, although it can be applied to more things than the body. I suggest you click here; it will explain the difference between margins and padding, much better than I would be able to! And finally, here is the CSS code for padding your page:

body { padding: 4px; }

• Yes, that literally is it. I don’t really have much to explain to you. You can increase or decrease the amount of pixels as much as you like, to suit your page.
• But now, you may come across the same problem which you had with margins. What if you want different padding for different sides of the page? Well, it has the same answer. Here is the code:

body { padding-top: 2px; padding-left: 6px; padding-right: 1px; padding-bottom: 3px; }

• Yes, so you just have padding-left, padding-right, etc, just the same as you had margin-left, margin-right, etc. Although amount of padding on each side is different, you generally may as well have the same amount of padding on the left and right, and the top and bottom.

But unlike margins, padding can be used on more things than just the body. And, it is very simple, too. Just add the snippets of code between the brackets ({}), to your CSS code for tables and images. Here is the code added to what I originally did, on their previous posts:

Tables

table { width: 300px; height: 300px; background-color: #FFFFCC; border: 1px solid; border-color: #000000; padding-top: 2px; padding-left: 6px; padding-right: 1px; padding-bottom: 3px; }

Images

img { border: 1px solid #000000; padding-top: 2px; padding-left: 6px; padding-right: 1px; padding-bottom: 3px; }

Yes, some of this may seem like an awful lot of coding, especially with the tables, but in reality it is not, because you already know what all of those things do, as well as padding too now. This shall be it for this post, and I hope it helps you code your Dreamsite. Bye!

Lesson 18 – Page Margins

Say if you do have that background image on your page, but you don’t want any of your text to go over, or under it. A quick way of sorting this, out, as well as helping you with other things too, is with the use of margins, for your page. This post shall tell you how to do it.

Firstly, you could just give your page a standard, full margin. Basically, this will give you a set margin from the top, bottom, left and right. When I say bottom, I mean the bottom of the page, where all of your content ends. I don’t mean the bottom of your web browser’s window. Try not to get this mixed up with the last post! :3 Anyway, here’s the code for you:

body { margin: 4px; }

• Yep, it really is that simple. All you need to do is type: “margin:”, followed by the amount of pixels you want in your margin. That’s in bold, for you to see.
• The margin I have showed you is only an example. Feel free to experiment with the amount. It could be four, it could be a thousand (although that would be dumb), or you could just have zero. See which one fits your page the best.

However, there are drawbacks from just doing this. If you were to use four pixels as your margin, it would be a four pixel margin on all sides of the page. So that’s the top, bottom, left and right. What if you don’t want that? What if you want certain margins to be smaller or bigger than others? Here’s the necessary code for that:

body { margin-top: 1px; margin-left: 4px; margin-right: 4px; margin-bottom: 1px; }

• So all you’ve really done is customize the margins more. Now you have a different margin for the left, right, top and bottom of the page. The bits in bold and colour are the things you need to add.
• Usually, the margin for the sides of the page, and the top and bottom should be the same. If you want, you can have no pixels for your margin, but you still should type that. It is generally best to have at least a one pixel margin, though.
• You don’t have to type them in that specific order which I did. They can go in any order, and you don’t have to have all of them (but again, I think you should).

And that’s the end of this post about margins. There is no “best margin” which you can use. I do suggest that you experiment with them until you find the right kind of margin for your page. Bye for now.