473,320 Members | 1,600 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

The best way to make a Css menu

I've got a question regarding making menu's in Css.

I've made a picture of the menu in photoshop, have made the mouseover effect in different frames, and made a quick pregenerated html/javascript menu with Imageready. (The menu with simple html tables, and the mouseover effect with javascript).

However, this is not the best way, Css can do more. I've done this before, but someone told me I'm not doing it right.

what I did is, make a Css box, give it a background image:

.menu_3
{
position:fixed;
margin-left:242px;
margin-top:175px;
width:199px;
height:42px;
background-image:url(menu_3_b.jpg);
}

afterwards, I've made a hover effect on menu_3, which has a different background picture, the one that should appear when being hovered on:

.menu_3:hover
{
position:fixed;
margin-left:242px;
margin-top:175px;
width:199px;
height:42px;
background-image:url(menu_3_c.jpg);
}

then, to make sure I can press on it, to make it a link I've made the following html code:

<div class="menu_3">
<a href="acties.html"><img src="knop.gif" alt="Knop" border="0" /></a>
</div>

where "knop.gif" is a completely transparant gif.

you can see the example here:
http://users.telenet.be/ravian/ai/index.html

the above menu are all seperately positioned images, where 4 of those images contain a hover effect.

thing is, this is quite a long job. if there is a better way, I'd really like to know about it, before I start positioning many seperate images again.
Mar 4 '07 #1
2 9333
drhowarddrfine
7,435 Expert 4TB
It is good you asked this question now because it can be made much simpler. For example, it looks like there is no need for the table at all, at first glance. Also, 'position:fixed' does not work in IE6 and some of the code is not valid xhtml or deprecated. In addition, slicing of images is not usually necessary.

I may regret saying this but I have some free time and I'll rewrite this for you and it looks easy enough.
Mar 4 '07 #2
drhowarddrfine
7,435 Expert 4TB
This is as much as I have time for. I didn't style the menu much but it's easy enough to do. On another post, here, I give two links for list menus for some excellent ideas on styling them.

The top of the page was more difficult to layout with the images. If the background to the text was transparent it would have been easier. This is not perfect but hope it gives you some help on how this could work better.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.  
  6. <title>Amnesty International - Brussel Vijfhoek</title>
  7. <meta http-equiv="Content-Type" content="text/html; utf-8" />
  8.  
  9. <link rel="stylesheet" href="index_files/ai.css" type="text/css" />
  10. </head>
  11.  
  12. <body dogear_traverse_next="0" dogear_next="1" dogear_coordinates="" dogear_list="">
  13. <div class="total">
  14.  
  15. <div class="menu">
  16.  
  17. <img src="index_files/menu_1.jpg" />
  18. <img src="index_files/menu_2.jpg" />
  19.  
  20. <ul>
  21.     <li>Acties</li>
  22.     <li>Info</li>
  23.     <li>Contact</li>
  24.     <li>Niews</li>
  25. </ul>
  26.  
  27. </div>
  28.  
  29.     <h3> Welkom op de website van Amnesty Vijfhoek </h3>
  30. <p>
  31. Wij zijn een lokale Amnesty groep gesitueerd in de vijfhoek van
  32. Brussel. Onze acties situeren zich hoofdzakelijk rond het schrijven van
  33. brieven, het verzamelen van handtekeningen, en eventueel het
  34. ondersteunen van grotere acties.
  35. </p>
  36.  
  37. <p> De website is
  38. verdeel in 4 hoofdcategorien. In de categorie acties kunt u de acties
  39. vinden waar we mee bezig zijn, en waar we mee bezig zijn geweest. de
  40. categorie contact vertelt u hoe u ons kan bereiken. Info vertelt iets
  41. over Amnesty en over ons. en als laatste hebben we de "wat kan jij
  42. doen" categorie die je vertelt wat je kan doen om ons te helpen.
  43. </p>
  44.  
  45.     <h3>kleine opmerking over de site.</h3>
  46. <p>ongeveer elk deel is ingevuld, tenminste, het bestaat. normaal ga je
  47. geen 404 (kan de gewenste pagina niet vindne) fouten meer krijgen. Voor
  48. de rest heb ik de website gevuld met bedenkingen die ik gemaakt heb,
  49. wat door wie moet ingevuld worden, en zelf een paar tijdelijke teksten
  50. geschreven, die natuurlijk veranderd kunnen worden.</p>
  51. <p>
  52.  
  53. de website stond in het begin inderdaad soms rechts, en ik hoop bij
  54. enkele toch in het midden. diegene die hem in het midden hebben, die
  55. gebruiken waarschijnlijk Opera, maar goed. het was dus niet de
  56. bedoeling dat de website uit het scherm viel, dus heb ik het geheel
  57. uitgelijnd naar links, dus nu zou de website niet meer buiten het beeld
  58. mogen vallen. Het zou er uit moeten zien als dit : <a href="http://users.telenet.be/ravian/ai/hoehetermoetuitzien.jpg"> <img src="index_files/hoehetermoetuitzien.jpg" id="thisimg" alt="" /></a>.
  59. als dit niet het geval is, mail mij dan. en geef aan welke browser je
  60. gebruikt, en welke versie. dit kan je vinden door naar &lt;help&gt; te
  61. gaan, daar ergens zou "about Opera" of "About Internet Explorer" of
  62. "About Mozilla Firefox" of een vertaling in je respectievelijke taal
  63. moeten staan. Verder staat daar het versie nummer van je browser.
  64. Normaal hebben de meest recente IE, Opera en mozilla versies geen
  65. problemen (daar heb ik mee getest), maar mogen er toch problemen zijn,
  66. mail me.</p>
  67.  
  68. <p> een laatste opmerking, er is dat grote meren dossies,
  69. dat door Kristel geschreven zal worden. Waar zet ik dat? ik heb niet
  70. het gevoel alsof dat 1 van onze acties is, maar het is ook geen
  71. informatie.
  72. </p>
  73.  
  74.     <p>
  75.     Groetjes,<br /> 
  76.     Sam <br /><br />
  77.     Ps: ik merk net dat mijn scrollbar dienst weigert, ik heb geen flauw idee hoe dit komt, ik zal kijken wat ik kan doen.
  78.     </p>
  79.  
  80. </div>
  81.  
  82. </body>
  83. </html>
