Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hello,
I’ve a problem with the menubar and sub-items style definition. I want to use my background image instead of the zk one.
Here is the actual execution :
http://a.imagehost.org/t/0860/1_120.jpg
The problem is that the image in the background is not correctly displayed !
The zul extract :
http://a.imagehost.org/t/0170/2_38.jpg
The css extract :
.z-menubar-hor {
position : relative;
display: block;
padding : 2px 0px;
border-bottom : none;
background: center;
background-image: none;
width : 85px;
}
.z-menubar-hor .z-menu-btn {
width : 85px;
}
.z-menu-body .z-menu-inner-m div{
display:block;
min-height:16px;
padding-right: 3px;
padding-left:0px;
background: transparent no-repeat right -14px;
background-image:none;
width : 85px;
}
.z-menu .z-menu-inner-l {
background: none;
border:none;
}
.z-menu .z-menu-inner-m {
background: none;
border:none;
width : 85px;
}
.z-menu .z-menu-inner-r {
background: none;
border:none;
}
.z-menu-body{
width:85px;
}
With IE debug bar i can see that the size is fixed to 26px :
http://i.imagehost.org/t/0459/3_34.jpg
I’ve manually changed the value to 85px (with IEDebugBar) and it’s OK !
http://j.imagehost.org/t/0179/4_14.jpg
So my question is :
How can I specify a 85px width for the z-menu-btn class or in the attribute style (see above) ? In the CSS or the ZUL ?
I’ve already read in detail the http://docs.zkoss.org/wiki/StyleGuide_Menubar page.
Thanks for your answers.
Regards,
Hi pierre35
I have tested your sample with ZK5.0.3-FL 06-09, IE 6, 7, 8
it worked well
<zk>
<style>
.z-menubar-hor {
position : relative;
display: block;
padding : 2px 0px;
border-bottom : none;
background: center;
background-image: none;
width : 85px;
}
.z-menubar-hor .z-menu-btn {
width : 85px;
}
.z-menu-body .z-menu-inner-m div{
display:block;
min-height:16px;
padding-right: 3px;
padding-left:0px;
background: transparent no-repeat right -14px;
background-image:none;
width : 85px;
}
.z-menu .z-menu-inner-l {
background: none;
border:none;
}
.z-menu .z-menu-inner-m {
background: none;
border:none;
width : 85px;
}
.z-menu .z-menu-inner-r {
background: none;
border:none;
}
.z-menu-body{
width:85px;
}
</style>
<menubar>
<menu label="" image="/menu.gif">
<menupopup>
<menuitem label="aa"/>
</menupopup>
</menu>
</menubar>
</zk>
@jimmmyshiau : I am using zk 6.5.3 and can't upgrade it to higher versions.
In menubar earlier i was using 16x16 px images ,it worked fine, Now i have to use 24x24 px, but now the images gets cropped
I worked with css styling and made the full image to appear,but on mouse hover ,the highlighted button is still of the same size,so it appears like the image overflows from the button.
Please help me out. I think this is due to the use of tables in menubar design .In versions from 7.0.0 ,divs are used to design menubar.
Thanks in advance.
Asked: 2010-06-08 09:43:54 +0800
Seen: 600 times
Last updated: Jun 20 '14
