No replies
agammill
agammill's picture
Offline
newbie
Austin
Last seen: 13 years 35 weeks ago
Austin
Joined: 2008-02-15
Posts: 3
Points: 0

I'm designing a website for a friend and I had a menu on the left and a div of text on the right. Everything worked great until he wanted me to increase the size of the menu.

Now the two will not sit side by side eventhough I have reduced the size of the text div to fit. If I use a table, the menu will show correctly, but then the menu inside the table isn't flush to the left.

I'd prefer not to use the table.

The problem appears to be with the CSS div id="MainText-right" and .glossymenu

Here's the HTML code (and below that the CSS):

Focused Engineering

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal" //speed of animation: "fast", "normal", or "slow"
})




 



Home
Development Services

Staffing Services
Hardware/Software
Our Staff

References
Contact Us

Our Services

Focused Engineering has talent on staff with extensive background in system integration using National Instruments products. From hardware design to software services, Focused Engineering has the talent you need to get your industrial control or automated test application up and running quickly, and with minimal expense to you. We run a lean organization geared toward the customer's needs. Let us take a look at your computerized automation problems, and show you how we can solve it better.

As a National Instruments Alliance partner, we staff certified LabVIEW developers capable of creating intuitive custom interfaces specific to your need. We work closely with our customers and take their specific situation into account. From the LabVIEW software, to the hardware needed to control your application, Focused Engineering has the talent to make it happen quickly and within your budget.

 


Here's the CSS:

** Global
**------------------------------------------------------------*/
body {
}
/*------------------------------------------------------------*
** Main Container
**------------------------------------------------------------*/
#Container {
width: 763px;
text-align: justify;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
padding: 10px;
border: 0px solid #CCCCCC;
}
.LEFTMENU {
}

/*------------------------------------------------------------*
** Main Container
**------------------------------------------------------------*/
#Top{
padding: 0px;
}
#Top img{
float: left;
}
#Top h1{
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 8px;
font-weight: bold;
color: #FC7316;
font-style: normal;
line-height: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
}
#Top h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #004080;
margin: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
font-weight: bold;
}
/*------------------------------------------------------------*
** Top Navigation
**------------------------------------------------------------*/
#nav
{
height: inherit;
background-color: #EFEFEF;
width: 761px;

}

/*------------------------------------------------------------*
** MainText
**------------------------------------------------------------*/
/* Container Start*/
div#MainText {
width: 761px;
float:left;
padding-bottom: 0px;

}
div#MainText h1{
font-family: "Trebuchet MS", Verdana, Arial;
font-size: 16px;
font-weight: bold;
color: #004080;
margin-top: 10px;

}
/* Menu Item*/

.glossymenu{
margin: 5px 0;
padding: 0;
width: 220px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu a.menuitem{
background: black url(images/glossyback6.gif) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 20px;
text-decoration: none;
}

.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: black;
}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
left: -17px;
border: none;
}

.glossymenu a.menuitem:hover{
background: white;
color: #FF8000;
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: #B4EDFA;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}

.glossymenu div.submenu ul li{
border-bottom: 1px solid blue;
}

.glossymenu div.submenu ul li a{
display: block;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 33px;
}

.glossymenu div.submenu ul li a:hover{
background: white;
color: #FF8000;
}

/* STYLES*/
.style1 {font-size: 24px}
.style2 {color: #0000FF}
.style3 {color: #408080; }

/* Container Right Start*/

div#MainText-right {
text-indent: 8pt;
clear: both;
width: 490px;
float: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #666666;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 0px;
margin-left: 5px;
line-height: 18px;
}

/*------------------------------------------------------------*
** Footer
**------------------------------------------------------------*/
div#Footer {
width: 761px;
clear: both;
}
div#Footer p{
padding: 5px;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #949494;
}
div#Footer a{
color: #0000FF;
text-decoration: none;
}
div#Footer a:hover{
color: #005787;
text-decoration: none;
}