Position div sous ul

Question

damjal

16 Jun 2006 à 15:46

Bonjour,

Voici mon code : un menu dynamique en css (j'ai pris le code ici :http://dosimple.ch/articles/Menus-dynamiques/ ) sous lequel je positionne des div.
Mon problème est que j'ai besoin d'un float left pour mes divs, mais que ces div ne se positionnent pas sous le <ul>, mais en haut du conteneur, du coup le menu recouvre les div.pourquoi ?
Dans mon exemple ci-dessous, j'ai essayé de positionner des <hr> mais l'espacement obtenu n'est pas le même sous firefox et ie, et ça ne me parait pas une bonne solution, coment faire autrement ?

Merci d'avance pour votre aide

Damien


<html>
<head>
<title>Administration</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- script du menu -->
<script type="text/javascript">
/*
Author   : bieler batiste
Company  : doSimple :  http://www.dosimple.ch
 
send me a mail for more informations : faden@PASDEPOURRIELaltern.org - remove ( PASDEPOURRIEL )

Short javascript function to create and handle a CSS navigation menu

Copyright (C) 2004  Bieler Batiste

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
*/

// the timeout for the menu
var timeout = 1000;

// not very clean but simple
// the function can be run in the HTML for faster display
// window.onload=initMenu;

// creat timeout variables for list item
// it's for avoid some warning with IE
for( var i = 0; i < 100; i++ )
{
    eval("var timeoutli" + i + " = false;");
}

// this fonction apply the CSS style and the event
function initMenu()
{
    // a test to avoid some browser like IE4, Opera 6, and IE Mac
    if ( browser.isDOM1 
    && !( browser.isMac && browser.isIE ) 
    && !( browser.isOpera && browser.versionMajor < 7 )
    && !( browser.isIE && browser.versionMajor < 5 ) )
    {
        // get some element
        var menu = document.getElementById('menu'); // the root element
        var lis = menu.getElementsByTagName('li'); // all the li
        
        // change the class name of the menu, 
        // it's usefull for compatibility with old browser
        menu.className='menu';
        
        // i am searching for ul element in li element
        for ( var i=0; i<lis.length; i++ )
        {
            // is there a ul element ?
            if ( lis.item(i).getElementsByTagName('ul').length > 0 )
            {        
                // improve IE key navigation
                if ( browser.isIE )
                {
                    addAnEvent(lis.item(i),'keyup',show);
                }
                // link events to list item
                addAnEvent(lis.item(i),'mouseover',show);
                addAnEvent(lis.item(i),'mouseout',timeoutHide);
                addAnEvent(lis.item(i),'blur',timeoutHide);
                addAnEvent(lis.item(i),'focus',show);
                
                // add an id to list item
                lis.item(i).setAttribute( 'id', "li"+i );
            }
        }
    }
}

function addAnEvent( target, eventName, functionName )
{
    // apply the method to IE
    if ( browser.isIE )
    {
        //attachEvent dont work properly with this
        eval('target.on'+eventName+'=functionName');
    }
    // apply the method to DOM compliant browsers
    else
    {
        target.addEventListener( eventName , functionName , true ); // true is important for Opera7
    }
}
    
// hide the first ul element of the current element
function timeoutHide()
{
    // start the timeout
    eval( "timeout" + this.id + " = window.setTimeout('hideUlUnder( \"" + this.id + "\" )', " + timeout + " );");
}

// hide the ul elements under the element identified by id
function hideUlUnder( id )
{   
    document.getElementById(id).getElementsByTagName('ul')[0].style['visibility'] = 'hidden';
}

// show the first ul element found under this element
function show()
{
    // show the sub menu
    this.getElementsByTagName('ul')[0].style['visibility'] = 'visible';
    var currentNode=this;
    while(currentNode)
    {
            if( currentNode.nodeName=='LI')
            {
                currentNode.getElementsByTagName('a')[0].className = 'linkOver';
            }
            currentNode=currentNode.parentNode;
    }
    // clear the timeout
    eval ( "clearTimeout( timeout"+ this.id +");" );
    hideAllOthersUls( this );
}

// hide all ul on the same level of  this list item
function hideAllOthersUls( currentLi )
{
    var lis = currentLi.parentNode;
    for ( var i=0; i<lis.childNodes.length; i++ )
    {
        if ( lis.childNodes[i].nodeName=='LI' && lis.childNodes[i].id != currentLi.id )
        {
            hideUlUnderLi( lis.childNodes[i] );
        }
    }
}

// hide all the ul wich are in the li element
function hideUlUnderLi( li )
{
    var as = li.getElementsByTagName('a');
    for ( var i=0; i<as.length; i++ )
    {
        as.item(i).className="";
    }
    var uls = li.getElementsByTagName('ul');
    for ( var i=0; i<uls.length; i++ )
    {
        uls.item(i).style['visibility'] = 'hidden';
    }
} 
</script>
 <!-- détéction du navigateur -->
<script type="text/javascript">
// Browser Detect Lite  v2.1.4
//  http://www.dithered.com/javascript/browser_detect/index.html
 
// modified by Chris Nott (chris@NOSPAMdithered.com - remove NOSPAM)


function BrowserDetectLite() {
   var ua = navigator.userAgent.toLowerCase(); 

   // browser name
   this.isGecko     = (ua.indexOf('gecko') != -1 && ua.indexOf('safari') == -1);
   this.isMozilla   = (this.isGecko && ua.indexOf('gecko/') + 14 == ua.length);
   this.isNS        = ( (this.isGecko) ? (ua.indexOf('netscape') != -1) : ( (ua.indexOf('mozilla') != -1) && (ua.indexOf('spoofer') == -1) && (ua.indexOf('compatible') == -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) && (ua.indexOf('hotjava') == -1) ) );
   this.isIE        = ( (ua.indexOf('msie') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) ); 
   this.isSafari    = (ua.indexOf('safari') != - 1);
   this.isOpera     = (ua.indexOf('opera') != -1); 
   this.isKonqueror = (ua.indexOf('konqueror') != -1 && !this.isSafari); 
   this.isIcab      = (ua.indexOf('icab') != -1); 
   this.isAol       = (ua.indexOf('aol') != -1); 
   
   // spoofing and compatible browsers
   this.isIECompatible = ( (ua.indexOf('msie') != -1) && !this.isIE);
   this.isNSCompatible = ( (ua.indexOf('mozilla') != -1) && !this.isNS && !this.isMozilla);
   
   // browser version
   this.versionMinor = parseFloat(navigator.appVersion); 
   
   // correct version number
   if (this.isNS && this.isGecko) {
      this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('/') + 1 ) );
   }
   else if (this.isIE && this.versionMinor >= 4) {
      this.versionMinor = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) );
   }
   else if (this.isMozilla) {
      this.versionMinor = parseFloat( ua.substring( ua.indexOf('rv:') + 3 ) );
   }
   else if (this.isSafari) {
      this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('/') + 1 ) );
   }
   else if (this.isOpera) {
      if (ua.indexOf('opera/') != -1) {
         this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera/') + 6 ) );
      }
      else {
         this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera ') + 6 ) );
      }
   }
   else if (this.isKonqueror) {
      this.versionMinor = parseFloat( ua.substring( ua.indexOf('konqueror/') + 10 ) );
   }
   else if (this.isIcab) {
      if (ua.indexOf('icab/') != -1) {
         this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab/') + 6 ) );
      }
      else {
         this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab ') + 6 ) );
      }
   }
   
   this.versionMajor = parseInt(this.versionMinor); 
   this.geckoVersion = ( (this.isGecko) ? ua.substring( (ua.lastIndexOf('gecko/') + 6), (ua.lastIndexOf('gecko/') + 14) ) : -1 );
   
   // dom support
   this.isDOM1 = (document.getElementById);
   this.isDOM2Event = (document.addEventListener && document.removeEventListener);
   
   // css compatibility mode
   this.mode = document.compatMode ? document.compatMode : 'BackCompat';

   // platform
   this.isWin   = (ua.indexOf('win') != -1);
   this.isWin32 = (this.isWin && ( ua.indexOf('95') != -1 || ua.indexOf('98') != -1 || ua.indexOf('nt') != -1 || ua.indexOf('win32') != -1 || ua.indexOf('32bit') != -1 || ua.indexOf('xp') != -1) );
   this.isMac   = (ua.indexOf('mac') != -1);
   this.isUnix  = (ua.indexOf('unix') != -1 || ua.indexOf('sunos') != -1 || ua.indexOf('bsd') != -1 || ua.indexOf('x11') != -1)
   this.isLinux = (ua.indexOf('linux') != -1);
   
   // specific browser shortcuts
   this.isNS4x = (this.isNS && this.versionMajor == 4);
   this.isNS40x = (this.isNS4x && this.versionMinor < 4.5);
   this.isNS47x = (this.isNS4x && this.versionMinor >= 4.7);
   this.isNS4up = (this.isNS && this.versionMinor >= 4);
   this.isNS6x = (this.isNS && this.versionMajor == 6);
   this.isNS6up = (this.isNS && this.versionMajor >= 6);
   this.isNS7x = (this.isNS && this.versionMajor == 7);
   this.isNS7up = (this.isNS && this.versionMajor >= 7);
   
   this.isIE4x = (this.isIE && this.versionMajor == 4);
   this.isIE4up = (this.isIE && this.versionMajor >= 4);
   this.isIE5x = (this.isIE && this.versionMajor == 5);
   this.isIE55 = (this.isIE && this.versionMinor == 5.5);
   this.isIE5up = (this.isIE && this.versionMajor >= 5);
   this.isIE6x = (this.isIE && this.versionMajor == 6);
   this.isIE6up = (this.isIE && this.versionMajor >= 6);
   
   this.isIE4xMac = (this.isIE4x && this.isMac);
}
var browser = new BrowserDetectLite();

