28173 sujets

CSS et mise en forme, CSS3

PB de menu deroulant.

bonjour a tous je suis tres nouveau sur ce forum.

Ca fait pas mal de tps que je me casse la tete pour resoudre ce pb mais sans resultat.

petite precision, j'utilise le CMS Joomla mais cela ne posera pas de pb. (enfin je pense)

voila mon pb.

j'ai grandement epure la chose pour mettre en evidence mon pb et diagnostiquer les conflits.
bon au lieu de code ma page et la mettre sur internet c'est un template que je code, mais cela fonctionne comme n'importe quel page sauf pour le contenu. le menu est gere par un module "transmenu v2 ou v1.1"

aller on rentre dedans :
j'ai ma page php qui fait appel a un css, normal quoi
apres j'ai une div qui va me centrer ma page sur la largeur et la hauteur
a l'interieur j'ai un tableau avec une colone de gauche pour mon menu et une juxtapose qui est mon contenu.

le pb c'est que mon sous-menu ne se met pas du tt ou il faut (a cote du lien) et je n'arrive pas a mes fin. enfin je pourrais virrer mon centrage mais j'y tiens bcp.
je crois que j'ai trouve cette technique ici d'ailleur il y a bien longtemp.

voici les codes


<?php echo "<?xml version=\"1.0\" encoding=\"\"?".">"; ?><?php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=" />
<link href="css/template_css.css" rel="stylesheet" type="text/css" />
</head>

<body margin="0">
<div id="global">

<table width="900px" height="590px" border="0" cellpadding="0" cellspacing="0">								<!-- ici debut tableau general -->
	<tr><td></td></tr>																					<!-- ici header -->
	<tr><td id="">																					<!-- ici debut zone central menu left + mainbody -->
		<table width="900" height="440" cellpadding="0" cellspacing="0">
			<tr>
				<td id="menu_gauche">																			<!-- ici debut menu left -->
				<!----><div id="left_inner">
				<?php
				if (mosCountModules( "left" )) {
				mosLoadModules ( 'left', -3 );
				}
				?>
				<!----></div>				</td>
			  <td id="main_body">																			<!-- ici debut zone central + mainbody -->
			    <table border="0" cellpadding="0" cellspacing="0" id="main_body_table">
                  <tr>
                    <td width="100%">
                        <?php mosMainBody(); ?>
                    </td>
                  </tr>
                </table></td>				
			</tr>
		</table>
	</td></tr>																					<!-- ici fin zone central menu left + mainbody -->
</table>																						<!-- ici fin tableau general -->

</div>
<?php mosLoadModules( 'debug', -1 );?>
</body>
</html>


pour la feuille de style ca donne ca, j'ai tt bazarde.


#global {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 900px;
	height: 590px;
	margin-top: -295px; /* moitie de la hauteur */
	margin-left: -450px; /* moitie de la largeur */
	background-color: transparent;
	z-index: 1;
}
#menu_gauche {
  float: left;
width: 160px;
}
#left_inner {
	padding: 2px;
  float: none !important;
  float: left;
}
#main_body {
	height: 100%;
	width: 100%;
}
#main_body_table {
	height: 100%;
	width: 100%;
}


qd je vire le #global (je pert mon centrage de ma page mais le menu marche bien)

maintenant c'est le css du menu deroulant


/* this is the clipping region for the menu. it's width and height get set by script, depending on the size of the items table */
.transMenu {
	position:absolute;
	overflow:hidden;
	left:-1000px;
	top:-1000px;
	}

/* this is the main container for the menu itself. it's width and height get set by script, depending on the size of the items table */
.transMenu .content {
	position:absolute;
	}

