By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,494 Members | 1,957 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,494 IT Pros & Developers. It's quick & easy.

The best way to make a Css menu

P: 5
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
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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
Expert 5K+
P: 7,435
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

Post your reply

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