</script>
<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
<style type="text/css">
/* CSS du menu horizontal, bieler batiste */

.menu{
    position:absolute;
    display:block;
    margin:0;
    padding:0;
    width:500px;
    }

.menu ul{
    position:absolute;
    display:block;
    width:124px;
    /*margin:0;*/
    padding:0;
    z-index:10;
    }
    
.menu li ul{
    visibility:hidden;
    }

.menu li li ul{
    position:absolute;
    margin-left:124px;
    margin-top:-23px;
    }
    
.menu li{
    list-style:none;
    width:124px;
    height:auto;
    display:inline;
    display/**/:block;
    float:none;
    float/**/:left;
    margin:0;
    padding:0;
    }
    
.menu li li{
    display:block;
    float:none;
    }
    
/* correct a little IE bug */
* html .menu li li{
    display:inline;
    }

.menu a{
    text-align:center;
    background-color: #9cf;
    border:1px #666 solid;
    color:#000;
    display:block;
    width:120px;
    text-decoration:none;
    padding:2px 0;
    margin:1px;
    }
    
.menu a:hover{
    background-color: #eee;
    border:1px #aaa solid;
    }
    
/* for a mozilla better display with key nav */
.menu a:focus{
    background-color: #aaf;
}

a.linkOver{
    background-color: #eee;
    }


