CSS Menu
The last bunch of sections set the rules for the menu bar. Let's look first look at the code:
This bit of code is finely tuned to place the two images we worked with in the Menu section of this course in the right place at the right time. There is really not much to adjust without messing up the menu. However, let's look at the rules we can adjust. Most of these are located in the "#topmenu" portion of this code.
| #topmenu{ float: left; width: 100%; font-size: 70%; line-height: normal; border-bottom: 1px solid #000000; } |
The first rule "float: left;" says that you want the tabs of the menu to be on the left side of the menu section. If you want to put them on the right, change the word "left" to "right".
The second rule "width: 100%;"says to use 100% of the area for the menu. If you want the area smaller, you can decrease this number, but that may cause problems later on.
The next rule "font-size: 70%;" defines the size of the tabs. If you want each tab of the menu to be larger, make the number larger. If you want each tab of the menu to be smaller, make the number smaller. We are using percentages so that people who have visual challenges can increase the font size in their web browser will still be able to view the menu.
The "line-height: normal;" is pretty standard and should be left alone to keep the spacing look right.
The last line in this section "border-bottom: 1px solid #000000;" draws the line below the menu tabs and give the menu that finished look. This line is 1 pixel tall. If you want the border to be thicker you can change number one to a larger number. The border is to be displayed as a solid line. If you want to change this to another type of line, use the drop-down menu on the right to change it to another one. The rules also makes the color of the line black (#000000). Using your Pre-Planning Template, change this number to the number in the "Border" section of the colors.
The next section that you can play with defines the fonts in the tabs. The first one is the "#topmenu a span " section.
| #topmenu a span { float: left; display: block; background: url(images/tab-right.gif) no-repeat right top; padding: 3px 14px 3px 5px; font-weight: bold; color: #000000; } |
In the "color: #000000;" rule, change the color to the HTML color code you want the font to be on the menu tab when the visitor's mouse is not over the tab.
The next section that can be changed is the "#topmenu a:hover span " section.
| #topmenu a:hover span { color: #000000; } |
By changing the "color: #000000" rule to a different color, you change how the font looks when the visitor's mouse is over the top of a tab on the menu.
The next section "#topmenu #current a span " should only be changed if you changed the "#topmenu a span".
| #topmenu #current a span { background-position: 100% -125px; color: #000000; } |
The color rule in this section should be the same color as the "#topmenu a span " section.
It is a good idea to place any additional sections you wish to add above the menu items to prevent problems.
Save all the changes you have made and upload it to your web server to see you work.
