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 20 – Formatting the Scrollbar

Firstly, I’m sorry it took ages for the next post to be written. Firstly, I just haven’t been finding the time to go on the computer with my busy (*cough*) schedule, but it’s also taken me ages to think of what to write about next. So, eventually, I’ve decided on formatting the scrollbar. However, this isn’t essential, for the following reason:

Basically, to put it simply, all web browsers are different. So Firefox can do this, and Internet Explorer (simply shortened to IE) can do that, and formatting the scrollbar will only be seen by people using the more recent versions of IE (Internet Explorer). Still, you may as well format it, so that the people who visit your webpage, that are using IE, can enjoy it. Here is the code you need:

body { scrollbar-face-color: #000000; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #CCCCCC; scrollbar-darkshadow-color: #999999; scrollbar-shadow-color: #333333; scrollbar-arrow-color: #AAAAAA; scrollbar-track-color: #BBBBBB; }

• It does seem like a lot of coding, that probably makes no sense to you whatsoever, and yes, the first time I saw this, I was completely confused, but once you know what each “scrollbar-….” is, then it’s quite simple.
• Customize the colours to whatever you like, using Hex Colours. Generally, you should give it colours to match the colour scheme of your page (ie: the background, text colours, etc).
• Still confused? I often go to this really good site, which has lots of generators for your CSS coding. Click here to go to a generator that makes the code above.

That’s all for now. I hope you enjoy the post about formatting the scrollbar. It may not be an essential part of your website, but at least it’s something you can do to make IE users extra special. Bye!