The stylesheet:
Expand|Select|Wrap|Line Numbers
  1. body
  2. {
  3. background-color:#b9b0a3;
  4. margin:0;
  5. padding:0;
  6. }
  7.  
  8. .total{
  9.     background-image:url(back.jpg);
  10.     background-repeat:repeat;
  11.     width:44em;
  12.     margin:0 auto;
  13.     }
  14.  
  15. #thisimg{
  16.     height:66px;
  17.     width:50px;
  18.     }
  19.  
  20. .menu{
  21.     position:relative;
  22.     overflow:auto;
  23.     }
  24.  
  25. .menu img{
  26.     float:left;
  27.     }
  28.  
  29. .menu ul li{
  30.     display:inline;
  31.     text-decoration:none;
  32.     padding:2em;
  33.     font-weight:bold;
  34.     }
Mar 4 '07 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

24
by: delerious | last post by:
Hi, I am designing a web site that will that showcase a bunch of vacation pictures. It will have a banner and a navigation menu (consisting of 13 rectangular images that can be clicked). I am...
4
by: Dave Patton | last post by:
Using my About page as an example: http://members.shaw.ca/davepatton/about.html What is the best/proper way to markup a page such as this that has "the main body" and "a navigation menu"? It...
131
by: Peter Foti | last post by:
Simple question... which is better to use for defining font sizes and why? px and em seem to be the leading candidates. I know what the general answer is going to be, but I'm hoping to ultimately...
0
by: naijacoder naijacoder | last post by:
Here goes the scenario.. The intranet is using windows Auth integrated wih Active Directory. Which is fine and all the appropriate Roles/Groups are set. When a user clicks on a button on a page...
6
by: Sandy | last post by:
Hello - I have a book that illustrates pulling menu items from a Sql Server table into an ascx via a stored procedure. Is this something that is done in the real world? I do like the effect...
2
by: kbutterly | last post by:
All, I have a menu which contains Category as the master and Product as the child. When I click on a Category in the menu, I want one formView control, fvpc, to show, and then when I click on...
3
by: ashishkalosia | last post by:
IS JS Menu is the best way to creating Navigation Menu?? If yes let me know, If no than wht is the best way for creating Navigation Menu??
2
by: R.A.F. | last post by:
Hi, I would like to have your advice regarding a simple SDI application. i have 3 forms : FMain, FMainHW and FMainSW. when my application run FMain display the main menu and interface of the...
2
by: JohnH | last post by:
My Customers/Sales/Contacts management database interface is modeled as if Customers are objects, Sales are objects owned by Customer objects, etc. (I'm running Access 11) I have Listviews...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.