Sun, 2008-03-02 16:27
My site has a basic layout of header, left dropdown style menu, right content and footer. I am attempting to place a "News" section in the empty space inbetween the menu and footer that appears when the drop down menu is collapsed, then have the news section and footer be "pushed" down as the menu expands. Currently the menu pushes everything out of the way even when it is collapsed, or just ignores and goes underneath.
The site: http://www.espm.umn.edu
Any help would be greatly appreciated, thank you.
The HTML:
U of M: Environmental Sciences, Policy, Management
function toggleMenu(currMenu) {
if (document.getElementById) {
thisMenu = document.getElementById(currMenu).style
if(thisMenu.display == "block") {
thisMenu.display = "none"
}
else {
thisMenu.display = "block"
}
return false
}
else {
return true
}
}
Welcome to Environmental Sciences, Policy and Management (ESPM) at the University of Minnesota! As the University's premier environment major, our goal is to train the next generation of environmental professionals and leaders through a strong focus on interdisciplinary knowledge, research, and enrichment experiences. ESPM students gain a broad perspective of environmental issues through coursework in the basic and applied sciences, environmental policy, management, business, communication, and law before choosing one of five tracks to focus their studies around:
- Conservation and Resource Management
- Corporate Environmental Management
- Environmental Education and Communication
- Environmental Science
- Policy, Planning, Law and Society
Our world is facing many complex environmental challenges, and possible solutions will require the creativity and energy of forward-thinking people. Join our ESPM community and prepare for careers where you can make a difference that will affect our collective future!
News and Events
The Pioneer Press ran an article on the ESPM class project involving development of the Rice Creek Water Trail. Congratulations on all your hard work!
The article can be viewed in it's entirety at: http://www.twincities.com/localnews/ci_8280373
News and Events
2005 Regents of the University of Minnesota. All rights reserved. Trouble seeing the text? | Contact U of M | Privacy
The University of Minnesota is an equal opportunity educator and employer.
The CSS:
#container {
width: auto;
height: auto;
background-repeat: repeat;
background-image: url(../images/bg.png);
left:0px;
right:auto;
position: relative;
}
.news{
width: 200px;
height:auto;
background-color:#00FF99;
border: 1px;
border-color:#666666;
position:relative;
top-margin: -100px;
}
.content{
width: 580px;
height: auto;
background-color: #e0ede7;
border-width: 1px;
border-style: solid;
border-color: #9fbdaf;
position: relative;
left: 215px;
top: 0px;
}
#menuContainer{
width: 200px;
height: auto;
background-color:#6aaa82;
border-width: 1px;
border-style: solid;
border-color: #4f8162;
margin-left: 5px;
top: 170px;
position: absolute;
}
.menu {
display: none;
margin-left: 0px;
}
/*dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}*/
#menu {
width: 200px;
position: static;
margin: 0;
top: 0;
left: 0;
}
#menu dt {
margin: 0;
list-style-type: none;
height: auto;
text-align: left;
font-weight: bold;
border: none;
background: #6aaa82;
}
#menu dd {
border: none;
}
#menu li {
margin-left: -40px;
list-style-type: none;
position:relative;
background: #103d21;
}
/*menu dt controls the design of the main menu catagories*/
#menu dt a {
font-size: 15px;
color: #103d21;
text-decoration: none;
display: block;
border: none;
height:auto;
}
/*menu li controls the design of the subcatagories*/
#menu li a {
font-size: 14px;
color: #60aa7c;
display: none;
text-decoration: none;
display: block;
border-top: solid;
border-top-width: 2px;
border-top-color:#5e846c;
height: auto;
}
/*This contols the roll-over for both the main and subcatagories of the menu*/
#menu li a:hover, #menu dt a:hover {
background: #bbefcf;
}
#headerT{
width: 800px;
height: 30px;
background-color:#63A46C;
top: 0px;
left: 0px;
right: auto;
position: relative;
}
#headerB{
width: 800px;
height: 30px;
background-color:#63A46C;
top: 0px;
left: 0px;
right: auto;
position: relative;
}