Repeating background images

[laurie]

I'm using the 'background item images' menu, which I've not used before and I'm experiencing a problem whereby the images repeat across the full width of the browser for both main and sub menu's.

Problem can be viewed on a test page at:
http://www.webezedev.net/NHGA/test.htm
(excuse really crap colours - they just help to see the various layers)

I'm sure there is a simple explanation for this, but at the minute it's escaping me.

[Ruth]

Hi,

The simple answer is the problem is somewhere in the css. I am working on it, but I need to know about your layout. Are you trying to set up a 3 column layout with a header and footer? Is it going to be a fixed width and centered or is it going to be 100% expanding so it fills the page when the resolution is changed? I think the problem is in the menu div you have that is being nested in a div nested in a div nested in a table. So, I'm trying to figure out if there is another way to achieve the menu position, but kind of need to know the ultimate desire for the layout.

Ruth

[laurie]

Hi thanks for replying

This problem occured the moment I uploaded it to the test site with the Javascript in the head - even before it was entered into the leftMenu <div>.

Basically the layout is a full width, full height table which centres a relative container <div> (the lower blue layer). All other <div> layers are then absolutely positioned within the container. There is no subsequent table within the leftMenu <div> controlling the menu.

CSS for the <div>'s as follows:

html{scrollbar-track-color: #E5E8CA; scrollbar-face-color: #A7C294; scrollbar-highlight-color: #CFDEC4; scrollbar-3dlight-color: #4E5B46; scrollbar-shadow-color: #778A69; scrollbar-darkshadow-color: #000000; scrollbar-arrow-color: #000000;}

#container {
position: relative;
visibility: visible;
margin: 0 auto;
text-align: left;
height: 795px;
width: 750px;
z-index: 1;
background-color: #0000FF;
}
#topBanner {
overflow: hidden;
position: absolute;
visibility: visible;
height: 200px;
width: 750px;
left: 0px;
top: 0px;
z-index: 2;
background-color: #000000;
}
#leftMenu {
position: absolute;
visibility: visible;
height: 270px;
width: 188px;
left: 0px;
top: 205px;
background-color: #000000;
z-index: 2;
overflow: hidden;
}
#leftText {
position: absolute;
visibility: visible;
height: 270px;
width: 188px;
left: 0px;
top: 480px;
overflow: auto;
background-color: #000000;
z-index: 2;
vertical-align: top;
}
#rightText {
position: absolute;
visibility: visible;
height: 270px;
width: 188px;
left: 562px;
top: 205px;
background-color: #000000;
z-index: 2;
overflow: hidden;
}
#rightSponsors {
position: absolute;
visibility: visible;
height: 270px;
width: 188px;
left: 562px;
top: 480px;
background-color: #000000;
z-index: 2;
overflow: hidden;
}
#middleBody {
position: absolute;
visibility: visible;
height: 545px;
width: 362px;
left: 194px;
top: 205px;
overflow: auto;
background-color: #000000;
z-index: 3;
vertical-align: top;
}
#footer {
position: absolute;
visibility: visible;
height: 40px;
width: 750px;
left: 0px;
top: 755px;
background-color: #000000;
z-index: 2;
text-align: center;
vertical-align: middle;
overflow: auto;
}

Hope this helps
Cheers
L

[Ruth]

Hi Lauri,

It seems that the itemwidth you have set in the style is for some reason not being applied in the submenus. I did find a fix by setting menuwidth=188; in each submenu

Code: Select all

with(milonic=new menuname("Menu2")){
style=background;
menuwidth=188;

THis makes the menu only 188 wide. Please note that because you are using those images which are only 160px wide, you get that extra 28 px repeat at the left. You could fix that by setting the menuwidth to 160 in each menu, including the main menu.

There are also methods to apply the bgimage using css which allows you to code a no-repeat in it. This is a very basic css explanation for use in the menu and the second link is to some examples that have been applied to a menu, the background images start with style4.

http://support.milonic.com/beginners/css_styling/

http://support.milonic.com/beginners/cs ... amples.htm

Ruth

[laurie]

Thanks Ruth

Seems to work ok if, like you say, 'menuwidth' is applied to each item. Couldn't get it to remove the repeat using CSS though, whether specifying it within the document, or within the linked style sheet.

Milonic may want to change their download to reflect this issue as, like I say, the image repeat was a problem from the outset when simply applied in the document head

Thanks for all your help
L

[Ruth]

Hi Laurie,

This is how you would do the css bg image.

Put the following into your css stylesheet, of course you can name the classes whatever you want, I just use the mm short for milonic menu.

Code: Select all

.mmbgOff{
background: transparent url(xp_button_blue.gif) no-repeat left top
}

.mmbgOn{
background: transparent url(xp_button_blueon.gif) no-repeat left top
}

Then in your menu_data.js file in the style you have called background, remove the two lines that call the bgimage and overbgimage

Code: Select all

bgimage="xp_button_blue.gif"; 
overbgimage="xp_button_blueon.gif";

In their place add the following. I put it as the 1st two lines of the style so I'll be aware immediately that I have put in a class call in the menu but you can put it in whatever position you like.

Code: Select all

with(background=new mm_style()){
offclass="mmbgOff";
onclass="mmbgOn";
borderstyle="solid";
fontfamily="Helvetica";
fontsize="75%";
and so on with the rest of your style code

Finally, remove the bgimage=; and overbgimage=; from your embedded main menu file since it will use the class you have created in the css and called in the background style section of the menu_data.js file.

I just tested it on your page and it is working just fine with the newest version of the menu, 5.770. You might want to download the newest version on the main site. Make sure you are logged in at that page so you get your licensed version.

http://milonic.com/menuvinfo.php

Ruth