Jump to content
xisto Community
Sign in to follow this  
Followers 0
Mahzian

Creating A Css Rollover Menu (with Table Cells) for those bandwidthed challenged

By Mahzian, in Websites and Web Designing

Recommended Posts

Mahzian    0

Mahzian
Posted

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! :rolleyes:

Share this post

Link to post
Share on other sites

m3ch4    0

m3ch4
Posted

Newb question here, please don't kill me =Swhen you refer to css links you mention this within the code section...*font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;*just curious, but what exactely does font-family refer to? what other options are available and what is the font is used in the final display?also, for font-size, how does that relate to the font sizes that are regularly used in html code? is the pixel reference simply something that is left out in the html or does this font-size use a different scale/size then regular html code?

Share this post

Link to post
Share on other sites

chiiyo    0

chiiyo
Posted

Okay, by font-family, that is basically listing down the font of your text, whatever text that is being listed. As for options, you can put in any font you like, only that you must know if you put a font that is not common, many people will be seeing your site in a font you didn't design for. Previously, in html, you could only specify one font, so if the end-user didn't have that font, he would be stuck seeing your website in his computer's default font, which more often than not is Times New Roman (yuck). So CSS counteracts that, creates a situation where your website degrades gracefully, by allowing you to list other fonts. In this case, you're telling the end-user's computer to display the text first and foremost in Verdana, but if the computer doesn't have Verdana, to display the text in Arial, and if the computer doesn't have Arial, to display it in Helvetica (which is, by the way, a gorgeous font), and if the computer doesn't have any of those three, in any sans-serif font. This way you cover all bases. So yes, the first font is the top-priority font.

About font-size, the ones used in html code are different from the one you define in font-size. The numbers in html point to a particular size, set in html, and I'm actually not too sure what that size is, but there are usually only 6 numbers? 1 to 6? (haven't used the font tag for so long...) What happens in CSS is that you can fine-tune that size of your font. Instead of relying on arbitrary values, you can define the font in pixels (px), ems, points(pt) and other measurements.

BTW, the font tag is deprecated as of XHTML 1.0 Strict, so you should use CSS to do your font-styling. Read more about it at HTMLDog.

Hope this helps!

Share this post

Link to post
Share on other sites

m3ch4    0

m3ch4
Posted

*glances at clock and decides to turn in for the night**bookmarks http://www.htmldog.com/ (hi5 Chiiyo, thanks!)*one more quick question, from the looks of the css code I'm curious as to how complex it gets and what kind of stuff it can do.for example, I want to create a table...________________| cell1 | cell2 | cell3 |-----------------------| cell 4 ...................|-----------------------...like so, where cell 1,2,3 will be selectable (say, clicked/unclicked) and the selections there will change the output in cell 4.can something like that be programmed in css? I'm curious because css looks super light weight, and if it's possible to do something like that through css as opposed to javascript I'd be really interested. Witht this amount, or more, of complexity like this will css remain lightweight and be preferable to javascript?...or if looking for an alternate to javascript seems ridiculus and css isn't as lightweight as it appears from this tuturial please feel free to poke me a sharp stick.

Share this post

Link to post
Share on other sites

chiiyo    0

chiiyo
Posted

Hmm. You can use CSS for the basic layout of that table (because technically using tables to layout non-tabular data violates the whole separation of content and presentation idea).One way to do the whole click 1 or 2 or 3 and 4 will change, the easy but less advanced way, would be to make three html pages, where clicking 1 would lead to page 1, where your 1 would be "selected" and your 4 will reflect the content required, and then creating similar pages for 2 and 3.Another way to do it, would probably involve either javascript or PHP. The javascript method I'm not too sure, not a big fan of javascript, but basically you have to program the links in 1,2, and 3 to be able to affect the behaviour in 4. (Not too sure what I'm saying.... anyone want to clarify this?)And the third method, by using PHP includes, whereby you program the links in 1, 2 and 3 to trigger another page to be included using PHP into 4. That way you have one page. Kinda works like a frame.Ah, and of course, you could use frames. But wouldn't recommend it.I would probably recommend a combination of the CSS and PHP method, it's probably the most lightweight method around...Don't mention it! Glad to help!

Share this post

Link to post
Share on other sites

m3ch4    0

m3ch4
Posted

Ah, and of course, you could use frames. But wouldn't recommend it.

 

I would probably recommend a combination of the CSS and PHP method, it's probably the most lightweight method around...

 

Don't mention it! Glad to help!

<{POST_SNAPBACK}>


Yeah, frames I'm gonna leave alone right now...might end up going back to it, but I hope not =S

 

The reason I'm curious about css is that I plan to have a table like that on my site, and a friend of mine was going to program in in javascript for me. He's picking up as many programming languages as he can and said he'd be interested in any type of projects that I could give like this so he could have some non-generic stuff to program to help keep his interested. The thing is he does't know for sure whether he's going to pick up js, that being my concern and my source of questions =/

 

thanks again for your advice! much appreciated =)

Share this post

Link to post
Share on other sites

johnny1405241497    0

johnny1405241497
Posted

Very nice tutorial man! I'll give ya some reputation, I made some similar menu on My Webpage but anyway this is a good start point for anyone who want's to make a page with fast loading menus...

<{POST_SNAPBACK}>

I like your menu its pretty good it's just a little different from the one he was showing us up there in the tutorial. I mean, if it was me i thnk i would do it in flash but doing it in scripting would be good too

Share this post

Link to post
Share on other sites

vujsa    0

vujsa
Posted

Nice tutorial.

 

I wanted to mention that you can use images for the menu item backgrounds as well.

Create an image that is twice the height of the menu item.

Design the top half of the image as the default background of the menu item.

Design the bottom half of the image to be the background of the menu item during rollover.

Now for you CSS link attribute, set the background image to the new image.

In the CSS for the hover (rollover) set it to the new image but specify the position to show only the bottom half of the image.

This is the technique used for the menus on the default Mambo template (SolarFlareII).

 

Hope this helps. :(

 

vujsa

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept