Need some help with Ajax Content script

[alexandros]

1) Script Title: Dynamic Drive DHTML(dynamic html)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem:

Hello

I am building a page using this code,
and i've managed to make a bit of a mess with CSS.
I am a designer and not a coder, so excuse the lack of knowledge here.

What I'm trying to do is have a menu DIV (#menu, .menu) which carries it's own set of CSS rules and
a container (#container, .container) which carries another set of rules.

The problem is that the set of rules #menu has are overruled by the #container's CSS (In dreamweaver, because when I preview it i'm not sure which CSS it follows...)

At this moment, I've got all CSS in one file which the main page references like this :

<link href="kitecss.css" rel="stylesheet" type="text/css" />


I never managed to use the

<a href="javascript:ajaxpage('test.htm', 'contentarea'); loadobjs('external.css', 'feature.js')">test</a>
<div id="contentarea"></div>

it simply does NOT work for some reason.



I am pasting the CSS here :
#logo {
position: absolute;
left: 620px;
top: 55px;
}

#menu {
position:absolute;
top:55px;
width: 450px;
height: 13px;
font-size: 12px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
letter-spacing: 0.1em;
line-height:13px;
word-spacing: 0px;
color: #333;
text-align:justify;
margin-left: 50px;
}
.menu{}
a:link {
color: #FFF;
text-decoration: none;
background-color: #000;
font-size: 12px;
}
a:visited {
text-decoration:none;
color: #333;
}

a:hover {
color: #FFF;
background-color: #900;
font-size: 12px;
}
a:active {
text-decoration: none;
background-color: #999;
color: #000;
}
#container
{
position:absolute;
width:550px;
height:500px;
line-height:13px;
text-align:left;
top: 100px;
left:60px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 0.2px;
line-height:14px;

}
.container {}
a:link {
color: #FFF;
text-decoration: none;
background-color: #000;
}
a:visited {
text-decoration:none;
color: #333;
}

a:hover {
text-decoration: none;
color: #FFF;
background-color: #900;
font-size: 12px;
}
a:active {
text-decoration: none;
background-color: #999;
color: #000;
}
.text {
font-size: 24px;
line-height: 0.8;
}
.black {
font-size: 10px;
font-style: italic;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
letter-spacing: 0.2em;
background-color: #000;
color: #FFF;
}
.blacknormal {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
background-color: #000;
letter-spacing: 1px;
line-height: 1.1;
}
@charset "UTF-8";
/* CSS Document */




and this is how my main page looks like
:


<div id="menu" class="menu">

<a href="javascript:ajaxpage('home.html', 'container')">home</a>
<a href="javascript:ajaxpage('about.html', 'container')">about</a>
<a href="javascript:ajaxpage('events.html', 'container') ">events</a>
<a href="javascript:ajaxpage('gallery.html', 'container')">gallery</a>
<a href="javascript:ajaxpage('support.html', 'container')">support</a>
</div>

<div id="container" class="container"></div>



Anyone? Some help
??

Many thanks for your time!

[alexandros]

Anyone???
!
I really need to move beyond this...it feels like it's too simple to give up on...