Sub menu images [Solved]

[SimonJ]

Hi, I have been combining several theme ideas into one template.

I have got the basics working but I cannot get the sub menu to drop the background images.

The main site is here : http://www.tux.id.au

but the page with the non-working sub menus is here http://www.tux.id.au/index.php?page=news

The extra code for the sub menu is :

Code: Select all

/********* MENU *********/


ul#nav li {
	float: left;
	margin: 0px;
	padding-left: 10px;
 background-image: none;
}




ul#nav li ul {
/*	background: #fff;*/
	margin: 0 0 0 -1px;
	padding: 0px;
	position: absolute;
	width: auto;
	height: auto;
	display: none;
	position: absolute;
 background-image: none;
}
ul#nav li li {
	float: none;
	margin: 0px;
	padding: 0px;
 background-image: none;
}
ul#nav li:hover ul ul, ul#nav li.cssHover ul ul {
	display: none;
 background-image: none;
}
ul#nav li:hover ul, ul#nav li.cssHover ul {
	display: block;
 background-image: none;
}

As you can see I have been down the background-image : none; route but it still sits there. I am hoping it is something simple but I am almost ready to give up on the sub menus!

[andriesinfoserv]

it's not clear to me exactly what page element (div, table, etc.) you are refering to that has the background images you don't want. are you using inspect element in your browser to troubleshoot? you can zero in on whatever element it is and it will show you where the image is being referenced in the css or html and you can fix it.

[Dr.CSS]

The first style sheet attached to that template has the image calls in the #tab parts, you will have to make your changes there...

[SimonJ]

Hi thanks,

I have found the menu manager is also not doing it, and I am not sure I can sort that out. It seems I need to know the top level separately from all the others and I am going to have to learn that in some depth to work all that out.

I can have no tab backgrounds, although the colours are still wrong but I can't seem to get the top tabs and bottom boxes ... yet.

I need Menu Manager to specify the top level and then the children as different css types. I have looked through the included ones and none seem to do this. Trouble is my wife likes the tabs but I think people will miss the sub menus.

Thanks for the pointers though

[Dr.CSS]

The style sheet you are trying to use is overwritten by the original CSS...

#tabs ul li a {
display: block;
position: relative;
padding: 10px 20px;
border: 0;
background: url(/uploads/CrystalX1024_Blue/tab_link.gif) 0 0 repeat-x;
color: #CBD5FB;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
/* Main menu (tabs - link) */
#tabs ul li a span.tab-l,
#tabs ul li a:hover span.tab-l {
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 8px;
background: url(/uploads/CrystalX1024_Blue/tab_link_l.gif) 0 0 no-repeat;
}
#tabs ul li a span.tab-r,
#tabs ul li a:hover span.tab-r {
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 8px;
background: url(/uploads/CrystalX1024_Blue/tab_link_r.gif) 100% 0 no-repeat;
}

You would need something like so...

#tabs ul li li a {
background: none;
}
/* Main menu (tabs - link) */
#tabs ul li li a span.tab-l,
#tabs ul li li a:hover span.tab-l {
background: none;
}
#tabs ul li li a span.tab-r,
#tabs ul li li a:hover span.tab-r {
background: none;
}

[SimonJ]

Wow, you are good. I ended up with

Code: Select all

/********* MENU *********/

ul#nav li ul {
	margin: 0 0 0 -1px;
	padding: 0px;
	position: absolute;
	width: auto;
	height: auto;
	display: none;
	position: absolute;
}
ul#nav li li {
	float: none;
	margin: 0px;
	padding: 0px;
}

ul#nav li:hover ul, ul#nav li.cssHover ul {
	display: block;
}

/* Main menu (tabs - link) */
#tabs ul li li a:link span.tab-l,
#tabs ul li li a:hover span.tab-l {
background: none;
}
#tabs ul li li a:link span.tab-r,
#tabs ul li li a:hover span.tab-r {
background: none;
}

