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.

Lesson 17 – Non-Repeating Backgrounds

Sure, having a tiled background for your page is nice, but what if you don’t want it constantly and repetitively repeating? Not many of the top websites actually have that. This is how you do it (remember that the image URL is only an example one):

body { background: url(http://images.neopets.com/new_shopkeepers/t_62.gif) no-repeat; }

• There isn’t particularly much to add, compared to what you would do with a repeating background. All you do is simply type “no-repeat”, after the URL of your background image. Simple, but remember to always keep the dash between the words, or else it won’t work. The image will be in the top left of the page now, not repeated.

But, what if you don’t want your background image

body { background: url(http://images.neopets.com/new_shopkeepers/t_62.gif) no-repeat right bottom; }

• Now, after “no-repeat”, you have told the computer where on the page you want your background to go. In this case, it will be on the very right bottom of the page. Also, you could put: right top, right center, left bottom, left center, left top, top center, bottom center, or just center. Try experimenting with it, to get your background image wherever you want!

Now, this still might not be perfect for you. If your page’s content is long enough to make the window of you web browser (eg: Internet Explorer, Firefox, Netscape), allow you to scroll down, then your page background will only be visible when you scroll down. Sometimes, you might not want this. So, this is the answer:

body { background: url(http://images.neopets.com/new_shopkeepers/t_62.gif) fixed no-repeat right bottom; }

• If you do this, then your background will always be at the left bottom of the Window, not the page.
• However, be careful if you do choose to do that. You don’t want your text to overlap with your background,. so if you do do that, then try putting all of your text in a table, which isn’t wide enough to overlap with the background.

And that will be it for now. There are a couple more background image tricks, but then it gets trickier and trickier from then on. I hope this helps you (I know one person who it has helped, yes, you know who you are). Bye!

Copyright 2000-2007 Neopets, Inc. All Rights Reserved. Used With Permission

Holiday…

To cut it short, I am going on holiday tomorrow, for a week, seeing as my summer break has started, so there will be no further updates here for that long. But, because it’s my summer break, I shall be able to post more frequently. Expect much more CSS stuff, and lots more pages, full of additional information – whether it’s useful or not, I don’t know. :3

If you want to know the full story, then visit my other blog, by clicking here. I am redirecting you there, because I don’t really want to write the same post twice. Bye for a week, and enjoy your holiday!

About Me

Alright, before I get started – no, this isn’t a lesson post, but you are still required to read on. (You’re not, but please do). Basically, I’ve added an “About Me” page to CSSBytes. As the title states, it is well…. about me. It gives you all of the information you really need to know about me, and if you want to know more, then you’re weird. x.x

There are some useful links on the bottom of the page though. Not all of them, (well, hardly any of them) are essential for CSS or HTML, but they still link to some great places, like Google, Google Images, Flickr and my personal favourite, Mactopia! Don’t forget the link to my other blog too. And well, that shall be all  that I have to say for now. Good bye!

Lesson 16 – Tiled Image Backgrounds

Now that we can do coloured backgrounds, why don’t we make it a little more interesting. Using images as backgrounds can give a great effect to your page, but only if they work well. If the image isn’t the right one for a background, (or the right size), your page shall look terrible. Here is our sample image, which we shall once again use for examples:

Remember it? You should, from the images posts, that I wrote before. You don’t have to do the same type of coding, for using images as backgrounds, but you need to remember the bit about URL’s. Here is our code:

body { background: url(http://images.neopets.com/new_shopkeepers/t_62.gif); }

• Once again, the background image option goes in the body section of your CSS stylesheet.
• Basically, after the “url”, you need to place the URL of your image, in brackets. And remember to change “background-color”, to “background-image”, or else it won’t work.
• And finally, you do need a space after “background-image”, but NO space in between “url” and the brackets. I personally don’t understand why it works like this, but it does. Make sure you do that, or else the code won’t work, and your image won’t show up as a background.

There are lots of clever tricks that you can do with images as backgrounds, via CSS, but they are more advanced, so I will show you them later, unless I get some extra special requests. That is it for now, so bye-bye, I hope this post helps you!

Copyright 2000-2007 Neopets, Inc. All Rights Reserved. Used With Permission

Lesson 15 – Coloured Backgrounds

The first thing I’ll show you with the body, is how to give your images a nice, coloured background. This makes your pages a lot more colourful, very easily. Without coding this, the background will always be a plain white, unless you download some extra software, to programs like Mozilla Firefox, or at least something like that…

And, here is that important CSS coding, to give your page a solid background. Make sure you use those hex colours!

body { background-color: #333333; }

• The tag for the page’s background is just body. A lot of other things also go through this body tag, but for the moment, we’ll just be looking at the solid background colours.
• All you need to write, is “background-color:”. Very simple, isn’t it? After that, you just put your wanted hex code. In this case, the page would have an interesting grey background. Even if you want a plain white background, it still is best to write the hex code for it (#FFFFFF).

Important Note: Make sure that if you have a background colour such as black, or another dark colour, that any of your text-colours are black, or the same colour as your page background, or else you won’t be able to see your text! ^^;;

And that is it for now. Have fun giving your pages cool backgrounds!