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 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!

Lesson 23 – More :Hover…

Yes, so if you’ve read an earlier post, showing you about hyperlinks that go on your page, you should already be familiar with the :hover, and what it does. If not, then basically, it’s what something (in the previous post’s case it was a link) will look like, whilst you hover over it with your mouse. But, this feature isn’t just for links. It can be used for many other things too, such as the following:

Text

Yes, so basically, any type of text has a :hover feature. This means normal text (<p>), bold, italic, underlined, strikethrough, overline, links, headers and simply any type of text, including any tags which you might make up yourself!This is the code you need for it:

p { font: 10px Arial; color: #000000; } p:hover { font: bold 15px Times; color: #FFCC99; }

• This was just an example. But anyway, see the bit in bold? That’s what you add to any of the tags mentioned above, if you want them to have a :hover attribute.
• You can also use this to fool people into thinking that piece of normal text is actually a link. They’ll press on it, and obviously, nothing will happen. That’s for all of you mean people out there!

Images and Tables

Those two are generally the more popular tags to have a :hover attribute, especially the images. It will be a very simple hover, at this stage, but you can do some very fancy ones. Here is the code for them:

img/table{ border: 1px solid; color: #000000; }img/table:hover { border: 27px groove; color: #FFCC99; }

• Of course, unlike with the text, your tables and images will have their borders edited instead. What I have showed is a little extreme, from one to twenty seven pixels, but it’s just an example. Try out both of the examples if you like!

That will be it for now. You don’t necessarily have to have the :hover attribute on any of your text whatsoever (not even the links), but it is a nice was to spruce up your text. Until later, ciao!

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

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 10 – Images & CSS

Okay. I apologize for the late post. This is all because I have been wrestling with the little bug. Fortunately, I’ve got rid of it now, so I’m not going to be held up any longer by it. Anyway, onto the lesson:

Unfortunately, I must admit, that I am pretty when it comes to doing images and all that. I can’t draw them (on the computer, or by hand, it doesn’t matter – either way I’m rubbish)! And we know that you can’t just take someone else’s image without permission, no matter how much you want it. And sometimes it’s hard to get permission. To add to that, I’m crap at formatting them with CSS too. Usually when I use images, I end up having to resort to just HTML, which is a bit embarrassing. Because of this, I’m only going to be able to teach you one CSS trick, with images.

img { border: 1px solid #000000 }

• The tag is called “img” seeing as when you use HTML, you put <”img” src…>. Again, img is short for image.
• When formatting borders with CSS, you can have a lot more fun than with HTML. You can:
• Customize the hex colour code to whichever one you desire.
• Change the border thickness from 1px (one pixel), to whatever you like.
• And, you can change the type of border too. Two different examples of borders are solid, (the one we are using, which is just well… solid), and dashed, (which is well… a dashed border).

That’s it for now. I hope you have more luck creating and formatting images than I do…

Lesson 9 – Images & HTML

Images are definitely a way to brighten up your webpage. They can be fun, colourful, or whatever you want them to be. This is an example of an image, from a great site called: Neopets.com. for it now it if you want.

 

 

About Images

All images have to come from somewhere, right? So how do people get images onto their websites (such as the one above). Basically, all images have their own URL, or website address, on something that is called an image server. In this case, the URL for this image is: http://images.neopets.com/new_shopkeepers/t_62.gif. It might seem quite complicated, but this is just the system that the website happens to use. Anyway, the image’s URL all comes into use when putting one on your site.

 

Getting Images Onto Your Site

There are two way of doing this. You can either go to many websites known as Image Hosting websites. These, basically give you a place to put your images, giving them their own URL. They don’t usually cost money either, and they shouldn’t need too. Two great examples of these are , and (what I use), but remember to read the terms and conditions for both of them! Or, your website might have an image server of it’s own, where you can just place your images.

 

And Finally, The HTML…

I know this is probably what you’ve been waiting for, so I won’t be stalling it any longer. Basically, all images use the <img> tag. As you can tell, “img” is just short for image. The interesting thing about this tag, though, is the fact that it doesn’t close. It is also similar to the tags for links, because you can’t just say “img”, because then the computer doesn’t know what image to display. This is the code for putting up the image that I have:

<img src=”http://images.neopets.com/new_shopkeepers/t_62.gif”>

• Notice how you can see the Image’s URL in that code. Also,you can see that there is no point closing the code, because there is nothing to close in reality.
• For image

Extra Stuff (Optional)

Sometimes you might want to put a border around your image, to make it look snappier, or more defined. This is very simple. Here is the code (which has been extended a little) for it:

<img src=”http://images.neopets.com/pets/happy/scorchio_darigan_baby.gif” border=”1″>

• So you put border=”1″after the image’s URL, but before the end of the tag. This means that your images will have a border, in this case it will just be 1 pixel thick, but you can change the number to make the border thicker or thinner.
• Below, is what the image would look like if you used this code:

 

As you can tell, borders don’t always look right around images, like this one for example. They can sometimes be useful though, if your page has a different background colour to your image, so the border will prevent them from clashing together.

One other thing that you can do, is re-size your image. Firstly, you need to know what size your image is in the first place. If you can’t remember, then all you have to do is open the image in your web browser (as long as you can remember the URL), or open it in an application like, Paint, and check the size. Now that you know the size of the image, it becomes easy to change it. In this case, our image is 150 pixels x 150 pixels. This is how you would change it:

<img src=”http://images.neopets.com/pets/happy/scorchio_darigan_baby.gif” width=”75px” height=”75px”>

• Like when you formatted a border, you just placed your text after the image’s URL. The image size will usually be measured in pixels, so put “px” after your number, to tell the computer that it is in pixels.
• Very importantly, always keep the proportions on your image the same, or else it will look absolutely terrible. In this case, both measurements were the same, so it wasn’t too hard. The only exception to this would be if your image was warped to start with.
• This is what your image would look like:

And that is it for now. There is more that you can do with your images, but again,it is more advanced. But for now, have fun with your images!

Edit: Sorry if this post came out  strangely. I have been wrestling with a bug on WordPress to get it fixed.

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