Can't get menu images right

[ucd]

Under each Menu heading, I am trying to make up a tab like image that basically has a color bar at the bottom of each meny heading. I made the image 150x5, but when I enlarge the text, the image cuts off.

When I make the image larger 200x5, and the text is at normal size, it forces the heading to span 200 in width.

How can I get the image to span across relative to the text size?

Thanks

[Ruth]

Hi,
I can't really visualize what you're trying to do, do you by chance have a test so we can see what you are trying to accomplish?

Ruth

[ucd]

Link to URL

http://www.dev.lib.ucdavis.edu/info/javamenu/

That should help

[Ruth]

Hi UCD
Two things: you have the menu in a table, you have placed it correctly however, you forgot the semi-colon after the drawmenus in the table, and you forgot to take the main menu that you put into the table out of the menu_data.js file. Now, as to the images. If you were to put a border around the menu, just for testing purposes, you would find that the images actually do go the width of the menu and of each item. What you are seeing is the rest of the table cell the menu items don't cover. I've never been able to get the menu to go all the way across a table cell, someone else may have a solution that does that, but there are a couple of things you can try. You could align that table center, then the space without the image showing would be an even split on each side, or you also could use that last menu item image as the background image of that table cell. It should then stretch the full length as a background but would only be visible at the right side when there is space there. Those are the only solutions I know.

Ruth

[kevin3442]

How can I get the image to span across relative to the text size?

Sounds to me like you should use the bgimage property rather than the image property (i.e., make the image a background image). The easiest thing to do would be to take a 1px-wide slice from each background, spanning the full height of the menu item (i.e., it should include the background color above the horizontal bar as well). That way, the default css background-repeat will repeat the image all the way across the item's background... the width should automatically track with the amount of text in the item.

If you want to stick with the 5px high bar for the bgimage, then you'll have to add some css to the menu, to specify

Code: Select all

background-position: bottom;
background-repeat: repeat-x

You should be able to do that with the rawcss menu style property or by using the onclass and offclass properties for each item in the main menu. (FWIW: I think the first method in the paragraph above is easier, involving less coding.)

Hope that helps,

Kevin

[ucd]

Ruth, I have added the semicolon and removed the Menu part in the menu_data.js (is redundant i guess). Though i see what you are talking about centering the table, but i think it would leave spaces around the bottom image on the left and right. We would like to keep the bottom image spanning both ways to the end of the table cell regardless of what size the text is or cell is.

How would I control the CSS to repeat the background in those cells?

Thanks

[Ruth]

I don't know how to use the rawcss for the background, and I agree with Kevin that using bgimages would be the easier option, so if bgimages the full height would help you can use these. They were made using your bars and the bgcolors listed in your menu.

The first 4 are the bgimage and the second 4 are the overbgimage. To use these you need to change your table code like this:

Code: Select all

<table border="0" cellpadding="0" cellspacing="0" width="100%"> 

and then code the menu like this:

Code: Select all

with(milonic=new menuname("Main Menu")){
        style=menuStyle;
        alwaysvisible=1;
        menuwidth="100%";
        itemwidth="25%";
        itemheight="20";
        orientation="horizontal";
        position="relative";
aI("text=Research;showmenu=research;url=research.html;
bgimage=researchbg.gif;overbgimage=researchbg_over.gif;");

Each aI would be coded with the correct bgimage and overimage for that particular item. It will look like this
and it will expand as the browser size changes.

If you need to have the images in a zipfile let me know and I'll put one up, but I wasn't sure you could download such a file since some universities block that ability.

Ruth

[ucd]

RUTH, WOW many thanks. I get multiple images when increasing the font size to Largest, but I think I can cure that maybe by making the image taller in height and/or trying to see if i can position it with certain values.

Great =)

[ucd]

Hmm seems to make the whole cell larger though when I make the image larger, if I keep it with you smaller one it starts to tile, I guess there is no style for bgimageposition?

Many Thanks

[Maz]

I was thinking about warning you about that earlier, but its a while since I tried making those, the specific font and font size for various browsers will change the size, probably, making the image somewhat bigger to compensate for the change in size should do it.

maz

[kevin3442]

...I guess there is no style for bgimageposition?

You should be able to do that with css. I tried it with the menu's rawcss property, but that didn't work for some reason (hmmmmmm). There is an alternative that should work (seemed to in a quick test):

(1) In your .css file, add a class, say .menuBG, that controls position and repeat, like so:

Code: Select all

.menuBG {
  background-position: bottom; 
  background-repeat: repeat-x
}

(2) Apply the class in the menu item definition using the onclass and offclass item properties, like so:

Code: Select all

aI("text=Item Text;url=whatever.htm;...;bgimage=whatever.gif;onclass=menuBG;offclass=menuBG;");

Notice that you leave the dot out of the class name here.

If that doesn't work, give a holler and we'll try a different approach: controlling position and repeat with a javascript function.

Hope that helps,

Kevin

[Ruth]

One other solution that you can use occured to me. You can use it because you've got the menu in a table. So, if all else fails this works in IE5.5, Netscape6, 7, Opera 7.11 and Firebird .07. It's actually simple but long to explain.
First you need 4 new images, they would be only the bottom dark colors, if you decide to use this then give me a yell and I'll post the images 1x5px images I made in order to test this.
Make another row in your table. Put this code in it.

Code: Select all

<script language=JavaScript type=text/javascript>
 with(milonic=new menuname("borders")){
 style=borderStyle;
 alwaysvisible=1;
 menuwidth="100%";
 itemwidth="25%";
 itemheight="5px";
 orientation="horizontal";
 position="relative";
aI("text=&nbsp;;bgimage=researchbg.gif;type=header;");
aI("text=&nbsp;;bgimage=librariesbg.gif;itemwidth=30%;type=header;itemwidth=30%;");
aI("text=&nbsp;;bgimage=servicesbg.gif;type=header;");
aI("text=&nbsp;;bgimage=aboutbg.gif;type=header;itemwidth=20%;");
        }
        drawMenus();
    </script>

Note that the style for this is called borderStyle.
Now, in your menu_data.js file put this right after the menuStyle definition. That definition ends with } , so on the next line you would paste:

Code: Select all

borderStyle=new copyOf(menuStyle);
borderStyle.fontsize="0.1em";

That's a shortcut for making a different style when all you are changing is a few items from the original. The only thing changed here was the fontsize so I could downsize the item height to 5px. As you can see I put in the items the same width as the main menu, and you only need one bgimage since all the items here are set as headers so mouseover won't do anything to it. Finally, remove all the images from your main menu. Now you don't have bgimages only on and offbgcolor so when the text size is changed there is nothing to repeat and it doesn't affect the images at the bottom, or if it does it doesn't show because they are a single color. You could make the height lower or higher if you wish.

EDIT: One thing to note, there is one disadvantage, well what some would consider a disadvantage. You can still use the overfilter function, but you can't use the drop shadow or shadow property because it would apply to each of the 'menus' separately. The other transitions like randomdissolve and fade are usable, just not the shadow.


Ruth

[ucd]

Hmm, I'll try the CSS style first. I do notice the change in font size between browsers when using CSS though, but I have corrected that by keep the body style 100%.

[ucd]

Kevin, tried to add the css, but doesn't seem to work. I've added it into a external stylesheet.

[ucd]

All: think i got it to work with CSS

will post when done.

Thanks everyone.

border-bottom:5px solid #468DD3;

[John]

That's good to hear. We're looking forward to seeing it.

[ucd]

Still need to have a border appear when the page loads, is it possible to have CSS when the menu first loads on the headings? Looks nice after you roll on and off.

I was thinking of adding an image, but that didnt work to well.

[ucd]

Was soooo happy, and then I looked at it in Netscape.

What I did was used the onclass and offclass CSS to create the border. Seems like in IE, the borders won't show up when the page loads up unless i have an image. So I made a transparent image. Looks great in IE, totally different on Netscape.

Any ideas?

[Ruth]

I did find a solution that works in Netscape 7.1, Opera 7.11, IE 5.5 and Firebird .07. I do not know what they do on a Mac, you would have to get someone to test them.

Code: Select all

 <script language=JavaScript type=text/javascript>
        with(milonic=new menuname("Main Menu")){
        style=menuStyle;
        alwaysvisible=1;
		menuwidth="100%";
		itemwidth="25%";
        orientation="horizontal";
        position="relative";
aI("text=Research<br><img src=researchbar.gif border=0 width=100% height=5 valign=bottom>;showmenu=research;url=research.html;"); 
aI("text=Libraries & Collections<br><img src=librariesbar.gif border=0 width=100% height=5 valign=bottom>;url=libraries.html;showmenu=libraries;itemwidth=35%;"); 
aI("text=Services<br><img src=servicesbar.gif border=0 width=100% height=5 valign=bottom>;showmenu=services;url=services.html;"); 
aI("text=About<br><img src=aboutbar.gif border=0 width=100% height=5 valign=bottom>;showmenu=about;url=about.html;itemwidth=15%;"); 

        }
        drawMenus();
    </script>

This goes back and uses your images, but instead of putting them in as image they are placed using html coding. One thing: you cannot use the ampersand code

Code: Select all

&

for the ampersand, so if any browsers read the & and change it from just that to the actual code, which I don't know if they do, the image bar will not show. A solution perhaps would be to put a / in place of the ampersand. Libraries / Collections.



Ruth

[ucd]

RUTH: Looks promising ..working with it right now.
Thanks