SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question One div OVER another??

    Hi -
    This might be an easy one-

    I have a navigational menu in a div just above an image -

    I want the dropdown in the navigational menu to dropdown OVER the image but at the moment it moves the whole image down!

    Heres the code: (sorry its quite a lot - will try upload to hosting space)


    Code:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Julia's homepage</title>
    <script type="text/javascript">
    activateMenu = function(nav) {
     /* currentStyle restricts the Javascript to IE only */
     if (document.all && document.getElementById(nav).currentStyle) {  
      var navroot = document.getElementById(nav);
      
      /* Get all the list items within the menu */
      var lis=navroot.getElementsByTagName("LI");  
      for (i=0; i<lis.length; i++) {
      
    	 /* If the LI has another menu level */
       if(lis[i].lastChild.tagName=="UL"){
       
    	/* assign the function to the LI */
    	 lis[i].onmouseover=function() { 
    	
    	   /* display the inner menu */
    	   this.lastChild.style.display="block";
    	}
    	lis[i].onmouseout=function() {		
    	   this.lastChild.style.display="none";
    	}
       }
      }
     }
    }
    window.onload= function(){
     /* pass the function the id of the top level UL */
     /* remove one, when only using one menu */
     activateMenu('nav'); 
     activateMenu('vertnav'); 
    }
    </script> 
     
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
     
    #nav {
    list-style: none;
    margin-left:100px;  /*to move this menu a little bit to the right*/
    }
     
    #nav ul { 
      padding: 0;
      margin:0;
      list-style: none;
      width:12em;
      z-index:99;
      position:relative;
      overflow:visible; 
    } 
    
    #nav li { 
      margin:0; 
      position: relative; 
      float:left; 
      width: 12em;
      background-color:#fff;
      border:solid 1px #ccc; 
      display:block;
      height:auto;
    } 
    
    #nav ul li{ border-width:1px 1px 0 0;margin-right:-1px} 
    #nav ul ul li{ border-width:1px 1px 1px 1px;} 
    #nav ul ul li:last-child{border-bottom:1px solid #666;} 
    #nav a { 
      text-decoration:none; 
      display:block;
      padding: 0.1em; 
      margin:0.2em 0 0.2em 0.1em; 
      width:11.5em; 
      height:1em;
    } 
    
    #nav a:hover, #nav li:hover{ 
      background-color:#CCC; 
      filter:alpha(opacity=40);  /*to make the Background color & text transparent on hover*/
      -moz-opacity:.40;
      opacity:.40;  
    } 
    
    #nav ul li:hover, #nav ul li a:hover{ 
      background-color:#CCC; 
    } 
    
    #nav ul{ 
      display:none; 
    } 
    
    /*all see this */
    #nav ul ul{ 
      display:none; 
      position:absolute; 
      margin-top:-1.8em; 
      margin-left:12em; 
    } 
    
    /* non-IE browsers see this */ 
    #nav ul li>ul, #nav ul ul li>ul{ 
      margin-top:-1.4em; 
    } 
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul{ 
      display:none; 
    } 
    #nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul, #nav ul ul ul ul li:hover ul{ 
      display:block; 
    } 
    li>ul { 
      top: auto; 
      left: auto; 
    } 
     
     
    body {
     text-align:center;
     color : #666;
     background:#fff;
     font-family : Verdana, Arial, Helvetica, sans-serif;
     font-size : 11px;
     background-color: #C8ACAC;
    }
    #main {
    width:573px;
    text-align:left;
     margin:auto;
    }
    #header {
    color:#000;
    }
    #header OLD{
    border: #CCCCCC 2px solid;
    background:#fff;
    color:#000;
    margin-bottom:5px;
    }
    
    #header p {
    padding:5px;
    background-color: #1C56B2;
    color:#fff;
    margin:0;
    border:2px solid #fff;
    }
    #content #imgfloat {
    float:left;
    width:179px;
    text-align:center;
    border: 2px solid #CCCCCC;
    margin-right:15px;
    }
    #content img{padding:3px}
    .ttheading{
    margin:25px 0 0 0;
    color : #FFFFFF;
    font-size : 18px;
    }
    
    p.ttmain {margin-top:0px;width:420px;}
    
    .feature {
    background:#FFF;
    color:#666;
    width:180px;
    float:left;
    margin-left:196.5px;
    text-align:center;
    }
    
    .feature h3 {
    font-size:105%;
    background:#FFFFFF;
    color:#000000;
    line-height: 25px;
    margin-bottom:0px;
    font-weight: normal;
    text-align:left;
    padding-left:15px;
    }
     
    .feature .imgholder {
    width:180px;
    background:#EAEAEA; 
    }
    .feature .imgholder p{
    text-align:left;
    padding:0 10px 10px 10px;
    }
    .imgholder img {
    margin: 10px 0 0 0;
    border:1px solid #000;
    padding:0;
    }
    #vertline {
    float:left;
    border-right:1px solid #000;
    padding-left:50px;
    }
    
    /*  MACE MACE MACE Horizontal nav */
    #menu {margin: 0; padding: 0; position:absolute; left:0px; top:75px;}
    #menu ul {border: 0px none; margin: 0; padding: 0; list-style-type: none; text-align: center; clear: left}
    #menu ul li {display: block; float: left; text-align: center; padding: 0; margin: 0;}
    #menu ul li a {background: #666666; width: 80px; height: 20px; line-height:20px; border-right: 1px solid #fff; padding: 0; margin: 0; color: #fff; text-decoration: none; display: block; text-align: center; font-weight: normal;} 
    #menu ul li a:hover {color: #666666; background: #DFEDF9;}
    #menu ul li#menu1 a {width: 100px;}
    #menu ul li#menu2 a {width: 120px;}
    #menu ul li#menu3 a {width: 150px;}
    #menu ul li#menu5 a {width: 110px;}
    .pSmall {margin-bottom:15px;}  
    /*.pSmall {margin-bottom:15px;width:172px;}  */
    
    .pLinks {}
    .pLinks .pHeader {background-color:#ccc;}
    .pLinks h3 {color:#000;}
    .pLinks ul {list-style: none; margin: 0; padding: 0; border: none;}  
    .pLinks li {margin: 0;}
    .pLinks li a:link, .pLinks li a:visited {display: block; border-top: 1px solid #fff; border-bottom: 1px solid #ccc; background-color: #F5f7f7; font-weight: bold; padding: 3px 0 3px 5px; color: #21536A; text-decoration: none; width: 97%;}  
    .pLinks li a:hover {border-top: 1px solid #ccc; background-color: #DDEEFF; font-weight: bold; text-decoration: none;}
    .pLinks ul.sub {}
    .pLinks li.sub {padding-left: 10px;}
    .pLinks .pLinksSub a:link, .pLinks .pLinksSub a:visited {background-color: #fff;}
    
    .pSmall .pHeader {font-size:10px; font-family: verdana, arial, helvetica, sans-serif; font-weight:bold; padding:4px 5px;}
    .pSmall .pHeader h3 {font-size:10px; font-family: verdana, arial, helvetica, sans-serif; font-weight:bold; margin:0; padding:0;}
    .pSmall .pContent {font-size:10px; font-family:verdana, arial, helvetica, sans-serif;  font-weight:normal;}
    .pSmall .pContent p, .pSmall .pContent ul, .pSmall .pContent li {font-size:10px; font-family: verdana, arial, helvetica, sans-serif; font-weight:normal; padding:0; margin:0;}
    .pSmall .pContent li {margin-left:20px; padding-bottom:5px; list-style-image:url('/images/li_arrow.gif')}
    .pSmall .pFooter p {font-size:10px; font-family: verdana, arial, helvetica, sans-serif; font-weight:normal; padding:0; margin:0;}
    .pLinks a {font-size:10px; font-family:verdana, arial, helvetica, sans-serif; font-weight:bold;}
    #contentCol1 {background-repeat:repeat-y; position: absolute; left:0; top: 86px; margin:0; padding:0; width: 180px}
    
    </style>
    </head>
    <body>
     
     
    
    <div id="main"> 
    <div class="feature"> 
      <h3>Featured product</h3> 
    </div>
     
    <ul id="nav">
      <li> <a href="#" >first Level menu</a> 
     <ul>
       <li><a href="#">second Level menu</a></li>
       <li><a href="#">second Level menu</a> 
      <ul>
    	<li><a href="#" >third Level menu</a></li>
      </ul>
       </li>
     </ul>
      </li>
      <li> <a href="#" >next Level menu</a> 
     <ul>
       <li><a href="#">next second Level menu</a></li>
       <li><a href="#">next second Level menu</a> 
      <ul>
    	<li><a href="#">next third Level menu</a></li>
      </ul>
       </li>
     </ul>
      </li>
    </ul>
     
    <div id="header"> 
     <img src="adspage.jpg" width="573" height="151" />
    </div>
    <div id="content"> 
     <p class="ttheading">Ads</p>
      </div>
    </div>
    </body>
    </html>
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to make the drop-down absolutely positioned, so that it is removed from the document flow.
    Code:
    #nav {
      list-style: none;
      margin-left:100px;  /*to move this menu a little bit to the right*/
      position:relative;
    }
    
    #nav ul { 
      padding: 0;
      margin:0;
      list-style: none;
      width:12em;
      z-index:99;
      position:absolute;
      overflow:visible; 
    }
    Setting the parent element's position to 'relative' makes it the containing block for its absolutely positioned children.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thankyou!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  4. #4
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That "position: relative;" on the parent element is key. For the longest time, I couldn't figure out why my absolutely positioned div kept appearing in different places in each browser. Yesterday, while reading the "Visual" part of the CSS2 Spec., I came across that tidbit and it fixed my problem.
    I will not flame the newbies,
    I will not flame the newbies,
    I will flame the newbies...
    Table free is the way to be!

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The trick is in deciphering the W3C's terminology:
    • position:static is not static, it moves with the flow
    • position:relative is relative to where it would have been if you didn't move it
    • position:absolute is relative
    • position:fixed is absolute

    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    The trick is in deciphering the W3C's terminology:
    • position:static is not static, it moves with the flow
    • position:relative is relative to where it would have been if you didn't move it
    • position:absolute is relative
    • position:fixed is absolute

    Tru dat
    I will not flame the newbies,
    I will not flame the newbies,
    I will flame the newbies...
    Table free is the way to be!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,354
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tommy
    The trick is in deciphering the W3C's terminology:
    • position:static is not static, it moves with the flow
    • position:relative is relative to where it would have been if you didn't move it
    • position:absolute is relative
    • position:fixed is absolute
    Well you absolutely fixed that , relatively speaking of course


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •