Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Left Nav Menu Problem

Status
Not open for further replies.

sue0912

MIS
Jun 19, 2007
50
US
Hi,

I have really screwed up my css file. I have a nice little menu on the left side of the css file. Menu expands and collapes with the help of a java script which I did not include.

My problem is that when I expand the menu the information in my Content tag exapands along with the menu.

How do I arrange my <div> tags to make the menu expand and collapse when the user wants it to but the content on the right side stays.

HTML PAGE
<div id="leftnav">
<h2>Emerald</h2>
<div class="leftlink"><a href="manuf.html">Equipment</a>
</div>
<a class="msg_head">By Brand</a>
<div style="display: none;" class="s2">
<div class="leftlink3">
<a href="pegson.html" title="Pegson">Pegson</a></div> <div class="leftlink3">
<a href="powerscreen.html" title="Powerscreen">Powerscreen</a></div> <div class="leftlink3">
<a href="#" title="Click to View Cedarapdis">Cedarapids</a></div>
</div>

<a class="msg_head">By Application</a>
<div style="display: none;" class="s2">

<a class="msg_head" title="Click to Crushing Impactor">Crushing/Impactor</a>
<div style="display: none" class="s2">

<div class="leftlink3">
<a href="#" title="Click to View Crushing Impactor">XH250</a></div>

<div class="leftlink3">
<a href="#" title="Click to View Crushing Impactor">XH320 & XH320SR</a></div>

<div class="leftlink3">
<a href="#" title="Click to View Crushing Impactor">XH500 & XH500SR</a></div>

<div class="leftlink3">
<a href="#" title="Click to View Crushing Impactor">XV350</a></div>
</div>

<a class="msg_head" title="Click to View Crushing Jaw">Crushing/Jaw</a>
<div style="display: none" class="s2">
<div class="leftlink3">
<a href="#" title="Click to View Crushing Jaw">Metrotrak & Metrotrak HA</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Crushing Jaw">XA750</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Crushing Jaw">XA400S & XR400S</a>
</div>
</div>
<div class="leftlink">
<a href="videos.html">Equipment Videos</a>
</div>

<div class="leftlink">
<a href="used_equipment.cfm">Used Equipment</a>
</div>
</div>
<div id="content">
<h2>Welcome to <span style="font-weight:bold; color:#00234C;">Emerald</span></h2></div>

CSS CODE
html, body {
margin : 0;
padding : 0;
}
body {
font : 73% "Trebuchet MS", Arial, Helvetica, Tahoma, sans-serif;
background-image: url(images/bg_tile.gif);
background-repeat:repeat-x repeat-y;
}
/*WRAP*/
#container {
width : 800px;
margin : 0 auto;
border : 5px solid #00234c;
line-height : 2em;
color : #000;
background-color: #FFFFFF;
}
/*TOP BANNER*/
#top {
padding : 0;
height : 100px;
color : #00234c;
background-color: #FFFFFF;
background-image: url(images/ees_logo.jpg);
background-repeat: no-repeat;
}
#top h1 {
padding : 5px 0 0 25px;
margin : 0;
font-size : 140%;
letter-spacing : 5px;
}
/*TOP NAVIGATION*/
#navcontainer {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #00234c;
}
#navcontainer ul {
text-align : center;
padding-bottom : 3px;
padding-top : 3px;
padding-left : 0;
margin-top : 0;
margin-bottom : 0;
margin-left : 0;
color : white;
width : 100%;
font-family : Arial, Helvetica, sans-serif;
line-height : 18px;
background-color: #00234C;
}
#navcontainer ul li {
display : inline;
padding-left : 0;
padding-right : 0;
padding-bottom : 5px;
padding-top : 5px;
}
#navcontainer ul li a {
padding-left : 10px;
padding-right : 10px;
padding-bottom : 5px;
padding-top : 5px;
color : white;
text-decoration : none;
border-right : 1px solid #fff;
}
#navcontainer ul li a:hover {
background : #369;
color : white;
}
#navcontainer #active {
border-left : 1px solid #fff;
}

/*MAIN CONTENT*/
#content {
width: 475px;
margin-left : 200px;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #00234C;
top:0;
left:-25px;
margin-right:-25px;
}
padding: 1em;
}
#content p {
padding : 0 2em 0 2em;
}


/*LEFT SIDEBAR
#leftnav {
float : left;
width : 200px;
margin : 0;
padding : 1em;
}
#leftnav p {
margin : 0 0 1em 0;
}
#leftnavmenu {
list-style : none;
float : left;
width : 200px;
margin : 30px 0 30px 0;
padding : 0;
font-size : 0.9em;
}
#leftnavmenu ul {
list-style : none;
width : 150px;
margin : 0 0 20px 0;
padding : 0;
font-size : 1.1em;
}
#leftnavmenu li {
margin-bottom : 2px;
}
#leftnavmenu li a {
font-weight : bold;
height : 20px;
text-decoration : none;
color : #505050;
background : #eaeaea url(images/up.gif) no-repeat left center;
display : block;
padding : 4px 0 0 30px;
border-left : 0 solid #8fb8cc;
}
#leftnavmenu li a:hover {
background : #8fb8cc url(images/right.gif) no-repeat left center;
color : #fff;
border-left : 0 solid #003366;
} */

#leftnav {
width: 160px;
height: auto;
position: relative;
background-color:#FFFFFF;
padding:25px 10px 0px 10px;
top:0;
font-size:11px;
line-height:13px;
left:8px;
}
.leftlink3{
width:160px;
padding:0px;
height:auto;
font-size:12px;
line-height:20px;
border-bottom:1px solid #e5e5e5;
color:#ffffff;
}
.leftlink3 a{
display:block;
width:124px;
height:auto;
color:#999999;
text-decoration:none;
padding-left:36px;
background-image: url(images/left_links5.gif);
background-repeat:no-repeat;
background-position:left;
}
.leftlink3 a:hover{
color:#182038;
text-decoration:none;
padding-left:36px;
background-image: url(images/left_links5.gif);
background-repeat:no-repeat;
background-position:right;
}
.leftlink3 a.current{
background-color:#edf0f3;
background-image: url(images/left_links6.gif);
background-repeat:no-repeat;
background-position:left;
color: #333333 ;
}
.leftlink3 a.current:hover{
background-color:#edf0f3;
background-image: url(images/left_links6.gif);
background-repeat:no-repeat;
background-position:right;
color: #333333 ;
}
a.msg_head, a.msg_head:active{
width:136px;
padding:0px;
position:relative;
top:0px;
height:auto;
font-size:12px;
display:block;
cursor:pointer;
line-height:20px;
border-bottom:1px solid #e5e5e5;
left:0px;
text-decoration:none;
padding-left:24px;
color:#999999;
background-image: url(images/left_links3.gif);
background-repeat:no-repeat;
background-position:left;
}
a.msg_head:hover{
padding-left:24px;
cursor:pointer;
color:#182038;
background-image: url(images/left_links3.gif);
background-repeat:no-repeat;
background-position:right;
}

.leftlink{
width:160px;
padding:0px;
position:relative;
top:0px;
height:auto;
font-size:12px;
line-height:20px;
border-bottom:1px solid #e5e5e5;
left:0px;
color:#ffffff;
}
.leftlink a{
display:block;
width:148px;
height:auto;
color:#999999;
text-decoration:none;
padding-left:12px;
background-image: url(images/left_links2.gif);
background-repeat:no-repeat;
background-position:left;
}
.leftlink a:hover{
color:#182038;
text-decoration:none;
padding-left:12px;
background-image: url(images/left_links2.gif);
background-repeat:no-repeat;
background-position:right;
}
.leftlink a.current{
display:block;
width:148px;
height:auto;
color:#182038;
text-decoration:none;
padding-left:12px;
background-image: url(images/left_links8.gif);
background-color:#edf0f3;
background-repeat:no-repeat;
background-position:left;
}
.leftlink a.current:hover{
display:block;
width:148px;
height:auto;
color:#182038;
text-decoration:none;
padding-left:12px;
background-image: url(images/left_links8.gif);
background-color:#edf0f3;
background-repeat:no-repeat;
background-position:right;
}
#s2{
width:160px;
margin-top:0px;
min-height:200px;
height:200px;
padding:0px 0px 0px 0px;
font-size:11px;
line-height:13px;
visibility:hidden;
}


/*FOOTER*/
#footer {
clear : both;
margin : 0;
padding : 0;
font-size : 1.0em;
color : #000000;
background-color: #FFFFFF;
text-align: center;
vertical-align: middle;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #00234C;
}
* > html #footer img {
margin : 0;
}
#footer p {
padding : 0 0 0 5px;
}
/*TYPOGRAPHY*/
h2 {
margin : 1em 0 0.5em 0;
font-size : 130%;
letter-spacing : 5px;
}
blockquote {
padding : 5px;
font-weight : bold;
font-style : italic;
color : #000;
}

.quote {
border-top : 1px solid #dc291e;
padding : 10px;
color : #036;
}
/*SEARH BAR*/
form {
float : right;
margin-bottom : 15px;
margin-right : 15px;
}
input.search {
width : 100px;
border : none;
background : url(images/input.gif);
padding : 4px;
}
input.login {
width : 75px;
border : none;
background : url(images/logininput.gif);
padding : 4px;
}
/*LINKS*/
a:link, a:visited {
color : #000000;
background : transparent;
text-decoration : none;
}
a:hover {
color : #036;
background : #FFFFFF;
text-decoration : none;
}
a img {
border : none;
}
/*IMAGESS*/
.imgleft {
float : left;
padding : 5px;
margin-right : 10px;
}
/*CLASS*/
.post {
background-color : #FFFFFF;
padding : 3px;
margin : 20px 10px 0 5px;
border : 0 dashed #8a795d;
font-size : 80%;
}
.post .date {
background : url(images/clock.gif) no-repeat left center;
padding-left : 15px;
margin : 0 15px 0 5px;
}
.post .comments {
background : url(images/comment.gif) no-repeat left center;
padding-left : 15px;
margin : 0 15px 0 5px;
}
.post .readmore {
background : url(images/document.gif) no-repeat left center;
padding-left : 15px;
margin : 0 15px 0 5px;
}

Any help would be greatly appreciated. I am not use to using CSS files.

Thanks
Sue
 
If it's possible take a look at some Javascript framework like EXT-JS ( Such kind of expandable/collapsible things are child's play using frameworks like these.

My suggestion would be to integrate such a framework in your code rather than re-inventing the wheel.

Nitin
 
Hi again,

Ok. I started the file again. My html css code is below. My menu now overlaps the footer div tag when it is expanded. I am not sure what I am doing wrong.

Sorry to keep asking for help but css is really not my expertise.

Thanks Sue

CSS Code

html, body {
margin : 0;
padding : 0;
}
body {
font : 73% "Trebuchet MS", Arial, Helvetica, Tahoma, sans-serif;
background-color: #ffffff;
background-image: url(images/bg2.gif);
background-repeat: repeat-y;
background-position: center top;
}
/*WRAP*/
#container {
width : 750px;
margin : 0 auto;
border : 10px solid #fff;
line-height : 2em;
color : #666;
background-color: #fff;
}
/*TOP BANNER*/
#top {
padding : 0;
height : 100px;
color : #484500;
background-color: #f36800;
background-image: url(images/head2.jpg);
background-repeat: no-repeat;
}
#top h1 {
padding : 5px 0 0 25px;
margin : 0;
font-size : 140%;
letter-spacing : 5px;
}
/*TOP NAVIGATION*/
#navcontainer {
border-bottom : 10px solid #fff;
}
#navcontainer ul {
text-align : center;
padding-bottom : 5px;
padding-top : 5px;
padding-left : 0;
margin-top : 0;
margin-bottom : 0;
margin-left : 0;
color : white;
width : 100%;
font-family : Arial, Helvetica, sans-serif;
line-height : 18px;
background-color: #dc291e;
}
#navcontainer ul li {
display : inline;
padding-left : 0;
padding-right : 0;
padding-bottom : 5px;
padding-top : 5px;
}
#navcontainer ul li a {
padding-left : 10px;
padding-right : 10px;
padding-bottom : 5px;
padding-top : 5px;
color : white;
text-decoration : none;
border-right : 1px solid #fff;
}
#navcontainer ul li a:hover {
background : #369;
color : white;
}
#navcontainer #active {
border-left : 1px solid #fff;
}
/*LEFT SIDEBAR*/
#leftnav {
float : left;
width : 200px;
margin : 0;
padding : 1em;
}
#leftnav p {
margin : 0 0 1em 0;
}
#leftnavmenu {
list-style : none;
float : left;
width : 200px;
margin : 30px 0 30px 0;
padding : 0;
font-size : 0.9em;
}
#leftnavmenu ul {
list-style : none;
width : 150px;
margin : 0 0 20px 0;
padding : 0;
font-size : 1.1em;
}
#leftnavmenu li {
margin-bottom : 2px;
}
#leftnavmenu li a {
font-weight : bold;
height : 20px;
text-decoration : none;
color : #505050;
background : #eaeaea url(images/up.gif) no-repeat left center;
display : block;
padding : 4px 0 0 30px;
border-left : 0 solid #8fb8cc;
}
#leftnavmenu li a:hover {
background : #8fb8cc url(images/right.gif) no-repeat left center;
color : #fff;
border-left : 0 solid #003366;
}
/*MAIN CONTENT*/
#contentleft {
width: 195px;
height: auto;
position: relative;
background-image:url(../images/leftbar_grad.png);
background-repeat: repeat-y;
background-position:left;
top:0;
left:0;
float:left;
z-index:1;
}

#leftnav {
width: 160px;
min-height:200px;
height: 200px;
position: relative;
background-color:#FFFFFF;
padding:25px 10px 0px 10px;
top:0;
font-size:11px;
line-height:13px;
left:15px;
}

.leftlink{
width:160px;
padding:0px;
position:relative;
top:0px;
height:auto;
font-size:12px;
line-height:20px;
border-bottom:1px solid #e5e5e5;
left:0px;
color:#ffffff;
}
.leftlink a{
display:block;
width:148px;
height:auto;
color:#999999;
text-decoration:none;
padding-left:12px;
background-image: url(../images/left_links2.gif);
background-repeat:no-repeat;
background-position:left;
}
.leftlink a:hover{
color:#182038;
text-decoration:none;
padding-left:12px;
background-image: url(../images/left_links2.gif);
background-repeat:no-repeat;
background-position:right;
}
.leftlink a.current{
display:block;
width:148px;
height:auto;
color:#182038;
text-decoration:none;
padding-left:12px;
background-image: url(../images/left_links8.gif);
background-color:#edf0f3;
background-repeat:no-repeat;
background-position:left;
}
.leftlink a.current:hover{
display:block;
width:148px;
height:auto;
color:#182038;
text-decoration:none;
padding-left:12px;
background-image: url(../images/left_links8.gif);
background-color:#edf0f3;
background-repeat:no-repeat;
background-position:right;
}
a.msg_head, a.msg_head:active{
width:136px;
padding:0px;
position:relative;
top:0px;
height:auto;
font-size:12px;
display:block;
cursor:pointer;
line-height:20px;
border-bottom:1px solid #e5e5e5;
left:0px;
text-decoration:none;
padding-left:24px;
color:#999999;
background-image: url(../images/left_links3.gif);
background-repeat:no-repeat;
background-position:left;
}
a.msg_head:hover{
padding-left:24px;
cursor:pointer;
color:#182038;
background-image: url(../images/left_links3.gif);
background-repeat:no-repeat;
background-position:right;
}

#s2{
width:160px;
margin-top:0px;
min-height:200px;
height:200px;
padding:0px 0px 0px 0px;
font-size:11px;
line-height:13px;
visibility:hidden;
}

.leftlink3{
width:160px;
padding:0px;
height:auto;
font-size:12px;
line-height:20px;
border-bottom:1px solid #e5e5e5;
color:#ffffff;
}
.leftlink3 a{
display:block;
width:124px;
height:auto;
color:#999999;
text-decoration:none;
padding-left:36px;
background-image: url(../images/left_links5.gif);
background-repeat:no-repeat;
background-position:left;
}
.leftlink3 a:hover{
color:#182038;
text-decoration:none;
padding-left:36px;
background-image: url(../images/left_links5.gif);
background-repeat:no-repeat;
background-position:right;
}
.leftlink3 a.current{
background-color:#edf0f3;
background-image: url(../images/left_links6.gif);
background-repeat:no-repeat;
background-position:left;
color: #333333 ;
}
.leftlink3 a.current:hover{
background-color:#edf0f3;
background-image: url(../images/left_links6.gif);
background-repeat:no-repeat;
background-position:right;
color: #333333 ;
}

#content {
margin-left : 240px;
border-left : 10px solid #fff;
padding : 1em;
}
#content p {
padding : 0 2em 0 2em;
}
/*FOOTER*/
#footer {
height:auto;
clear : both;
margin : 0;
padding : 0;
font-size : 1.0em;
border-top : 10px solid #fff;
color : #000000;
background-color: #ffffff;
text-align: center;
vertical-align: middle;
}
* > html #footer img {
margin : 0;
}
#footer p {
padding : 0 0 0 5px;
}
/*TYPOGRAPHY*/
h2 {
margin : 1em 0 0.5em 0;
font-size : 130%;
letter-spacing : 5px;
}
blockquote {
padding : 5px;
font-weight : bold;
font-style : italic;
color : #b29b35;
}

