Mahzian 0 Report post Posted April 18, 2005 Ive found this code very usefull when it comes to clients who cant afford Flash (and I hate JavaScript rollovers as they only work half the time and when you hold the mouse over the button for 5 seconds) When your done here you should be able to create a menu that looks like the following: click here to see what it looks like Step 1: setting up the framework Get the framework in there for the script to work , I generally link to my stylesheets externally so I will show you how. Now open a simple text editor such as Notepad. set up your page with the following basic html <html><head></head><body></body></html> Now save the file somewhere as a html file , for example test.html Step 2: linking the stylesheet Now the following string must be put in between the <head> and </head> tags <LINK href="rollovers.css" type="text/css" rel="stylesheet"> Now remember the section after the href , because this name (rollovers.css) is what your external stylesheet will be named. (You can call it whatever you want but remember to save the file later to that name.) Step 3: creating the stylesheet Now you have the html file pointing to a stylesheet but it doesnt exist , we need to create it. This is simply done by (for example in notepad) going to File>New and then saving the file as rollovers.css (remember if you changed this name in step 2 change it here also) Save this file in the same directory as the html file Step 4: creating the table Now we need to create a table in that html file we had before , so if your still on the css file , close it and open test.html or whatever you named it. Between the <body> and </body> tags type the following: <table width="20%" cellpadding="0" cellspacing="0" border="0" summary=""><tr><td width="100%" id="LHS"></td></tr></table> What you have done is created a table with 1 cell which is 20% the width of the page and has a css id of LHS Step 5: creating the links Now this will vary on how many links you need/want but in this example we need 5 links. This is simply done by inserting links into the td cell of the table. For example: <table width="20%" cellpadding="0" cellspacing="0" border="0" summary=""><tr><td width="100%" id="LHS"><a href="hello.html">hello</a><a href="this_is.html">this is</a><a href="a_rollover.html">a rollover</a><a href="menu_made.html">menu , made</a><a href="with_css.html">with css</a></td></tr></table> Each link is part of the same ID so each will look the same. Step 6: creating the css This can be abit confusing if you are not used to dealing with css but I will try and go through it as simple as I can. Its time to close the html file and open the css file again. This should be blank with no text yet on it whatsoever. Now in my example I applied a style to the <body> tag of my html file which makes the background black , I did this with the following code: body { background-color: #000000; } Its up to you if you want to put this in and what color you want. Now we have to create normal CSS links (like text links). This is done with the following code: a:link, a:active { [tab][/tab]/*color: #92A92D;*/[tab][/tab]/*color: #002A6C;*/[tab][/tab]font-family: Verdana, Arial, Helvetica, sans-serif;[tab][/tab]font-size: 11px;[tab][/tab]color: #C41427;[tab][/tab]text-decoration: none;}a:visited {[tab][/tab]/*color: #92A92D;*/[tab][/tab]/*color: #002A6C;*/[tab][/tab]font-family: Verdana, Arial, Helvetica, sans-serif;[tab][/tab]font-size: 11px;[tab][/tab]color: #C41427;[tab][/tab]text-decoration: none;}a:hover {[tab][/tab]/*color: #CD689D;*/[tab][/tab]color: #C41427;[tab][/tab]/*font-weight: bold;*/[tab][/tab]text-decoration: underline;[tab][/tab]font-family: Verdana, Arial, Helvetica, sans-serif;[tab][/tab]font-size: 11px;} Now the options in that code should be pretty obvious , you can change the fonts/colors etc to what you want. These styles are for the text that will be inside the boxes. Please Note: remember to keep the visited tag above the hover tag or the hover tag wont work Step 7: creating the ID links Keep that CSS file open because we arnt done with it yet. Now what we need to do is create some ID's so we can asign different colors etc to the links. This is what the ID was for in the table we created before. Put the following code into your CSS file: #LHS a {[tab][/tab]margin-left: 12px;[tab][/tab]margin-bottom: 2px;[tab][/tab]border: solid 2px #C41427;[tab][/tab]background-color: #FFFFFF;[tab][/tab]color: #000000;[tab][/tab]font-variant: small-caps;[tab][/tab]font-weight: normal;[tab][/tab]width: 170px;[tab][/tab]padding: 5px;[tab][/tab]padding-top: 3px;[tab][/tab]padding-bottom: 3px;[tab][/tab]display: block;}#LHS a:hover {[tab][/tab]background-color: #C41427;[tab][/tab]color: #FFFFFF;[tab][/tab]text-decoration: none;} The # denotes that this style is an ID (which can be applied to our table). Using this method you can get more than one set of link styles onto a page , this is handy because sometimes your menu is a different color to your body etc. Now you can play around with all the options there , if you change padding and the width you can make it smaller/bigger as needed. Hover tag will retain whatever options are missing from the a tag and only change the options which are there (like background-color for example) Save the css file , and open the html file in your browser , and voila , you have a very bandwidth friendly menu. Try changing the colors around and some of the size options and switch between refreshing the browser and the text css file , but remember the changes wont take effect till the css file is saved! Let me know if you have any problems/issues! Share this post Link to post Share on other sites
