Salut, merci pour ces 1ers conseils !
Alors pour ce qui est du décalage en cascade des différents éléments à inclure, cela vient du fait que j'avais toujours laissé "2 sauts de ligne" en entête de mes fichiers contenant le code de chacun des éléments. Je ne pensais pas que ça influerait...
En les supprimant, tout est revenu dans l'ordre ! (YES !)
Cependant, "un irréductible problème résiste encore est toujours à l'envahisseur...". Le fait que mon menu dynamique ne s'affiche plus correctement : sous "default.htm" il marchait parfaitement bien. Cela donne l'impression que le list-style n'est pas correctement appliqué.
Je post donc mon menu, ça surement des heureux... (Bien évidemment, il n'est pas de moi ! Je crois même qu'il vient d'ici !
)
Fichier html :
<div id="left_menu">
<ul id="menu">
<li><a href="#menu1">MENU 1</a>
<ul>
<li><a href="default.htm">ELEM 1</a> </li>
<li><a href="#">ELEM 2</a> </li>
<li><a href="#">ELEM 3</a> </li>
</ul>
</li>
<li><a href="#menu2" >MENU 2</a>
<ul>
<li><a href="#">ELEM 1</a></li>
<li><a href="#">ELEM 2</a></li>
<li><a href="#">ELEM 3</a></li>
</ul>
</li>
<li><a href="#menu3" >MENU 3</a>
<ul>
<li><a href="#">ELEM 1</a></li>
<li><a href="#">ELEM 2</a></li>
<li><a href="#">ELEM 3</a></li>
</ul>
</li>
</ul>
<script type="text/javascript"> initMenu(); </script>
</div>
Fichier CSS correspondant :
/* Feuille CSS de "Left_Menu" */
/* Positionnement et Bordures d'un élément "menu" */
#left_menu .menu {
padding: 0px;
margin: 0px 0px 0px 9px;
top: 0px;
z-index: 10;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
/* Patch pour fixer une élément de la page sous IE6 */
position : expression("absolute");
width : expression("180px");
top: expression( ( 228 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
left: expression( ( 'center' + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
}
/* Positionnement et Bordures d'un élément "sous-menu" */
#left_menu .menu ul {
visibility: hidden;
padding: 0px;
margin: -1px 0px 0px 9px;
position: absolute;
width: 180px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
/* Positionnement et Bordures d'un élément "sous-sous-menu" */
/*
#left_menu .menu li ul {
visibility: hidden;
margin-left: 185px;
margin-top: -24px;
}
*/
/* Apparence et Taille du contenu d'un élément "menu" */
#left_menu .menu li a {
background-color: #4D4D4D;
margin: 0;
padding: 3px 0px 3px 0px;
font-family: Arial;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: center;
vertical-align: middle;
width: 180px;
display: block;
float: left;
list-style: none;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
}
/* Apparence et Taille du contenu d'un élément "sous-menu" */
#left_menu .menu ul li a {
background-color: #4D4D4D;
margin: 0;
padding: 3px 0px 3px 0px;
font-family: Arial;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: center;
vertical-align: middle;
width: 180px;
display: block;
float: left;
list-style: none;
}
/* Apparence de l'élément lorsque la souris est positionnée dessus */
#left_menu .menu a:hover {
background-color: #AE0000;
}
#left_menu .menu span {
display: none;
}
#left_menu .menu li {
width: 180px;
display: block;
float: left;
list-style: none;
}
/* IE PC selector */
* html .menu li {
display:inline; /* solve a IE PC list bug */
float:none; /* solve a IE5 clav nav bug */
}
#left_menu a.linkOver{
background-color: #AE0000;
}
Fichier Javascript de détection du browser "browserdetect.js" :
// 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();
Fichier de création du menu "menu.js" :
// 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;
// create timeout variables for list item
// it's to 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';
}
}
Si vous avez la solution n'hésitez surtout pas. Je rappel que le problème apparait en php et pas en html
PS: Même s'il y a peut etre des erreurs, le CSS est entièrement cpmréhensible maintenant que je l'ai retouché un peu (j'avoue que c'était un peu hardcore la 1ère version
)
Enjoy ![/i][/i][/i]
