Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:10

CSS: large area around menubar1? Thick frame around menu!?


Poster: FelixSweden
Dated: Wednesday March 22 2006 - 17:58:39 GMT

Hello!

I am trying to create a website with the menu. This site will mainly be ruled by an external CSS-file. However, I have some problems, integrating the menu in the index.htm file.

I am not very familiar with webdesign, quite a beginner. But whenever I place the javascripts in the <body>, a large are with a height of ten rows occurs. Like a huge padding on top of and below the menu bar. Hard to describe, maybe easier to have a look...

http://www.biofokus.com/photohides/

The large greenish area around the menu should not be there. The header of the page with the small bird photographs should be further up and align with the white line on top.

Also, the thick black frame around the menu is not correct. Otherwise, the page is still at its beginning, there are lots of more things to fix, so have mercy... ;)

What am I doing wrong? Can anyone help?

I post you my "style.css" for some more information.

Thank you for your kind help. Greetings from Sweden

/Felix

------------

/* CSS Document */

body {
background-color: #586159;
border-color: #FFFFFF;
border-style: solid;
border-right-width: 1px;
border-left-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
font : normal 9pt arial, verdana;
scrollbar-shadow-color: #B9C7B8;
scrollbar-highlight-color: #B9C7B8;
scrollbar-face-color: #707C72;
scrollbar-3dlight-color: green;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #B9C7B8;
scrollbar-arrow-color: #B9C7B8;
color: white;
width: 90%;
margin-top: 15px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
padding-right: 0px;
}
div {
padding: 5px;
width: 90%;
}

h1, h2, h3, h4, h5, h6 {
margin: 0;
text-align: center;
}

#header {
width: 100%;
height: 70px;
background-image: url('background.jpg');
font : normal 8pt verdana, sans-serif;
text-align: center;
color : #2D4067;
float: left;
border-color: #FFFFFF;
border-style: solid;
border-right-width: 0px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
}

#navigation {
font : normal 8pt verdana, sans-serif;
text-align: center;
color : #2D4067;
float: left;
background-color: #B9C7B8;
border-color: #FFFFFF;
border-style: solid;
border-right-width: 0px;
border-left-width: 0px;
border-top-width: 1px;
border-bottom-width: 1px;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
width: 100%;
height: 25px;
}

#content {
font : normal 8pt arial, verdana;
text-align: left;
color : #2D4067;
background-color : #fffff5;
float: left;
width: 100%;
height: 450px;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
overflow: auto;
}
#maintable {
width: 90%;
background-color : #fffff5;
font : normal 10pt arial, verdana;
text-align: left;
color : #000000;
}
#columnleft {
height: 20px;
}
#columnright {
height: 20px;
}
#samplephotograph {
width: 150px;
height: 100px;
padding: 0px;
border-color: #333333;
border-style: solid;
border-right-width: 2px;
border-left-width: 2px;
border-top-width: 2px;
border-bottom-width: 2px;
}
P { font-size: 10pt;
line-height: 13pt;
font-family: arial, verdana;
width: 90%;
}
#footer {
background-image: url('backgroundfooter.jpg');
font : normal 8pt arial;
text-align: center;
clear: both;
background-color: #707C72;
width: 100%;
height: 20px;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
}


Poster: FelixSweden
Dated: Wednesday March 22 2006 - 18:13:06 GMT

Ooops... I somehow just solved the mainproblem, the large area around the menubar has disappeared after having done "some changes" :?: in the array file. :D

Still I think, I somehow have to define the menu in the stylesheet. I will try to solve that and might come back to you with more questions....

Cheers /Felix


Poster: vikenk
Dated: Wednesday March 22 2006 - 18:38:45 GMT

Hello,

Have you posted up your changes? The problem still seems to exist when I click on the link to your page.

Also, slightly off the subject, you are a self-proclaimed beginner with CSS. May I offer you some advice that will save you much typing and time? When setting borders, padding, etc., it is not necessary to set the value for each side independently *unless* they all have different dimensions. So this...

Code:
border-right-width: 1px;
border-left-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;


...can be reduced to this:
Code:
border-width: 1px;


This...
Code:
border-width: 1px;
border-color: #FFFFFF;
border-style: solid;


...can be reduced to this:
Code:
border: solid 1px #ffffff;


Same goes for your margins:
Code:
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;


reduces down to:
Code:
padding: 0


Go to http://www.w3schools.com/css/default.asp for a quick and easy tutorial on CSS and how to combine the commands. It'll save you typing and time :>)

By the way, I would like to check out your site when it's done. I am a photographer by hobby and would love to see the finished photos!


Poster: Migru
Dated: Wednesday March 22 2006 - 18:40:08 GMT

Hi

