Help with Resizing and Menu Placement

stevesumpter · #1 11.09.2007, 01:42

----
I need to know how to use coolmenus and divisions (CSS)and get the menu to always appear over the navigation division (on the left side)in the page. I'm using a header, two columns for the navigation and the content, and a footer setup with css and divisions. I can't get the menu to stay directly on top of the navigational section. Someone please help!!!!

I'm using index.html for my home page, I have a css file (css/styles.css)
----
I'm relatively new to some of this crazy coding, but do have some knowledge and have been working on this problem all day and are about to pull my hair out!!!

I'm trying to make a page for my Fire Department and need an answer fast. It would be greatly appreciated.

I am not using tables at all right now, but if I have to, I will.

THE INDEX CODE AND CSS CODE IS INCLUDED BELOW (IF YOU NEED THE MENUPROP.JS CODE LET ME KNOW):

INDEX.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>testing with the new cool menus</title>

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

<style>
/* CoolMenus 4 - default styles - do not edit */
.clCMEvent{position:absolute; width:99%; height:99%; clip:rect(0,100%,100%,0); left:0; top:0; visibility:visible}
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */

/*Style for the background-bar*/
.clBar{position:absolute; width:10; height:10; background-color:#FF9900; layer-background-color:#FF9900; visibility:hidden}

/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding:1px; font-family:tahoma,arial,helvetica; font-size:12px; font-weight:bold}
.clLevel0{color:#336699;}
.clLevel0over{background-color:#336699; layer-background-color:#336699; color:#FF9900; cursor

ointer; cursor:hand; }

/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; width:180; padding:2px; font-family:tahoma, arial,helvetica; font-size:11px; font-weight:bold}
.clLevel1{background-color:#FF9900; layer-background-color:#FF9900; color:#336699;}
.clLevel1over{background-color:#336699; layer-background-color:#336699; color:#FF9900; cursor

ointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}

/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:Yellow; cursor

ointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}
</style>

<script language="JavaScript1.2" src="menu/coolmenus4.js">
/************************************************** ***************************
Copyright (c) 2001 Thomas Brattli (webmaster@dhtmlcentral.com)

DHTML coolMenus - Get it at coolmenus.dhtmlcentral.com
Version 4.0_beta
This script can be used freely as long as all copyright messages are
intact.

Extra info - Coolmenus reference/help - Extra links to help files ****
CSS help: http://192.168.1.31/projects/coolmen...rence.asp?m=37
General: http://coolmenus.dhtmlcentral.com/reference.asp?m=35
Menu properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=47
Level properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=48
Background bar properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=49
Item properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=50
************************************************** ****************************/
</script>

</head>

<body>

<script language="JavaScript1.2" src="menu/menuprop.js"></script>

<div id="whole">
<div id="header">this is the header area.
</div>
<div id="navigation">This is the Navigation section.

</div>
<div id="content">This is the content of the site.<br>
This is where all of the
content would go; including the gun pictures.</p>
Some more without the p's.<br>

line number two without the p.<br>
line number three without the p.<br>
line number four without the p.<br>
line number five without the p.<br>
The last line. just filling some space.<br>
The last line. just filling some space.<br>

The last line. just filling some space.<br>
The last line. just filling some space.<br>
The last line. just filling some space.<br>
The last line. just filling some space.<br>
The last line. just filling some space.<br>
The last line. just filling some space.<br>
The last line. just filling some space.<br>
</div>
<div id="footer">This is the footer section.

</div>
</div>

</body>

</html>

END OF INDEX.HTML

CSS/STYLES.CSS

div {
border: 0px solid Black;
}
body {
margin: 0 auto;
width: 800px;
background-color: gray;
}
#header {
background-color: white;
padding: 5px;
height: 150px;
}
#navigation {
padding: 5px;
float: left;
width: 190px;
height: 400px;
background-color: blue;
}

}
#content {
padding: 5px;
float: left;
width: 590px;
background-color: purple;
margin-left: 200
}
#footer {
padding: 5px;
clear: both;
background-color: black;
color: white;
font: 12px arial;
}
#whole {
background-color: yellow;
width: 800px;
padding: 0px;

}

END OF CSS/STYLES.CSS

THANK YOU VERY MUCH IF YOU TOOK THE TIME TO READ OR HELP ME WITH THIS. YOU DON'T KNOW HOW MUCH IT MEANS TO ME!!!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode