Having trouble tweaking Chrome Menu

[Zonglars]

I'm doing some more tweaking to my Chrome CSS Menu i got from Dynamic Drive, trying to get the width of the dropdown to match that of the item in the menu.

What i mean is, i know that it'll be a few pixels off depending on the font, so what i want to do is instead of having 2px and 15px padding on the top, bottom, and sides of the menu items, i want to just have them at a set width, so that the dropdown can match without me guessing.

anyway, here's the page http://pyramidia.webs.com/index08.html
and the css file http://pyramidia.webs.com/cssjs/chromestyle08.css

[Stuart]

Well, to me it looks like the width of the dropdown is determined by the width of the menu item. Why would you want to change it?

[Zonglars]

Originally Posted by swagner

Well, to me it looks like the width of the dropdown is determined by the width of the menu item. Why would you want to change it?

actually, i had just adjusted it to look that way, in the set up, i can control the width by adding a style to the div that holds a dropdown. (see here) what i want to do is adjust the anchor that you hover over to reveal the menu item (i.e. "Artwork") so that it has a set width.

this making any sense?

[Stuart]

Oh, you mean the main menu items? Like "Artwork", "Comments", etc?

[Zonglars]

Originally Posted by swagner

Oh, you mean the main menu items? Like "Artwork", "Comments", etc?

yup, i want to try and have those have a set width, so that the dropdown width matches the main menu item width no matter what font or style it is, as it changes since all i have to give them space is some css padding.

[Stuart]

Simple enough. Add the following to .chromestyle ul li:

Code: Select all

width: 200px; /* set this to whatever width you want */

You then need to change your HTML to this:

HTML: Select all

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="Artwork/index.html" rel="dropmenu1">
A<small>RTWORK</small></a></li>
<li><a href="VideoAudio/index.html" rel="dropmenu2">
V<small>IDEO</small> & A<small>UDIO</small></a></li>
<li><a href="FAQLinks/index.html" rel="dropmenu3">
FAQ & L<small>INKS</small></a></li> <li><a href="Comments/index.html" rel="dropmenu4">
C<small>OMMENTS</small></a></li>
</ul>
</div>

You may have noticed that what I took out was the style="width: ***px;" since that was preventing the CSS I posted above from controlling the width.

That should do it!

Cheers

[Zonglars]

Originally Posted by swagner

Simple enough. Add the following to .chromestyle ul li:

Code: Select all

width: 200px; /* set this to whatever width you want */

You then need to change your HTML to this:

HTML: Select all

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="Artwork/index.html" rel="dropmenu1">
A<small>RTWORK</small></a></li>
<li><a href="VideoAudio/index.html" rel="dropmenu2">
V<small>IDEO</small> & A<small>UDIO</small></a></li>
<li><a href="FAQLinks/index.html" rel="dropmenu3">
FAQ & L<small>INKS</small></a></li> <li><a href="Comments/index.html" rel="dropmenu4">
C<small>OMMENTS</small></a></li>
</ul>
</div>

You may have noticed that what I took out was the style="width: ***px;" since that was preventing the CSS I posted above from controlling the width.

That should do it!

Cheers

Thanks, but i already tried that and it didn't seem to work, but i found a workaround

Code: Select all

.chromestyle ul li a{display:table-cell;}

that little bit alows me to adjust the width of the titles and it'll actually work...

EDIT: scratch that, it doesn't work in IE, back to square one.

[Stuart]

So, is it working or not? And are you sure my solution didn't work? I tried it and it worked for me. You have to be sure to change the HTML like I did.

[Zonglars]

Originally Posted by swagner

So, is it working or not? And are you sure my solution didn't work? I tried it and it worked for me. You have to be sure to change the HTML like I did.

yup, i'm retrying it right now and it doesn't seem to do it.
it would be easier if i could just center the dropdown menu, and i can't seem to get that to work either.

[Stuart]

Woah! What browser are you using?!? It's working perfectly for me and the dropdown menu is centered. I'm on Firefox!

[Zonglars]

Originally Posted by swagner

Woah! What browser are you using?!? It's working perfectly for me and the dropdown menu is centered. I'm on Firefox!

same here, on XP, and just to be clear, hows about a little lexicon to minimize confusion?

menu: the dark grey bar across the screen that contains the titles
menu item: the titles that appear in the nav bar (i.e. Artwork, Video & Audio)
dropdown: the list of links that appears when you hover over a menu item
dropdown item: the links in the dropdown menu (i.e. CG Art, Bionicle Music Videos)

in other words, are you sure its the dropdown thats centered and not the overall menu and/or the text in it?

this is the dropdown on my screen click for screenshot
see how the dropdown list is a few pixels short on the left of the highlight? i'd like to either center it or control the width of the highlight so it matches the dropdown, instead of guessing the other way around.

[Stuart]

Woah! That is not XP!

Now to the menu. I see what you're saying. Let me see. OK. In the dropdown menus, the code has a style tag with a width specification. Change that width to the same as the main button. Here's one of the dropdowns:

Code: Select all

<div id="dropmenu1" class="dropmenudiv" style="width:118px">

Change the red bit.

[Zonglars]

Originally Posted by swagner

Woah! That is not XP!

Now to the menu. I see what you're saying. Let me see. OK. In the dropdown menus, the code has a style tag with a width specification. Change that width to the same as the main button. Here's one of the dropdowns:

Code: Select all

<div id="dropmenu1" class="dropmenudiv" style="width:118px">

Change the red bit.

Actually it is XP, i'm just a GUI nut and used window blinds to give it a vista-look without the vista crap.