/* this table comprises all menu items. each TR is one item. It is relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
.transMenu .items {
	position:relative;
	left:0px; top:0px;
	z-index:2;
	}

.transMenu.top .items {
	border-top:none;
	}

/* each TR.item is one menu item */
.transMenu .item{
    color:red;
    font-size:10px;
    font-family:sans-serif;
    text-decoration:none;
	/* this is a hack for mac/ie5, whom incorrectly cascades the border properties of the parent table to each row */
	border:none;
	cursor:pointer;
	cursor:hand;
	display: block;
	width: 145px !important;
	width: 160px;
	background:#C63C00;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
	text-align: left;
	text-indent: 15px;
	height: 20px !important;
	height: 25px;
	width: 100%;
	text-decoration: none;
	border-bottom: 1px solid #FFF;
	}
.transMenu .item td{

}
/* this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
/* we set the background color in script because ie mac does not use it; that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
.transMenu .background {
	position:absolute;
	left:0px; top:0px;
	z-index:1;
	-moz-opacity:.8;
	filter:alpha(opacity=80);
	}

/* same concept as .background, but this is the sliver of shadow on the right of the menu. It's left, height, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowRight {
	position:absolute;
	z-index:3;
	top:3px; width:2px;
	-moz-opacity:.4;
	filter:alpha(opacity=40);
	}

/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It's top, width, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowBottom {
	position:absolute;
	z-index:1;
	left:3px; height:2px;
	-moz-opacity:.4;
	filter:alpha(opacity=40);
	}

/* this is the class that is used when the mouse is over an item. script sets the row to this class when required. */
.transMenu .item.hover {
	color:black;
	background:#F79A00;
	}

/* this is either the dingbat that indicates there is a submenu, or a spacer gif in it's place. We give it extra margin to create some space between the text and the dingbat */
.transMenu .item img {
	margin-left:0px;
	}

/* Added classes by Khanh - 050629 */
#wrap {
   margin: 0px;
   padding: 0px;
}
#menu {
   margin: 0px;
   padding: 0px;
   display:block;
   width:100%;

}
.transMenu .item#active {
	background:#ff0000;
	color:black;
	-moz-opacity:.6;
	filter:alpha(opacity=60);
	}
.transMenu .item#active.hover {
	background:#F79A00;
	color:black;
	}
/* For first level menu.*/
a.mainlevel-trans:link, a.mainlevel-trans:visited {
	display: block;
	background: url(img/menu_bg.png) no-repeat;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
	text-align: left;
	padding-top: 5px;
	padding-left: 18px;
	height: 20px !important;
	height: 25px;
	width: 100%;
	text-decoration: none;
	width: 145px !important;
	width: 160px;
}
a.mainlevel-trans:hover {
 	background-position: 0px -25px;
	text-decoration: none;
	color: #333333;
}
a.mainlevel_active-trans, a.mainlevel_active-trans:visited {
   color:#FF6600;
   line-height: 25px;
   display: block;
   height: 25px;
   width:auto;
   margin: 0px;
   padding: 0px 15px 0px 29px;
   background: url(img/menu_bg.png) no-repeat;
	background-position: 0px -25px;
	text-decoration: none;
	color: #333333;
}
a.mainlevel_active-trans:hover {
  color:#3366CC;
}


bon voila j'espere que vous pourrez trouver mes erreurs car je suis pas un pro. et je fatigue serieusement, sans rien trouver.

je vous remercie d'avance.

cordialement.
Modifié par bill2004 (12 Dec 2006 - 16:42)
Salut, et bienvenue.

bill2004 a écrit :
j'ai grandement epure la chose pour mettre en evidence mon pb et diagnostiquer les conflits. je precise que je developpe et test sur IE6
et je ne me suis pas encore occupe de FF.
Je me suis arrêté là. Tu n'as aucune chance d'arriver à un résultat correct en travaillant avec un navigateur tout pourri !

La bonne idée serait de faire exactement l'inverse : développer pour Firefox en laissant IE de côté, jusqu'à avoir un résultat satisfaisant sous Fx (et les autres navigateurs modernes), avec un code html & css valide.

Ensuite, seulement, s'atteler à résoudre les bugs d'IE, par petites touches et via des commentaires conditionnels.
bas je suis tres content d'avoir perdu autant de tps, alors que j'ai strictement la meme chose. (voir pire)

A+
Sujet clos
Aller à