[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 251
  • Last Modified:

Coolmenus - Text Positioning (Continued)

Hi,
I am using Coolmenu 4 to generate my page navigation. The text on the first item, 'Main', is not fully displayed. I mistakenly thought it was my own monitor settings. I am using a 15 in monitor set to 800 x600. The problem can be viewed at http://users.eastlink.ca/~dkearney/BackOnTrack/Index.htm. I searched http://www.dhtmlcentral.com/projects/coolmenus/ for the answer but I cannot find one. Again I thought I had resolved this but it is not sorted out. Thank you,
d
0
diek_nf
Asked:
diek_nf
  • 6
  • 5
1 Solution
 
gops1Commented:
In your HTML make change this property:

oCMenu.resizeCheck=1

to

oCMenu.resizeCheck=0

Hope this works
0
 
diek_nfAuthor Commented:
Hey,
Thanks for coming back. I just have to confirm, can you read "Main".
d
0
 
gops1Commented:
Yes I can read "Main". I tried it after downloading your link locally to my system.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
diek_nfAuthor Commented:
G,
What size is your monitor, and what settings?
d
0
 
gops1Commented:
I changed from 1024 to 800 and I can see in both. Only thing you get a scroll bar. Is that a problem?
0
 
diek_nfAuthor Commented:
Are you using a 15, 17, 19 inch monitor? As soon as I switched my 15inch monitor to 1024 I could read the whole menu.

I am starting to think that this is problem of my inexperience with css and dealing with different settings.
0
 
gops1Commented:
But did you try making this change:

oCMenu.resizeCheck=0
0
 
gops1Commented:
Hey diek,

I think you are right this was not solving the problem when I further resize the window after changing the resolution.

Change your menu properties defined in your HTML, with these:

//Menu properties
oCMenu.pxBetween=10
oCMenu.fromLeft=12
oCMenu.fromTop=0
oCMenu.rows=1
oCMenu.menuPlacement="center"

oCMenu.offlineRoot=""
oCMenu.onlineRoot=""
oCMenu.resizeCheck=1
oCMenu.wait=1000
oCMenu.fillImg="cm_fill.gif"
oCMenu.zIndex=1000
0
 
diek_nfAuthor Commented:
Hey,
It worked but the adjustments have caused a glitch in a sub-sub menu. Under Therapists -> Physiotherapy, the two names are now appearing directly below. If you check out http://www.dhtmlcentral.com/projects/coolmenus/examples/menu1.html under Articles -> Tutorials the Sub-sub-menu unfolds to the right without blocking any of the sub-menu.

I really appreciate you sticking this out. When this topic is concluded I will be looking to remove the javascript and place it in a seperate file and call the oCMenu.construct() in the html. A simple one for you I am certain.

diek
0
 
gops1Commented:
Change in your menu properties:

Change these lines to:
//EXAMPLE SUB LEVEL[1] PROPERTIES - You have to specify the properties you want different from LEVEL[0] - If you want all items to look the same just remove this
oCMenu.level[1]=new cm_makeLevel() //Add this for each new level (adding one to the number)
oCMenu.level[1].width=oCMenu.level[0].width-2
oCMenu.level[1].height=30
oCMenu.level[1].regClass="clLevel1"
oCMenu.level[1].overClass="clLevel1over"
oCMenu.level[1].style=""
oCMenu.level[1].align="right"
oCMenu.level[1].offsetX=100
oCMenu.level[1].offsetY=-25
oCMenu.level[1].borderClass="clLevel1border"
oCMenu.level[1].borderX=1
oCMenu.level[1].borderY=1
oCMenu.level[1].rows=0
oCMenu.level[1].align="bottom"

Change your CSS for the menus:
Replace these styles, Just copy and Paste

.clCMAbs {
      LEFT: 0px; VISIBILITY: hidden; POSITION: absolute; TOP: 0px
}
.clBar {
      VISIBILITY: hidden; WIDTH: 10px; POSITION: absolute; HEIGHT: 10px; BACKGROUND-COLOR: navy; layer-background-color: Navy
}
.clLevel0 {
      PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: tahoma,arial,helvetica; POSITION: absolute
}
.clLevel0over {
      PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: tahoma,arial,helvetica; POSITION: absolute
}
.clLevel0 {
      COLOR: white; BACKGROUND-COLOR: navy; layer-background-color: Navy
}
.clLevel0over {
      CURSOR: hand; COLOR: yellow; BACKGROUND-COLOR: #336699; layer-background-color: #336699
}
.clLevel0border {
      VISIBILITY: hidden; POSITION: absolute; BACKGROUND-COLOR: #006699; layer-background-color: #006699
}
.clLevel1 {
      PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 11px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: tahoma, arial,helvetica; POSITION: absolute
}
.clLevel1over {
      PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 11px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: tahoma, arial,helvetica; POSITION: absolute
}
.clLevel1 {
      COLOR: white; BACKGROUND-COLOR: navy; layer-background-color: Navy
}
.clLevel1over {
      CURSOR: hand; COLOR: yellow; BACKGROUND-COLOR: #336699; layer-background-color: #336699
}
.clLevel1border {
      VISIBILITY: hidden; POSITION: absolute; BACKGROUND-COLOR: #006699; layer-background-color: #006699
}
.clLevel2 {
      PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 10px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: tahoma,arial,helvetica; POSITION: absolute
}
.clLevel2over {
      PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 10px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: tahoma,arial,helvetica; POSITION: absolute
}
.clLevel2 {
      COLOR: white; BACKGROUND-COLOR: navy; layer-background-color: Navy
}
.clLevel2over {
      CURSOR: hand; COLOR: yellow; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099cc
}
.clLevel2border {
      VISIBILITY: hidden; POSITION: absolute; BACKGROUND-COLOR: #006699; layer-background-color: #006699
}

Gops
0
 
diek_nfAuthor Commented:
Gops,
Thanks, that worked perfectly.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now