I'm working on the chrome css menu script at http://www.atgt.dramatic-design.com/index2.shtml and I'd like to get rid of the trailing divider image after "Contact".
I'm not sure how to do that. Can you assist?
Printable View
I'm working on the chrome css menu script at http://www.atgt.dramatic-design.com/index2.shtml and I'd like to get rid of the trailing divider image after "Contact".
I'm not sure how to do that. Can you assist?
Please link to the script in question.
Seems like you just need to figure out how to make the size of the table smaller (i'm assuming this uses a table)... but no clue without seeing the script. I'm no JS expert, so I dunno if I can help.... we'll see.
Get rid of this:
from chromestyle.cssCode:#chromemenu ul li a[onMouseover]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}
John,
That didn't work. In fact, it didn't change it at all.
I'm also trying to figure out how to center the menu items within the complete menu bar.
The script in question is: http://www.dynamicdrive.com/dynamici...rome/index.htm
It is within a table and I know how to resize the total size of the menu bar. I'm keeping it a % based bar because I want it to look good in all resolution sizes; however I'd like to center the items within the bar (not individual items--those are fine, but rather, all the items as a group).
Actually, it did change it but not in IE. But, I had misunderstood your question, so that didn't address your concern anyway. This menu is very tricky and may not be able to be centered in the fashion you describe, although it might, I'd try adding a dummy (empty) item at the left side and setting its width with style.Quote:
Originally Posted by dramaqueen
Some body else was asking similar things not long ago read throught these posts they will no doubt help you
http://www.dynamicdrive.com/forums/s...ead.php?t=8522
Chris, as far as I can tell, nothing was resolved in the above thread, so why bother posting it?Quote:
Originally Posted by .alias.
I thought in the end you came up with a solution, but reading it again i was wrong you just said that it could be done but it wasn't the best way as it would vary on screen resolution so you didnt actual show him how to do it
Ah well, this one's a slightly different question and unless there is a simpler more elegant solution that I've missed, this is a good as it gets, replace your existing chromemenu division with this code:
Code:<script type="text/javascript">
function cliswidth(){
var w=0
var crhomelis=document.getElementById('chromemenu').getElementsByTagName('li');
for (var i_tem = 1; i_tem < crhomelis.length; i_tem++)
w+=crhomelis[i_tem].firstChild.offsetWidth
return w;
}
function addDummy(){
if (!document.getElementById('dum')){
var dummy=document.createElement('li');
dummy.innerHTML='<a href="javascript:void(0);"> </a>'
dummy.id='dum'
document.getElementById('mnu').insertBefore(dummy, document.getElementById('mnu').firstChild);
}
document.getElementById('dum').firstChild.style.width=Math.floor(document.getElementById('chromemenu').offsetWidth/2-cliswidth()/2)-18+'px';
}
if ( typeof window.addEventListener != "undefined" ) {
window.addEventListener( "load", addDummy, false );
window.addEventListener( "resize", function(){setTimeout('addDummy();',20)}, false );
}
</script>
<div id="chromemenu">
<ul id="mnu">
<!--[if IE]>
<li><a href="javascript:void(0);" style="width:expression(document.getElementById('chromemenu').offsetWidth/2-cliswidth()/2-18+'px');"> </a></li>
<![endif]-->
<li><a href="index.shtml">Home</a></li>
<li><a href="specials.shtml">Specials</a></li>
<li><a href="store.shtml" onMouseover="cssdropdown.dropit(this,event,' dropmenu1')">Store</a></li>
<li><a href="about.shtml">About Us</a></li>
<li><a href="testimonials.shtml">Testimonials</a></li>
<li><a href="contact.shtml" onMouseover="cssdropdown.dropit(this,event,' dropmenu2')">Contact</a></li>
</ul>
</div>
Tested it here: http://www.atgt.dramatic-design.com/index.shtml and it did work for the centering issue, but now the drop-down menus don't work. Any ideas?
I said: "replace your existing chromemenu division". That would have been just this:
I didn't mean to remove the original script call from the page or anything else you may of thought I meant.HTML Code:<div id="chromemenu">
<ul>
<li><a href="index.shtml">Home</a></li>
<li><a href="specials.shtml">Specials</a></li>
<li><a href="store.shtml" onMouseover="cssdropdown.dropit(this,event,' dropmenu1')">Store</a></li>
<li><a href="about.shtml">About Us</a></li>
<li><a href="testimonials.shtml">Testimonials</a></li>
<li><a href="contact.shtml" onMouseover="cssdropdown.dropit(this,event,' dropmenu2')">Contact</a></li>
</ul>
</div>