So i'm still having the problem, the following is the code i'm currently using, maybe someone can point out my mistakes!
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="js/yui-ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="js/yui-ext/yui-utilities.js"></script>
<script type="text/javascript" src="js/yui-ext/ext-yui-adapter.js"></script>
<script type="text/javascript" src="js/yui-ext/ext-all.js"></script>
<script type="text/javascript" src="js/menus.js"></script>
<style type="text/css">
body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
#header{
background: url(images/header-bar.gif) repeat-x bottom;
border-bottom: 1px solid #083772;
padding:5px 20px;
color:white;
font:bold 18pt arial,helvetica;
}
#footer{
background: url(images/header-bar.gif) repeat-x bottom;
border-top: 1px solid #083772;
padding:2px 4px;
color:white;
font:normal 8pt arial,helvetica;
}
#nav {
background-color:#c3daf9;
}
#nav, #content {
padding:10px;
}
#content p {
margin:5px;
}
#nav li {
padding:2px;
padding-left:10px;
background-image:url(images/bullet.gif);
background-position: -3px 6px;
background-repeat: no-repeat;
font-size:8pt;
display: block;
}
.x-layout-panel{
border:0px none;
}
</style>
<script type="text/javascript">
Example = function(){
return {
init : function(){
var layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 35,
toolbar: this.tb
},
south: {
split:false,
initialSize: 20
},
west: {
split:false,
initialSize: 200,
collapsible: false
},
center: {
autoScroll: true
}
});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('header', {fitToFrame:true}));
layout.add('south', new Ext.ContentPanel('footer', {fitToFrame:true}));
layout.add('west', new Ext.ContentPanel('nav', {fitToFrame:true}));
layout.add('center', new Ext.ContentPanel('content'));
layout.endUpdate();
}
};
}();
Ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>
</head>
<body>
<div id ="container">
<div id="header" class="x-layout-inactive-content">
IT-REK.com
<div id="toolbar"></div>
</div>
<div id="nav" class="x-layout-inactive-content">
<ul>
Future Employers ("]Job Seekers[/url]
[url=")
Search ("")
[/list]
</div>
<div id="content" class="x-layout-inactive-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
</div>
<div id="footer" class="x-layout-inactive-content">
Copyright 2007 Nicky Formosa
</div>
</div>
</body>
</html>
menu.js
Ext.onReady(function(){
Ext.QuickTips.init();
var tb = new Ext.Toolbar('toolbar');
tb.add(
new Ext.Toolbar.Button({
text: 'Home',
handler: onButtonClick
}),
new Ext.Toolbar.MenuButton({
text: 'Job Seekers',
handler: onButtonClick,
cls: 'x-btn-text-icon bmenu',
menu : {items: [
{text: 'My Account', handler: onItemClick},
{text: 'CV Builder', handler: onItemClick},
{text: 'Job Search', handler: onItemClick}
]}
}),
new Ext.Toolbar.MenuButton({
text: 'Employers',
handler: onButtonClick,
cls: 'x-btn-text-icon bmenu',
menu : {items: [
{text: 'My Account', handler: onItemClick},
{text: 'CV Search', handler: onItemClick},
{text: 'Create Job', handler: onItemClick}
]}
}),
new Ext.Toolbar.MenuButton({
text: 'Search',
handler: onButtonClick,
cls: 'x-btn-text-icon bmenu',
menu : {items: [
{text: 'Search Jobs', handler: onItemClick},
{text: 'Search CVs', handler: onItemClick}
]}
})
);
function onButtonClick(btn){
Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
}
function onItemClick(item){
Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
}
});
Any help would really be appriciated!
Thanks in advance
Nick[/b]