.separation {
	clear:both;
	visibility:hidden;
	height:14px;
}
#b_activite {
	float:left;
	visibility:visible;
	border:solid 2px #336699;
	background:#F1F5FA;
	}
#b_admin {
	float:left;
	visibility:visible;
	border:solid 2px #336699;
	background:#F1F5FA;
	}
</style>
</head>
<body>
<ul id="menu">
	<li><a href="#">Connexion - Profil</a>
		<ul>
			<li><a href="#">Administrateurs</a></li>
			<i><a href="#">Membres</a></li>
		</ul>
</li>
</ul>
<hr class="separation">
<div id=b_activite>
	<form name=admin method=post action=admin.php?sid=$sid>
		<input type=hidden name=menu value=activite>
		<div align=center>
		<b>Activités - Services</b>
		<br>
		<input type=submit name=activite value=Go class=bouton >
		<br>
		</div>
	</form>
</div>

<div id=b_admin>
	<form name=admin method=post action=admin.php?sid=$sid>
		<input type=hidden name=menu value=administr>
		<div align=center><b>Administration</b></div>
		<br>
		&nbsp;&nbsp;Nom : <input type=text name=nom_admin size=15 value="" class=bouton><br>
		&nbsp;&nbsp;Id : <input type=text name=id_admin value="" size=10 class=bouton>
		<div align=left>&nbsp;&nbsp;<input type=submit name=admin value=Go class=bouton ><br>
		&nbsp;&nbsp;<input type=submit name=admin_creer value=Créer class=bouton>
		</div>
	</form>
</div>

<script type="text/javascript">
    initMenu();
</script>
</body>
</html>

[/i][/i][/i]
Modifié par damjal (16 Jun 2006 - 15:49)

Mikachu

16 Jun 2006 à 16:02

Bonjour,

Un exemple en ligne ca parle toujours plus que plein de lignes de codes. C'est plus facile de voir visuellement ou ca pèche et d'aller voir le code ou il faut ensuite.

damjal

16 Jun 2006 à 16:31

oui, je suis d'accord, mais cela fait parti d'un gros projet pas encore en ligne...
Sinon tu crés un fichier html et tu colles mon code dedans, ça revient au même, désolé pour la manip...

Sujet clos

CSS et mise en forme, CSS3

Position div sous ul