Using CSS to full potential

Kol Vol wrote:Using CSS to full potential


Sorry for being to long, some parts are a must if you are changing to directly editting your CSS file. This should go into about 5 different tips & tricks topics =)

The styles system works by predetermined rules. It tells you what you are able to change and what not. While this may be a lot easier for many people there are a lot of tricks you can make to change the CSS so that you can have a better forum than everyone else.

How HTML works
*Before we begin we need to know a bit of HTML and CSS, this wont take long so If you want you can skip this.
HTML Isn't a programming language. HTML is just a way of showing whatever you put in, it may look complicated but its simple. if you say:

Code:

<font color=red> testing </font>

You would get this: testing
HTML does not count big sapces so:

Code:

<font color=red>                 testing                   </font>

Would appear just the same.

these boxes <> are called tags. The first one is normal and the second one has a '/' in front of it to show its ended. They determine what it does and extra words inside the tags determine its properties. Font is what it does, it determines that this area is font. While this would normally happen anyway, the color atribute says that it is to be collored red.
Tags work inside eachother but not through eachother:

Code:

<font><style><div>test</div></style></font>

Try to think of it like this:

font wrote:

style wrote:

div wrote:test

So they cant get mixed up. Note that you can't use code to make code look nice. It has to look just plain or else if you try to make it look nice, it will all just come out as code so dont mess around with that.

All tags have different uses and I would have to get payed to write them all down so  

CSS

On to CSS.
CSS go's like this:

Code:

tag { extra properties;}

Note the ; at the end of the line, this is generally accepted in evey programmming language except HTML. What CSS does is, it adds extra properties to a tag. This can be used as in with your foum to make every page look the same. It can also be used to make every page look even better.

Fixing the background


*Firstly, the background. Note in the CSS file at the beginning something like this:

Code:

body {
background-color: #000000;
background-image: url("https://i28.servimg.com/u/f28/11/40/02/06/matrix10.jpg");
Background-attachment: fixed;
background-repeat: repeat;
scrollbar-face-color: #;
scrollbar-highlight-color: #;
scrollbar-shadow-color: #;
scrollbar-3dlight-color: #;
scrollbar-arrow-color: #;
scrollbar-track-color: #;
scrollbar-darkshadow-color: #;
}

Here we have information to insert into the body tag.
This should all be normal and the # should either be the same or replaced whith a color code. The one thing that is different is this:

Code:

Background-attachment: fixed;

I'm pretty sure you understand what that means, you can also change whether or not it repeats. So if you fix it and the background is bigger than everyones screen you might as well remove this:

Code:

background-repeat: repeat;

Now you have fixed the background to the screen using CSS.

moving things


*Classes and divisions
Often, you may wish to change something more specifically than just 'change all the buttons to red'. Classes and divisions are parts of HTML made so that CSS can privatly target them. There are a LOT of different ones on the forum so you would have to look at the source code (HTML code) for every single one to get it all right. But right now Im going to show you something simpler: how to make and use your own classes and divisions.

Classes are made like this:

Code:

<span class=12345>

You can replace 12345 with whatever you want but I will use it myself for now. Positioning does not work with mozzila firefox so make sur you put the actual code somewhere visable.

Code:

<div id=12345>

You can also put 'class=12345' into other tags but we will get there soon.

Absolute positioning
lets try this:

Code:

<span class=12345><font size=24>HI!</font></span>

Stick this somewhere, it doesn't matter where.
Now in your CSS file write:

Code:

.12345 {
background-color: white;
position: absolute;
top: 2px;
left: 2px;
}

Now go to your page, look in the upper left corner....

Lets take a look at that code. 'Background-color' is easy to understand but lets take a look at 'position: absolute'
position: absolute means that the coordinates we are giving it are from the edges of the HTML page. So its 2 pixels from the top and 2 pixels from the left. We could also say:

Code:

...
bottom: 2px;
right: 2px;
...

This wouldent be any different, it would be 2 pixels from the bottom and 2 pixels from the right. It would NOT be off the edge of the screen.

Relative positioning
You might want to skip this its not so important...
There is another type of positioning, thats 'relative'.
If we said eg.

Code:

.12345 {
background-color: white;
position: relative;
top: 200px;
left: 200px;
}

... and in the HTML file we had a lot of text surrounding it we would have:

A bunch of text. Picture in the middle of the text. text continues.
blanck space where the picture would have been if we didn't move it. more text.

A hole appears where we put the picture but the picture itsself was moved somewhere else.

Line in the nav bar
One other thing I would like to add, in you forum header make a personal button, make the name

Code:

</a><hr>

The picture should be https://2img.net/i/fa/empty.gif
Now place it so that its between certain nav buttons, you have just devided your navbar.


Heres generally the idea (I know its too long but if they're going to work with CSS they might as well learn it)