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!

Lesson 25 – ID’s (Part One)

Yeah, so I’ve spent a while trying to write a post for AJCann, but I then eventually decided that it would be too difficult to explain it in a post, until I’ve covered some other stuff. So basically – I’ve wasted a lot of time. A week or so, to be more precise. But anyway, on to a very important post for you all.

So now you have quite a lot of tags, don’t you? You have your <p> tags, your strikethroughs, your bold text, and don’t forget your links, either. Well, what if you want two kinds of these sort of tags, for instance. What if you want certain text for the left side of your page, and certain text for the other side of the page? (I know, that probably sounds a little weird, but it could happen). That’s where ID’s come in. ID’s can give you two kinds of <p> tag, or header, or whatever kind of text you like. Here’s a code you would use:

#IDNAMEGOESHERE { font: 12px Courier; color: #663399; text-align: left; text-indent: 1px; }

• In case you were wondering, the “#”, which I have put in bold, is something you always need to put before your ID name (which you can change to whatever you want, by the way).That tells the web browser, reading your CSS, that the tag you’ve just formatted is an ID.
• Change the the height, colour, and the font itself to whatever you want. It’s all customizable to whatever you like.
• Due to the fact that you now know about aligning divs, you do not actually need to align your text in the CSS, but it can be quite helpful, depending on the situation you’re in. And you never actually needed the text-indent anyway, so use it if you like.

So now you have your nicely named ID (I hope it has a better name than my one does). The question you’ll probably ask yourself now, is how do you apply this to your text? Actually, it’s very simple. This is all you need to do:

<p id=”IDNAMEGOESHERE“>Text goes here.</p>

• That is, literally, all there is to it on the HTML side. Remember to put the ID name you chose, in between the “”, or else it won’t work!
• Also, you can change it from the <p> tag to what ever text tag you want. It’s really that simple! All you’ll have to do, is replace the two ‘p’s with the name of the tag you desire.

And that’s it for now. But for any of you wondering, this is what the text with the applied ID would actually look like!

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!

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 22 – Linking to Your Stylesheet

It may seem a little confusing, the title, but basically this post is about how to set up your CSS for your page. It’s something I have apparently missed out on showing you, which is a little embarrassing. But anyway, on we go. The code required to do this, needs to be placed in the head section of every page in your website. Generally, if you are making a website, you can just copy and paste a document which includes the layout of your page, along with the link to your CSS Stylesheet, on each new page you write, before you start. If you can’t find a head section on your page, look for the tags: <head></head>, and if necessary, write your own. Here’s the all important code:

<link href=”yourcssfilegoeshere.css” rel=”stylesheet” type=”text/css”>

• That’s it really. Make sure the code goes in between those head tags, and it’ll work fine.
• However, if you do get your website set up on the internet, it is a little different. What you need to do, is copy and paste your CSS Stylesheet onto a page onto your website. Here is the updated code you need:

<link href=”http://theurlofyourstylesheet.css” rel=”stylesheet” type=”text/css”>

• As you can see, there isn’t much of a difference. Instead of linking to a file which is on your computer, and only your computer, you’ve linked to a stylesheet that’s on the internet, which everyone can see, if they want to.

That’s the end of this much-needed post. I apologize for forgetting how to show this to you, but, I have now. In case you haven’t noticed, CSSBytes has finally reached a thousand hits and beyond! Yay! I won’t be writing any posts until next Wednesday or so, because I’ll be on a short break. Click here for a little more information. Bye.

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!

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.