placing the menu in a centred div

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
y0ur1
Beginner
Beginner
Posts: 2
Joined: Mon Jul 18, 2005 11:18 am

placing the menu in a centred div

Post by y0ur1 »

Hi

can anyone help me on this one? the menu's are not posiotioned well. It adds a distance from the left of the screen to the main centred div.

http://www.verenigingclc.nl/nieuw/

thanks
slackbladder
Super Advanced
Super Advanced
Posts: 72
Joined: Fri Jul 01, 2005 3:04 pm

Post by slackbladder »

Hi,

Try:

changing your CSS to:

Code: Select all

body {
	font-family: verdana;
	font-size: 10pt;
	margin: 0px;
	background: url('../images/achtergrond.gif');

}

div#main{
	width: 770px;
	background: #D3E7D3;
}

div#header {
	background: #810000;
	background-repeat: no-repeat;
	border-bottom: 1px solid #C0C0C0;
	height: 80px;

}

div#menu {	
	height: 21px;
	background: #B90000;
	border-bottom: 1px solid #C0C0C0;
}

div#content {
	float: left;
	width: 547px;
	padding: 10px;
	font-size: 10pt;
}

div#content-right{
	float: left;
	height: 100%;
}

.box-header{
	width: 195px;
	color: #fff;
	margin-top: 10px;
	background: url('../images/box-header.gif');
	height: 15px;
	font-size: 8pt;
	font-weight: bold;
	padding-left: 3px;
	padding-right: 2px;
	padding-top: 2px;
	
}

.box{
	width: 188px;
	text-align: left;
	font-size: 8pt;
	padding: 5px;
	border: 1px solid #6666A6;
	background: #F4FAF4;
	margin-bottom: 10px;
}

div#footer{
	clear: both;
	width: 770px;
	height: 15px;
	background: url('../images/footer.gif');
	overflow: hidden;

}

h3 {
	color: #B90000;	
	margin: 0px;
	font-size: 13pt;
	text-align: right;
}

h5 {
	color: #B90000;	
	margin-bottom: -8px;
	font-size: 10pt;
	font-weight; none;
}

hr {
	height: 1px;
	border-style: none;
	color: #6666A6;
	background-color: #6666A6;
	margin-top: 5px;
	margin-bottom: 0px;
}

p {
	margin-top: 10px;
}

a {
	text-decoration: none;
	color: #B90000;
}

a:hover{
	text-decoration: underline;
}

div.container  { text-align: left; margin: 0 auto; width: 770px }

table#maintable {
	width: 100%;
}

changing your menu_data.php to:

Code: Select all

_menuCloseDelay=500 // The time delay for menus to remain visible on mouse out 
_menuOpenDelay=0 // The time delay before menus open on mouse over 
_subOffsetTop=0 // Sub menu top offset 
_subOffsetLeft=0 // Sub menu left offset 

with(menuStyle=new mm_style()){ 
onbgcolor="#6666A6"; 
oncolor="#fff"; 
offbgcolor="#B90000"; 
offcolor="#fff"; 
bordercolor="#C0C0C0"; 
borderstyle="solid"; 
borderwidth=1; 
separatorcolor="#C0C0C0"; 
separatorsize="1"; 
padding=4; 
fontsize="8pt"; 
fontstyle="normal"; 
fontweight="normal"; 
fontfamily="Verdana, Tahoma, Arial"; 
pagecolor="white"; 
pagebgcolor="#B90000"; 
headercolor="#000000";
headerbgcolor="#ffffff"; 
subimage="./includes/milonic/arrow.gif"; 
subimagepadding="2"; 
} 

with(milonic=new menuname("Main Menu")){ 
style=menuStyle; 
top=80;  
alwaysvisible=1; 
orientation="horizontal"; 
aI("text=Home;url=index.php;status=Back To Home Page;"); 
aI("text=Vereniging CLC;showmenu=6;"); 
aI("text=Nieuws & Publicatie's;showmenu=2;"); 
aI("text=Coaches & Counselors;showmenu=3;"); 
aI("text=Ledennet;showmenu=4;"); 

aI("text=Links;url=;status=Back To Home Page;"); 
aI("text=Contact;url=contact.php;status=Back To Home Page;"); 
} 

with(milonic=new menuname("8")){ 
style=menuStyle; 
overflow="scroll"; 
} 

with(milonic=new menuname("6")){ 
style=menuStyle; 
overflow="scroll"; 
aI("text=• lidmaatschap;url=index.php?page=9;"); 
aI("text=• statuten;url=index.php?page=10;"); 
aI("text=• huishoudelijk reglementen;url=index.php?page=11;"); 
} 

with(milonic=new menuname("2")){ 
style=menuStyle; 
overflow="scroll"; 
aI("text=• agenda;url=index.php?page=12;"); 
aI("text=• activiteiten;url=index.php?page=13;"); 
aI("text=• de loper;url=index.php?page=14;"); 
} 

with(milonic=new menuname("3")){ 
style=menuStyle; 
overflow="scroll"; 
aI("text=• kopstukken;url=index.php?page=15;"); 
aI("text=• zoeken op postcode;url=index.php?page=16;"); 
} 

with(milonic=new menuname("4")){ 
style=menuStyle; 
overflow="scroll"; 
aI("text=• inloggen;url=login.php;"); 
aI("text=• exclusief;url=index.php?page=18;"); 
} 

with(milonic=new menuname("19")){ 
style=menuStyle; 
overflow="scroll"; 
} 

with(milonic=new menuname("5")){ 
style=menuStyle; 
overflow="scroll"; 
} 

drawMenus(); 
All I did was change your CSS def div.container (removed relative position - I don't know enough about css to know how this will affect the rest of the site?) and removed the left=0; from your menu_data.php

Note: Your site doesn't work properly on MAC IE5.2 (but there's not many using it anyway)!
y0ur1
Beginner
Beginner
Posts: 2
Joined: Mon Jul 18, 2005 11:18 am

Post by y0ur1 »

I solved the problem by using a table instead of a div. Can you check whether this works on an mac?

http://www.webintellect.nl/projects/clc/
slackbladder
Super Advanced
Super Advanced
Posts: 72
Joined: Fri Jul 01, 2005 3:04 pm

Post by slackbladder »

Looks cool in FireFox and Safari (MAC) but in IE it's all over the place. Check out this:

http://milonic.com/menufaq.php#mactrouble

but bare in mind - IE is no longer being supported for MAC (no upgrades) - Microsoft believe Apple can do a better job :lol: (I won't disagree with them!). So most MACs users use FF or Safari
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Hi,

Slack is correct on the IE Mac, but also remember that even though it's not supported many will not upgrade to something else, just look at those who still use Netscape4x browsers!

Just remove the main menu from the data file per directions and it takes care of that problem.

Code: Select all

<TABLE id=maintable cellSpacing=0 cellPadding=0>
  <TBODY>
  <TR>
    <TD>&nbsp;</TD>
    <TD width=770>
     <SCRIPT type=text/javascript>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position= "relative";
aI("text=Home;url=index.php;status=Back To Home Page;");
aI("text=Vereniging CLC;showmenu=6;");
aI("text=Nieuws & Publicatie's;showmenu=2;");
aI("text=Coaches & Counselors;showmenu=3;");
aI("text=Ledennet;showmenu=4;");
aI("text=Links;url=;status=Back To Home Page;");
aI("text=Contact;url=contact.php;status=Back To Home Page;");
}
drawMenus();
</script>
    </TD>
    <TD>&nbsp;</TD></TR></TBODY></TABLE>
Ruth
Post Reply