CSS and font position over image

[dmacman]

Hi all,

I am new to Milonic DHTML menu system.

I am not a CSS guru and I am trying to understand the menu system.

I have a sample page I am working with to learn the system and I cannot seem to locate a page or PDF that covers how to align the text over the images in DHTML menu.

Here is my sample page:

http://intheclassroom.org/noFrames/boar ... /index.htm

I am trying to align the text for each button over the images.

Thanks in advance,

Don

[Ruth]

Hi,

1. You could use only one image, and code it into the aI using html and then position it below by using a line break after the text.

Code: Select all

<img src=xp_button_off.gif border=0 width=x height=x>

You would then put in the text and a line break before that code. You would not be able to use overimage in that set-up.

2. You can set it up as css classes, using the image as a bgimage with positioning set and no-repeat. To do that you would also have to set a height for the menu item to include the height of the image plus the text. Using the images you now have and the text you would create 2 classes in your css

Code: Select all

.off{background: #ffffff url(xp_button_off.gif) no-repeat bottom center }
.over{background: #ffffff url(xp_button_on.gif) no-repeat bottom center }

Once created you would then code the itemheight to be the height of the image plus the needed amount for the text, remembering that people change font size on their browser, something you can't control. The image you have is 24px high, so I coded the itemheight as 48, then in the aI string I placed this

Code: Select all

aI("align=left;showmenu=Milonic;status=Back To Home Page;text=Home<br>;offclass=off;onclass=over;url=http://milonic.com/;");

Hope that helps.

Ruth

[dmacman]

Thanks Ruth,

That is exactly what I was trying to do.

I like this code (snippet, app).

It will take a little experimenting on my behalf to get it down, but users like you, save people like me a lot of wasted time.

Thanks again!

Don

PS.

Check out what I did with your help.

http://intheclassroom.org/noFrames/boar ... /index.htm

[dmacman]

Ruth,

I tried to add an arrow to the left with the following code:

Code: Select all

subimage="arrow.gif";
subimagepadding="2";
image="square.gif";
imagepadding="6";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}

And I got flaky results, the image and menus bounced up and down.

Any suggestions?

I got this solution from this page:

http://milonic.com/beginner.php

Thanks again,

Don

[Ruth]

Hi,

I don't have any way to figure out what the square.gif is, nor which arrow you are using. If you could put it together and up the page to the web so I can get it all it would help.

Also, very important, what do you want those images you are using to look like, like what you have now, or like the images actually are with right and left borders?

Ruth

[dmacman]

Hi Ruth,

I am trying to add an arrow (double_arrow.gif) to the menu to get my menu to look like this:

http://milonic.com/menusample89.php

Here is the link to my page:

http://intheclassroom.org/noFrames/boar ... /index.htm

And the menu.js file

http://intheclassroom.org/noFrames/boar ... nu_data.js

Thanks for your patience and the help,

Don

[Ruth]

I can't get your image openfolder.gif. I've tried every path and i just get page not found. Where is that image?

I set this up with the images from before. Try that and then try substituting the other images you want.

Code: Select all

with(menuStyle=new mm_style()){
bgimage="xp_button_off.gif";
overbgimage="xp_button_on.gif";
borderstyle="solid";
fontfamily="Verdana, Tahoma, Arial";
fontsize="10pt";
fontstyle="normal";
fontweight="normal";
image="transparent.gif";
imagepadding=4;
itemheight=24;
itemwidth=138;
headerbgcolor="#ffffff";
headercolor="#000000";
padding=5;
pagecolor="black";
subimage="double_arrow.gif"; 
subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)"; 
outfilter="randomdissolve(duration=0.3)"; 
} 


with(submenuStyle=new mm_style()){
styleid=1;
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontstyle="normal";
fontweight="normal";
headercolor="#000000";
offbgcolor="#D5EBFC";
offcolor="#67A1CE";
onbgcolor="#91C7F1";
onborder="1px solid #67A1CE";
oncolor="#000000";
padding=4;
pagecolor="black";
separatorsize=1;
subimage="white_4x7.gif";
onsubimage="double_arrow.gif";
subimagepadding=8;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
itemheight=24;
itemwidth=138;
left=10;
orientation="horizontal";
style=menuStyle;
top=10;

[dmacman]

That did it, Ruth.

I took your code and incorporated it into my file.

Here is the link:

http://intheclassroom.org/noFrames/boar ... /index.htm

The only thing I cannot seem to figure out, is why the text for the main menu is purple? I have every color in all my 3 files, set ot either #000000 or #FFFFFF (White or Black).

Interesting.

Thanks,

Don

[Ruth]

The main menu uses menuStyle, the rest use subStyle. You do not have any offcolor or oncolor defined in the menuStyle. Since the items in the menu are links, even if they only open a submenu, without any on or off color defined for the font it takes the default link color which is blue, but looks purple on the image.

Ruth

[dmacman]

Thanks again, Ruth.

I changed the font color for both on and off.

I am going thru your post on how the change the styles, etc at this location:

http://milonic.com/forum/viewtopic.php?t=4601

and I cannot seem to change the "transparency" in the menu to "none."

Right now, my page:

http://intheclassroom.org/noFrames/teachers/index.php

has a transparency set and when you mouse over the menu and open a sub-menu, you can read the text below that menu "thru" the menu.

I hope that makes sense.

Thanks,

Don

[Ruth]

I'm not seeing any text through the subs when they open. I see pretty images silver and white. Are you sure it's not a setting on your browser? I think IE 6 has some kind of setting for alpha, or something like that. You don't have any kind of setting that has to do with transparency. You have an alpha setting in the overfilter of 90% You could try setting that to 100%



Ruth

[dmacman]

I'm sorry, Ruth, I fixed it (at least it looks good) about an hour ago. I played with it until I got the desired results.

May not be strictly to code, but works for me.

Thanks,

Don