All of these layouts have been tested on Firefox, Internet Explorer and Google Chrome. If you find anything wrong with the codes please don't hesitate to contact us about the matter and we'll be glad to resolve the problem!
Labels: css, games, others, pet page, site layout
posted by Del @ 5:49 AM
0 Comments
As you probably know...divisions can have classes and id's. But what are classes and id's?
We classify our divisions into classes and/or id's if we want a certain attribute to be applied only on a specific part of the page. For example, if you want your menus to have a completely different link color from the rest of the page. Or if you want your headers to be of different font.
Q. But when do we use classes? And, when do we use id's?
A. We use classes when we have more than one element/attribute to be used in the same class. And we use id when we give a unique attribute to a single tag! Id's are usually used once per document as for classes, you can use them multiple times in your document!
Classes
For example I want the first row on my table to have this attributes:.tr1{font-family:tahoma; font-size:10; font-weight:bold; text-align:center; background-color:black; color:#ffffff;border-bottom: double #ffffff;}
Now, I want my second row to have the following attributes:
Now the code for the second row would be:
.tr2 {font-family:comic sans ms; background-color:lightblue; text-align:left; color:red; border:1px solid #000000; padding:3px;}
My third row will be a lot simpler. I just want to have:
The code will look like this for our third row:
.tr3 {text-align:right; font-family: arial; color: blue; background-color: yellow;}
Now let's see how our table looks like when we put all the attributes together!
THIS IS THE FIRST ROW |
THIS IS THE SECOND ROW |
THIS IS THE THIRD ROW |
ID's
Let's continue with our table....I want all links on the table to be in color red and purple when hovered! Let's name the id navcontainer!
The code will be:
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer li { margin: 0; }
#navcontainer a
{
color: red;
background-color: none;
text-decoration: none;
}
#navcontainer a:hover
{
background-color:none;
color: purple;
}
The code we need to add would be:
<div id="navcontainer">
(put your table code here! including links!)
</div>
So now our table will have to be like so if we placed the codes just before everything!
Notice how the links in the divisions are different from this LINK which is outside of the divisions!
Better Understanding
To better understand the difference of Classes and IDs, study the code of the table above:
Notice how often we used classes. We used it 3 times to apply our preferences. The ID on the other hand, can only be found at the beginning and end of the entire code. IDs are therefore used to set an attribute to the entire document while classes are used to set attributes to the different parts of the document!
Labels: basic, classes and ids, css, tutorial
posted by Del @ 6:43 AM
0 Comments
Scrollbars
This code will help you change the color of your scrollbars to fit your weblayout. However, this can only be seen on IE and not on Mozilla! If you need ready coded scrollbars you can use the following below!This is the code you need to place:
The code above will show a scrollbar similar to this:
To know which part is ... I placed unusual colors on the attributes which you can edit later!
scrollbar-face-color:red;
scrollbar-arrow-color:blue;
scrollbar-track-color:purple;
scrollbar-shadow-color:black;
scrollbar-highlight-color:yellow;
scrollbar-3dlight-color:green;
scrollbar-darkshadow-color:white;
Left Scrollbars by Alex
This is easy if you can code a normal scrollbar. All you need to do in this that you dont have in the other is put {direction:rtl; infront of ur scrollbar code
<style type="text/css">
body {
direction:rtl;
scrollbar-3dlight-color: COLOR/CODE;
scrollbar-arrow-color: COLOR/CODE;
scrollbar-base-color: COLOR/CODE;
scrollbar-darkshadow-color: COLOR/CODE;
scrollbar-face-color: COLOR/CODE;
scrollbar-highlight-color: COLOR/CODE;
scrollbar-shadow-color: COLOR/CODE;
scrollbar-track-color: COLOR/CODE;
}
</style>
Here are some scrollbar codes you can use. A link back is not necessary but will be greatly appreciated!
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Links
This is the code that will make you change your link colors!
In the code above we have a: link; a: visited; a: hover.
a:link - all attributes contained inside it's bracket shall be the "normal" look of a link in your page;
a:visited - all attributes contained inside it's bracket shall be the look of a link that has been clicked or visited;
a:hover - all attributes contained inside it's bracket shall be the look of a link when you hover your mouse on it.
Link Attributes
There are other ways you can make your links look better like adding the following:
Just try playing around with your codes to discover more!
Fonts
Sure you can use basic html for fonts but the beauty of using css is that you place a fixed font attribute for the whole page so you wouldn't have to write <font color=#000000> all the time! Plus you are able to do more with fonts with css.
Place this code inside your <style type="css/text"> tag:
posted by Del @ 6:38 AM
0 Comments
