Background image on menu bar does not show up
Posted: 07 May 2009 12:37 PM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2009-05-07

Hi all,
I am very new to all this so please forgive me for my poor terminology.
I have downloaded a template from the Joomla website and I am trying to place and get an image (images\menu_man_orange.gif) to show up in the menu next to the menu word (ie home, about us etc). I have placed it in the css stylesheet under .moduletable_menu a
but this doesn’t seem to work. i cannot figure out what i am doing wrong. any help would be greatly appreciated!
here is the coding in the css

/* ##################### OVERALL SETTINGS ##################### QM: ok */
html {
  height       : 100%;
}

body {
  height       : 100%;
  background     : #0053a0;
  margin       : 0px;
  padding       : 0px;
  text-align     : center;
}

td, tr, p, div {
  font-family     : Arial, Helvetica, sans-serif;
  font-size     : 12px;
  line-height     : 15px;
  color         : #0053a0;
  text-align     : justify;
}

 


/* ############## MAIN TABLE CONTAINER SETTINGS ############### QM: ok */
.desitable {
  height       : 100%;
}
.maintable {
  width         : 728px;
  background     : #ffffff;
  padding       : 0px;
  border       : 5px solid #ffffff;
}
.headercontainer {

  height       : 100px;
  border       : 0px solid #ffffff;
}
.contentcontainer {
  vertical-align   : top;
  border-left     : 0px solid #ffffff;
 
}
.contentleft {
  width         : 157px;
  background     : #cdddec;
  vertical-align   : top;

}
.contentmain {

  vertical-align   : top;
  padding       : 0px;
  border-left     : 5px solid #ffffff;
  border-right   : 5px solid #ffffff;
}
.breadcrumbcontainer {
  height       : 0px;

  margin-bottom   : 0px;
}
.copyright_container {
  float         : left;
  padding       : 5px;
  width         : 500px;
}
.syndicate_container {
  float         : right;
  text-align     : right;
  padding       : 5px;
  width         : 200px;
}
.topnbottommodule_container {
  background     : #a09080;
  padding       : 5px;
  margin-bottom   : 15px;
}

/* ########################### LINKS ########################## QM: ok */
a:link, a:visited {
  text-decoration : none;
  color         : #0053a0;
  text-decoration: underline;
}
a:hover {
  color         : #ef492e;
}
a.category:link, a.category:visited {
  font-weight     : bold;
}
.readon {
  font-weight     : bold;
}
.content_bottom a {
  text-decoration : none;
  border-bottom   : 1px dotted #444444;
  color         : #444444;
}
.content_bottom a:hover {
  text-decoration : none;
  border-bottom   : 1px dotted #336600;
  color         : #336600;
}

/* ################# MAIN AND SUB MENU SYSTEM ################# QM: ok */
/* ## menu text## QM: ok */
.moduletable_menu ul {
  margin       : 0px;
  padding       : 0px;
  list-style-type : none;
  font-family: Arial, Helvetica, sans-serif;
  font-size:0.8em;
  text-align     : right;
  width         : 127px !important;
  width         : 157px;
}

/* ## menu block## QM: ok */
.moduletable_menu a {
  display       : block;
  padding       : 3px 30px 3px 10px;
  width         : 117px !important;
  width         : 127px;
  background-color : #cdddec;
  border-bottom   : 3px solid #ffffff;
  text-decoration : none;
  background-image: url(‘images\menu_man_orange.gif’);
}

/* ## menu link## QM: ok */
.moduletable_menu a:link,  .moduletable_menu a:visited {
  color         : #0053a0;
  text-decoration : none;
}

.moduletable_menu a:hover {
  color         : #ffffff;
  background-color : #0053a0;

}

.moduletable_menu ul li ul {
  margin       : 0px;
  padding       : 0px;
  list-style-type : none;
  font-family     : Arial, Helvetica, sans-serif;
  font-size     : 11px;
  width         : 137px !important;
  width         : 157px;
}

.moduletable_menu ul li ul li a {
  display       : block;
  padding       : 0px 0px 0px 20px;
  width         : 147px !important;
  width         : 157px;
  background-color : #53504d;
}

.moduletable_menu ul li ul li a:link, .moduletable_menu ul li ul li a:visited {
  color         : #fff;
  text-decoration : none;
}

.moduletable_menu ul li ul li a:hover {
  color         : #ffffff;
  background-color : #333333;

}

/* ##################### MODULE SETTINGS - main menu###################### QM: ok */
.moduletable_menu h3, .moduletable h3 {
  background     : #cdddec;
  color         : #0053a0;
  display       : block;
  height       : 0px;
  line-height     : 20px;
  font-family     : Arial, Helvetica, sans-serif;
  font-size     : 0px;
  letter-spacing   : 1px;
  margin       : 0px;
  padding       : 3px 10px;
  text-transform   : uppercase;
}

.moduletable table td {
  padding       : 5px;
}

/* ################# SECTION LISTING SETTINGS ################# QM: ok */
.sectiontableheader {
  font-size     : 11px;
  font-weight     : bold;
  text-align     : center;
  color         : #c8c3be;
  background     : #000000;
  vertical-align   : middle;
  height       : 20px;
  border-right   : 1px solid #c8c3be;
  padding       : 0px 10px;
}
.sectiontableentry1 {
  background     : #e0e0e0;
  padding       : 3px 5px;
}
.sectiontableentry2 {
  background     : #f0f0f0;
  padding       : 3px 5px;
}

/* ##################### PAGE NAVIGATION ###################### QM: ok */
.pagenavbar div {
  float         : right;
  font-size     : 10px;
  line-height     : 20px;
  margin-right   : 10px;
}
.pagenav {
  border       : 1px solid #999999;
  float         : left;
  font-size     : 10px;
  line-height     : 20px;
  margin       : 1px;
  padding       : 0px 10px;
  text-align     : center;
  width         : auto;
}
.contenttoc {
  width         : 150px;
  background-c

Profile
 
 
Posted: 11 May 2009 02:48 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  1
Joined  2009-05-11

What I do when I want to change something in a CMS (I did wordpress not Joomla), is change one thing at a time; if you give a big chunk of code like that, ok; but why dont you tell us want modification you made?

Profile
 
 
Posted: 11 May 2009 07:47 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  1
Joined  2009-05-11

visit now http://redlight100.blogspot.com

Profile
 
 
Posted: 12 May 2009 08:25 AM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  1
Joined  2009-05-12

It looks to me like you are using a “\” when you should be using a “/”
Change: background-image: url(’images\menu_man_orange.gif’);
to: background-image: url(../images/menu_man_orange.gif);

Just make sure you have the path to menu_man_orange.gif correct

Profile