Page 1 of 1
Sub menu images [Solved]
Posted: Thu May 31, 2012 12:44 pm
by 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!
Re: Sub menu images
Posted: Thu May 31, 2012 4:57 pm
by 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.
Re: Sub menu images
Posted: Thu May 31, 2012 6:02 pm
by 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...
Re: Sub menu images
Posted: Fri Jun 01, 2012 12:18 am
by 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
Re: Sub menu images
Posted: Fri Jun 01, 2012 2:42 am
by 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;
}
Re: Sub menu images
Posted: Fri Jun 01, 2012 3:54 am
by 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!
Re: Sub menu images
Posted: Fri Jun 01, 2012 6:20 am
by 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!
Re: Sub menu images
Posted: Fri Jun 01, 2012 6:41 pm
by Dr.CSS