.quote {
border-top : 1px solid #dc291e;
padding : 10px;
color : #036;
}
/*SEARH BAR*/
form {
float : right;
margin-bottom : 20px;
margin-right : 15px;
}
input.search {
width : 100px;
border : none;
background : url(images/input.gif);
padding : 4px;
}
input.login {
width : 75px;
border : none;
background : url(images/logininput.gif);
padding : 4px;
}
/*LINKS*/
a:link, a:visited {
color : #000000;
background : transparent;
text-decoration : none;
}
a:hover {
color : #036;
background : #dc291e;
text-decoration : none;
}
a img {
border : none;
}
/*IMAGESS*/
.imgleft {
float : left;
padding : 5px;
margin-right : 10px;
}
/*CLASS*/
.post {
background-color : #ffffcc;
padding : 3px;
margin : 20px 10px 0 5px;
border : 0 dashed #8a795d;
font-size : 80%;
}
.post .date {
background : url(images/clock.gif) no-repeat left center;
padding-left : 15px;
margin : 0 15px 0 5px;
}
.post .comments {
background : url(images/comment.gif) no-repeat left center;
padding-left : 15px;
margin : 0 15px 0 5px;
}
.post .readmore {
background : url(images/document.gif) no-repeat left center;
padding-left : 15px;
margin : 0 15px 0 5px;
}

HTML Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns=" lang="en"><head>


<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="price_files/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="index_files/jquery-1.js"></script>
<script type="text/javascript" src="index_files/jquery.js"></script>
<script type="text/javascript" src="index_files/jqueryslide.js"></script>
<script type="text/javascript" src="index_files/galleriasetup.js"></script>

<script type="text/javascript" src="index_files/ufo.js"></script>

</head><body bgcolor="">
<div id="container">
<div id="top">
<h1>&nbsp;</h1>
<div class="search">
<form method="post" action="#">
<p>
<input name="search" value="demo only" class="search" type="text">
<input value="Search" class="searchSubmit" type="submit">
</p>
</form>
</div>
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Dealers</a></li>
<li><a href="#">Online Catalog</a></li>
<li><a href="#">Fire Related Links</a></li>
</ul>
</div>
<div id="leftnav">
<img style="margin-bottom: 10px;" src="index_files/machinery.gif" alt="New Machinery">
<div class="leftlink">
<a href="#">Why Blue</a>
</div>
<div class="leftlink">
<a href="#">Products</a>
</div>

<a class="msg_head">By Brand</a>
<div style="display: none;" class="s2">

<div class="leftlink3">
<a href="#" title="Click to View Nihot">Nihot</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View CUB">CUB</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Terex Pegson">Terex Pegson</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Powerscreen">Powerscreen</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Doppstadt">Doppstadt</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Kiverco">Kiverco</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Telestack">Telestack</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View General Kinematics">General Kinematics</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Pellenc">Pellenc</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Marathon">Marathon</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Backhus">Backhus</a>
</div>

</div>

<a class="msg_head">By Application</a>
<div style="display: none;" class="s2">

<div class="leftlink3">
<a href="#" title="Click to View Crushing">Crushing</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Screening">Screening</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Washing">Washing</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Shredding">Shredding</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Composting">Composting</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Trommels">Trommels</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View RDF Process">RDF Process</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Waste Systems">Waste Systems</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Air Seperation">Air Seperation</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Stockpiling">Stockpiling</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Optical Sorting">Optical Sorting</a>
</div>

<div class="leftlink3">
<a href="#" title="Click to View Bailing">Bailing</a>
</div>
</div> <div class="leftlink">
<a href="#">Product Videos</a>
</div>
<div class="leftlink">
<a href="#">Used Machinery</a>
</div>
</div>
<div id="content">

</div>
<div id="footer">
<p><a href="#">homepage</a> | <a href="#">contact</a><br>
© 2010 company | 123 main street | Syracuse, New York | 13090 | 315-555-5555 | <a href="mailto:info@yourcompany.com">info@yourcompany.com</a></p>
</div></div>
</body></html>
 
Do you really not want to use the tried and proven methods such as Suckerflish dropdowns already mentioned above? It would save you much work and produce a better code.

If Suckerfish is not the mechanism you're after, could you please explain again what you're after? Also, I see you're using jquery. Is there no jquery plugin, which will do what you want?

If you could provide a link of the example and tell us how it should work, it also might be easier for us to debug.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
I think I understand what you are trying to tell me. Suckerfish produces a better menu, as mine is probably not the best.

With that aside I guess my question is more about the layout itself.

How do I get the footer tag to expand also when the menu is clicked on?

Or does it not work that way.

Sue
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top