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

FelixSweden · Post by **FelixSweden** » Wed Mar 22, 2006 6:58 pm

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;
}

FelixSweden · Post by **FelixSweden** » Wed Mar 22, 2006 7:13 pm

Ooops... I somehow just solved the mainproblem, the large area around the menubar has disappeared after having done "some changes"

in the array file.

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

vikenk · Post by **vikenk** » Wed Mar 22, 2006 7:38 pm

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: Select all

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

...can be reduced to this:

Code: Select all

border-width: 1px;

This...

Code: Select all

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

...can be reduced to this:

Code: Select all

border: solid 1px #ffffff;

Same goes for your margins:

Code: Select all

padding-bottom: 0px; 
padding-top: 0px; 
padding-left: 0px; 
padding-right: 0px;

reduces down to:

Code: Select all

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!

Migru · Post by **Migru** » Wed Mar 22, 2006 7:40 pm

Hi

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

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

Michael

vikenk · Post by **vikenk** » Wed Mar 22, 2006 7:42 pm

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

Migru · Post by **Migru** » Wed Mar 22, 2006 7:51 pm

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

FelixSweden · Post by **FelixSweden** » Wed Mar 22, 2006 8:54 pm

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

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

Migru · Post by **Migru** » Thu Mar 23, 2006 12:32 am

Hi

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

Michael

Post by **Ruth** » Thu Mar 23, 2006 12:32 am

Hi Felix,

Actually, the version on your old site is unlicensed. Take a look here for information on types of licenses. http://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

Migru · Post by **Migru** » Thu Mar 23, 2006 12:34 am

Hi Ruth

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

Cheers
Michael

Post by **Ruth** » Thu Mar 23, 2006 12:42 am

Hi Michael,

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

FelixSweden · Post by **FelixSweden** » Thu Mar 23, 2006 12:45 am

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

Cheers /Felix

Migru · Post by **Migru** » Thu Mar 23, 2006 12:51 am

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.

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

Oh yes, I agree.

In which time zone do you live ??

Michael

Post by **Ruth** » Thu Mar 23, 2006 8:40 am

Hi Michael,

I'm in the pacific time zone

Ruth

Migru · Post by **Migru** » Thu Mar 23, 2006 9:28 am

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

vikenk · Post by **vikenk** » Fri Mar 24, 2006 3:02 pm

I'm GMT -5