the problem is i can't seem to be able to control the width of the main buttons, through the css for the list item or the anchor.

[Stuart]

Come again?

[Zonglars]

Originally Posted by swagner

Come again?

*sigh* talk about breakdown in communication

this is the main menu code

HTML: Select all

<ul>
<li><a href="Artwork/index.html" rel="dropmenu1">A<small>RTWORK</small></a></li>
<li><a href="VideoAudio/index.html" rel="dropmenu2">V<small>IDEO</small> & A<small>UDIO</small></a></li>
<li><a href="FAQLinks/index.html" rel="dropmenu3">FAQ & L<small>INKS</small></a></li>
<li><a href="Comments/index.html" rel="dropmenu4">C<small>OMMENTS</small></a></li>
</ul>

this is the css that controls the LI and A items in the main menu

Code: Select all

.chromestyle ul li{
display: inline;
margin: 0px;
}
.chromestyle ul li a{
color: #fff;
margin: 0px;
font-size: 20px;
font-family: Palatino Linotype, New York, serif;
text-decoration: none;
text-align: center;
padding: 2px 15px 2px 15px;
}
.chromestyle ul li a:hover{
color: #ffa;
background: url(menugradient-yellow.gif);
}

if i add width: whatever; to any of those, it doesn't work, not unless i change the display of the ul li a to block or table-cell, one messes up the menu, the other only works in FF.

that helping?

[Stuart]

But that's the problem! The HTML you posted is not the HTML on your site! The one on your site is:

HTML: Select all

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="Artwork/index.html" rel="dropmenu1">A<small>RTWORK</small></a></li>
<li style="width:175px;"><a href="VideoAudio/index.html" rel="dropmenu2">V<small>IDEO</small> & A<small>UDIO</small></a></li>
<li style="width:155px;"><a href="FAQLinks/index.html" rel="dropmenu3">FAQ & L<small>INKS</small></a></li>
<li style="width:135px;"><a href="Comments/index.html" rel="dropmenu4">C<small>OMMENTS</small></a></li>
</ul>
</div>

But for the css width styling to work, the HTML needs to be:

HTML: Select all

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="Artwork/index.html" rel="dropmenu1">A<small>RTWORK</small></a></li>
<li><a href="VideoAudio/index.html" rel="dropmenu2">V<small>IDEO</small> & A<small>UDIO</small></a></li>
<li><a href="FAQLinks/index.html" rel="dropmenu3">FAQ & L<small>INKS</small></a></li>
<li><a href="Comments/index.html" rel="dropmenu4">C<small>OMMENTS</small></a></li>
</ul>
</div>

See what I mean?

[Zonglars]

Yeah, but i just fixed that and it still won't do it. on top of that, i don't want all the buttons to be the same width.

lets take this from a different angle and see how to center the dropdown.

like i said, in my screen shot, the menu's left side is lined up with that of the button, but it's a few px short on the right side. i would just trial&error it to work but i'd have to start from scratch if the font type or size was changed. so since i can't seem to give the buttons a set width, lets see if we can figure out how to center the dropdown so its left and right sides are equal distance from the buttons left and right sides.

unless you want to show me your fix as a rendered page.

thanks for helping though.

[Stuart]

OK. Try this to stretch the dropdowns:

Code: Select all

<div id="dropmenu1" class="dropmenudiv" style="width:123px">
<div class="center">
<a class="menu" href="Artwork/CGArt.html">CG Art</a>
<a class="menu" href="Artwork/BionicleArt.html">Bionicle Art</a>
<a class="menu" href="Artwork/Sketches.html">Sketches</a>
<a class="menu" href="Artwork/FinishedWorks.html">Finished Works</a>
<a class="menu" href="Artwork/MOCs.html">Lego Creations</a>
<a class="menu" href="Artwork/Requests.html">Art Requests</a></div>
</div>
<div id="dropmenu2" class="dropmenudiv" style="width:178px">
<div class="center">
<a class="menu" href="VideoAudio/Videos.html">Bionicle Music Videos</a>
<a class="menu" href="VideoAudio/Animations.html">Animations</a>
<a class="menu" href="VideoAudio/Trailers.html">Custom Trailers</a>
<a class="menu" href="VideoAudio/Music.html">Music (from/for Videos)</a></div>
</div>
<div id="dropmenu3" class="dropmenudiv" style="width:154px">
<div class="center">
<a class="menu" href="FAQLinks/FAQ.html">FAQ?</a>
<a class="menu" href="FAQLinks/AboutMe.html">About Me</a>
<a class="menu" href="FAQLinks/Friends.html">Friends</a>
<a class="menu" href="FAQLinks/Credits.html">Credits</a>
<a class="menu" href="FAQLinks/Sponsors.html">Sponsors</a></div>
</div>
<div id="dropmenu4" class="dropmenudiv" style="width:135px">
<div class="center">
<a class="menu" href="Comments/Forums.html">Forums</a>
<a class="menu" href="Comments/Comments.html">General Comments</a>
<a class="menu" href="Comments/GuestBook.html">Guest Book</a>
<a class="menu" href="Comments/Polls.html">Opinion Polls</a>
<a class="menu" href="mailto:dwollison@mdirect.net">E-Mail Me!</a></div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
</div>

That should stretch them to the full width of the button. Phew!

[Zonglars]

*sigh*

sorry to sound ungreatfull but that's what i've been doing, its just the width of the buttons change if i change the font, so i'd have to adjust it over and over again, i guess it's just easier if i can center the dropdown.

[Stuart]

You're entire code is a bit weird. I'm not sure how you could do all of this. You would need to get rid of all the width specifications on the page. They are overriding the ones set in the CSS...