Having trouble tweaking Chrome Menu

Zonglars · #1 Dec 19th, 2007, 21:52

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 · #2 Dec 19th, 2007, 22:50

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 · #3 Dec 19th, 2007, 23:02

Quote:

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 · #4 Dec 19th, 2007, 23:09

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

Zonglars · #5 Dec 20th, 2007, 00:04

Quote:

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 · #6 Dec 20th, 2007, 02:04

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 · #7 Dec 20th, 2007, 22:18

Quote:

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 · #8 Dec 20th, 2007, 22:21

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 · #9 Dec 20th, 2007, 22:33

Quote:

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 · #10 Dec 20th, 2007, 23:00

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

Zonglars · #11 Dec 20th, 2007, 23:54

Quote:

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 · #12 Dec 21st, 2007, 00:06

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 · #13 Dec 21st, 2007, 00:11

Quote:

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 · #14 Dec 21st, 2007, 00:24

Come again?

Zonglars · #15 Dec 21st, 2007, 00:37

Quote:

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 · #16 Dec 21st, 2007, 00:42

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

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Having trouble tweaking Chrome Menu