PDA

View Full Version : Chrome CSS Menu Help needed



dramaqueen
03-27-2006, 02:40 AM
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?

djr33
03-27-2006, 02:44 AM
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.

jscheuer1
03-27-2006, 03:44 AM
Get rid of this:


#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*/
}

from chromestyle.css

dramaqueen
03-27-2006, 12:43 PM
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.

dramaqueen
03-27-2006, 12:46 PM
The script in question is: http://www.dynamicdrive.com/dynamicindex1/chrome/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).

jscheuer1
03-27-2006, 03:59 PM
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.

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.

.alias.
03-27-2006, 04:07 PM
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/showthread.php?t=8522

jscheuer1
03-27-2006, 04:41 PM
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/showthread.php?t=8522

Chris, as far as I can tell, nothing was resolved in the above thread, so why bother posting it?

.alias.
03-27-2006, 04:46 PM
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

jscheuer1
03-27-2006, 05:46 PM
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:


<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);">&nbsp;</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');">&nbsp;</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>

dramaqueen
03-27-2006, 06:56 PM
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?

jscheuer1
03-27-2006, 07:58 PM
I said: "replace your existing chromemenu division". That would have been just this:


<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>

I didn't mean to remove the original script call from the page or anything else you may of thought I meant.