CSS and font position over image

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:31

CSS and font position over image

Poster: dmacman
Dated: Wednesday September 21 2005 - 15:54:19 BST

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

Poster: Ruth
Dated: Wednesday September 21 2005 - 19:19:19 BST

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:

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:

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

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

Hope that helps.

Ruth

Poster: dmacman
Dated: Wednesday September 21 2005 - 20:22:18 BST

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/board/breeze/index.htm

Poster: dmacman
Dated: Wednesday September 21 2005 - 20:33:47 BST

Ruth,

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

Code:

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://www.milonic.com/beginner.php

Thanks again,

Don

Poster: Ruth
Dated: Thursday September 22 2005 - 1:38:51 BST

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

Poster: dmacman
Dated: Thursday September 22 2005 - 13:35:38 BST

Hi Ruth,

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

http://www.milonic.com/menusample89.php

Here is the link to my page:

http://intheclassroom.org/noFrames/board/breeze/index.htm

And the menu.js file

http://intheclassroom.org/noFrames/board/breeze/menu_data.js

Thanks for your patience and the help,

Don

Poster: Ruth
Dated: Thursday September 22 2005 - 16:04:36 BST

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:

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;

Poster: dmacman
Dated: Thursday September 22 2005 - 18:42:33 BST

That did it, Ruth.

I took your code and incorporated it into my file.

Here is the link:

http://intheclassroom.org/noFrames/board/breeze/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

Poster: Ruth
Dated: Thursday September 22 2005 - 19:44:08 BST

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

Poster: dmacman
Dated: Monday September 26 2005 - 14:10:34 BST

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://www.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

Poster: Ruth
Dated: Monday September 26 2005 - 20:21:32 BST

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

Poster: dmacman
Dated: Monday September 26 2005 - 20:37:31 BST

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

Industrial Strength JavaScript and DHTML Menus

CSS and font position over image