Now I just need to get the menu to not change colour when the sub menu is the active page, but that is so much better.

Thank you!

[SimonJ]

I know it's probably not good to reply again but I have learned so much. I didn't know you could style the exact element you were working on. I have done a few sites with basic css but this is a whole new level.

So the finished code is :

Code: Select all

/* CSS Document */

/* Main menu (tabs) */
#tabs {background:#000000; margin:0 5px; padding:10px 0 0 0;}

    #tabs ul {margin:0 10px; padding:0; list-style:none;}
    #tabs ul li {margin:0 5px 0 0; padding:0; float:left;}
    #tabs ul li a {display:block; position:relative; padding:10px 20px; border:0; background:url(/uploads/CrystalX1024_Blue/tab_link.gif) 0 0 repeat-x; color:#CBD5FB; font-weight:bold; text-decoration:none; cursor:pointer;}
    
    /* Main menu (tabs - link) */
    #tabs ul li a span.tab-l, #tabs ul li a:hover span.tab-l {position:absolute; top:0; left:0;  width:8px; height:8px; background:url(/uploads/CrystalX1024_Blue/tab_link_l.gif) 0 0 no-repeat;}
    #tabs ul li a span.tab-r, #tabs ul li a:hover span.tab-r {position:absolute; top:0; right:0; width:8px; height:8px; background:url(/uploads/CrystalX1024_Blue/tab_link_r.gif) 100% 0 no-repeat;}
    
    /* Main menu (tabs - hover) */
#tabs ul li a:hover {background:url(/uploads/CrystalX1024_Blue/tab_hover.gif) 0 0 repeat-x; color:#f1f1f2;}
#tabs ul li a:hover span.tab-l {background:url(/uploads/CrystalX1024_Blue/tab_hover_l.gif) 0 0 no-repeat;}
#tabs ul li a:hover span.tab-r {background:url(/uploads/CrystalX1024_Blue/tab_hover_r.gif) 100% 0 no-repeat;}
    
    /* Main menu (tabs - active) */
    #tabs ul li.active a {background:#fff; color:#192666;}
    #tabs ul li.menuactive menuparent a {background:#eeeeee; color:#eeeeee;}
#tabs ul li.active a span.tab-l {position:absolute; top:0; left:0; width:8px; height:8px; background:url(/uploads/CrystalX1024_Blue/tab_active_l.gif) 0 0 no-repeat;}
#tabs ul li.active a span.tab-r {position:absolute; top:0; right:0; width:8px; height:8px; background:url(/uploads/CrystalX1024_Blue/tab_active_r.gif) 100% 0 no-repeat;}

 
/* Hidden */
.hiddenPic {display: none;}

.clear {clear: both;}
/********* MENU *********/

ul#nav li ul {
	margin: 0 0 0 -1px;
	padding: 0px;
	position: absolute;
	width: auto;
	height: auto;
	display: none;
	position: absolute;
}
ul#nav li li {
	float: none;
	margin: 0px;
	padding: 0px;
}

ul#nav li:hover ul, ul#nav li.cssHover ul {
	display: block;
}

/* Main menu (tabs - link) */
#tabs ul li li a:link span.tab-l,
#tabs ul li li a:hover span.tab-l {
background-image: none;
}
#tabs ul li li a:link span.tab-r,
#tabs ul li li a:hover span.tab-r {
background-image: none;
}
#tabs ul li.menuparent li a 
{
background-image: none;
background:#fff; color:#192666;
border: 1px #192666 solid;
}
#tabs ul li.active.menuparent li a:hover,
#tabs ul li.menuparent li a:hover 
{
background:#CBD5FB; color:#192666;
}

I may fiddle some more but that is what I had in mind when I started out. So thank you again. I can't say that enough, thank you!

[Dr.CSS]

Glad you figured it out...

http://forum.cmsmadesimple.org/viewtopi ... =20&t=8694