you are using menu Version 3, ( it is 3.3.19).
The Menu systems actual release is Version 5.744 !!!

Quote:
I will try to solve that and might come back to you with more questions....


Before you do this, please note, the version you are using is not supported.
Please see

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

Michael


Poster: vikenk
Dated: Wednesday March 22 2006 - 18:42:25 GMT

Good catch, Michael. I hadn't even looked at the code yet.


Poster: Migru
Dated: Wednesday March 22 2006 - 18:51:59 GMT

Hi Viken

if a link is given, and I´m interested, I´m loading the page down, getting the code into a special folder and can have a look at the js files, css and structure. Its easier then to get an idea on the structure and html errors rather than having just the browsers information and source displayed. But the version in this case must have been an older one, as the js standard file names were different from actual releases files.

Cheers, hope you are well
Michael


Poster: FelixSweden
Dated: Wednesday March 22 2006 - 19:54:21 GMT

Hi there!

Thank you all for your help. Yes, the problem still seems to exist in IE. But not in Firefox, that's why I thought that the problem was solved....but apparently nothing has changed.... :cry:

I downloaded these files at http://simplythebest.net/ and didn't realize that they were quite old. On my normal website http://www.biofokus.com I have another version, a free version of the milonic menu and tried first do download this menu once again. This worked, but the problem was that there does not seem to be any menu_array.js file when I download it. And neither is one on my homepage. Only the other ones. And I need that particular file in order to make the menu "all horizontal" in the future, I guess. Do I perhaps have to upgrade my free licence in order to obtain a version of the menu WITH the menu_array.js?

Thank you for the CSS suggestions. You have a very good point and I really appreciate that you mention it.

Cheers /Felix


Poster: Migru
Dated: Wednesday March 22 2006 - 23:32:36 GMT

Hi

Quote:
Do I perhaps have to upgrade my free licence in order to obtain a version of the menu WITH the menu_array.js?


To your information:
There is no longer any "menu_array.js" file. If you look at the actual version of the Milonic menu system, then you will find that there is a menu_data.js file instead containing
- global properties or settings
- styles properties
- menu properties and
- menu item properties and the definitions for the
- main menu and the
- submenus.

For basic information on the page integration and file names, please see:

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

for all the properties, menu functions and variables, please have a look at the menus quick reference guide (See DHTML menu, Milonic home page)

And with regard to your "free license", please see

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

Michael


Poster: Ruth
Dated: Wednesday March 22 2006 - 23:32:42 GMT

Hi Felix,

Actually, the version on your old site is unlicensed. Take a look here for information on types of licenses. http://www.milonic.com/licensing.php I think you need the professional license. All license types are there and you can see what you get in each one.


Beautiful images by the way :)

There is no 'menu_array' file in Version 5 of the menu, the equivalent is the menu_data.js file. And, support is for the latest version. The one you're using is a beta stage when the menu was in the beginnings of development and there isn't any way we could help with that one because much of what was in that has been changed, upgraded, fixed and new functionality added.

Version 3 also has no support, that hasn't even been in development for almost 4 years now.

Ruth


Poster: Migru
Dated: Wednesday March 22 2006 - 23:34:48 GMT

Hi Ruth

oops - have a look at the date stamp of those two posts:


Cheers
Michael


Poster: Ruth
Dated: Wednesday March 22 2006 - 23:42:28 GMT

Hi Michael,

:lol: I guess we'd share the medal if we were in a race!

The website won't qualify for free. The person is going to need a pro license, but that's pretty inexpensive given that menu can be used forever and can be updated to the newest version for a year!

Ruth


Poster: FelixSweden
Dated: Wednesday March 22 2006 - 23:45:04 GMT

Thank's, Ruth and Michael!

I will get the professional licence as you suggest. Thank you also for your great help. This free licence is more or less a relict from the start as a personal website.

Nice to hear that you like the photographs :D

Cheers /Felix


Poster: Migru
Dated: Wednesday March 22 2006 - 23:51:09 GMT

Hi Ruth -

I know, I have purchased two licenses, one for myself and one for an organization which made use of a free license so far.

Quote:
we'd share the medal if we were in a race


Oh yes, I agree.

In which time zone do you live ??

Michael


Poster: Ruth
Dated: Thursday March 23 2006 - 7:40:16 GMT

Hi Michael,

I'm in the pacific time zone

Ruth


Poster: Migru
Dated: Thursday March 23 2006 - 8:28:14 GMT

Hi Ruth,

thats GMT minus 8. I´m on GMT plus 1, so the Central European Time is 9 hours ahead of your time.
That is just to get an idea on "working simultaneously".

Michael


Poster: vikenk
Dated: Friday March 24 2006 - 14:02:59 GMT

I'm GMT -5 :)