CSS Corners
To make the corners of the side menu look as if they are rounded instead of square, the next four sections place the corner images we worked with in the Side Left portion of this course. Let's look at the first section called ".cornerll".
| .cornerll { background: url(images/cornerll.gif) 0 100% no-repeat; } |
This section puts the lower left corner of the side menu in place. It says to draw a background image in the "images" folder called "cornerll.gif". Then it says to put the image at point 0 on the x-axis and at 100% on the y-axis. Then it tells the computer to draw the image only once and not to repeat it with the "no-repeat" rule.
The next section is the ".cornerlr".
| .cornerlr { background: url(images/cornerlr.gif) 100% 100% no-repeat; } |
This section puts the lower right corner of the side menu in place. It says to draw a background image in the "images" folder called "cornerlr.gif". Then it says to put the image at 100% of the x-axis and at 100% of the y-axis. Then it tells the computer to draw the image only once and not to repeat it with the "no-repeat" rule.
The third section is the ".cornerul".
| .cornerul { background: url(images/cornerul.gif) 0 0 no-repeat; } |
This section puts the upper left corner of the side menu in place. It says to draw a background image in the "images" folder called "cornerul.gif". Then it says to put the image at point 0 of the x-axis and at point 0 of the y-axis. Then it tells the computer to draw the image only once and not to repeat it with the "no-repeat" rule.
The last section of the corners is the ".cornerur".
| .cornerur { background: url(images/cornerur.gif) 100% 0 no-repeat; } |
This section puts the upper right corner of the side menu in place. It says to draw a background image in the "images" folder called "cornerur.gif". Then it says to put the image at 100% of the x-axis and at point0 of the y-axis. Then it tells the computer to draw the image only once and not to repeat it with the "no-repeat" rule.
When you look in the code of the "sideleft.inc.php" you may notice that the side menu classes are called on before the corners are called. This is to allow the side menu to be drawn first, and then the corners to be drawn over the top of the side menu box.
If you want to make changes, it is actually easier to do so with the images themselves. The code just puts these images in place. There is really nothing to change in these sections.
