28173 sujets

CSS et mise en forme, CSS3

Mon menu est découpé en deux avec FF mais avec IE coment faire?

Bonjour , voila j'ai crée un menu où j'innsere une image haut.gif dans un div et un eimage bas.gif dans div toute suite apres avec mes lien dedans. ca marche avec IE mais pas avec FF!!!!

voila mon code HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

<title>QUALIDOC [langue]ortail qualité du centre bus des Bords de Marne</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
<link rel="stylesheet" media="screen" type="text/css" href="/Application/style_asma.css"/>

<script type="text/javascript">
window.onload=montre;

function montre(id) {
	var d = document.getElementById(id);
		for (var i = 1; i<=10; i++) {
			if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
		}
	if (d) {d.style.display='block';}
}

function Aficherannee(){
	
		var vision = (document.getElementById('secteur').value== "-20") ? 'hidden' : 'visible';
		var index =document.getElementById('secteur').selectedIndex;
		var text = document.getElementById('secteur')[index].text;
		var pos	 = text.indexOf(":");
		text = text.substr(0,pos);
		var url="/Application/"+text+"/menu.php";
		if(text!="") {
		alert("url: "+url);
		}
		document.getElementById('annee').value=document.getElementById('secteur').value;		
		document.getElementById('annee').style.visibility=vision;
		document.getElementById('idannee').style.visibility=vision;
		
}


</script>

</head>

<body onload="Aficherannee()">

<div class="haut">
	<div class="haut_gauche"><img style="" alt="logoASMA" src="/Application/images/logoASMA.jpg"></div>
	<div class="haut_droite">
	<form action="autentif" method="post" name="identif">
	
       		<b>Mot de passe Administrateur</b>						
			<input name="mtpass" type="password" size="5">
				<input type="submit" value="Valider" name="Valider" >
	</form>
	</div>
	<div class="haut_centre"><big><big><strong>GESTION D'INSCRIPTION</strong></big></big><br/>
					
	<strong>Secteur</strong>
	<?php
	require("connexion.php");
	$db_selected = mysql_select_db("commune");
	?>
				<select name="secteur" id="secteur" onchange="Aficherannee(this.form)" >
				<?php				
				//On commence par mettre à jour les menus deroulants
				$sql="SELECT * FROM secteur order by Sect ";
				$req=mysql_query($sql) or die('Erreur SQL!'.$sql.'<br>'.mysql_error());
				$nb = mysql_num_rows($req);
				if (!$nb){
					echo '<option>Aucun Secteur n\'est enregistré</option>';
				}
				else{
					echo"<option value= '-20'>- Sélectionnez -</option>";
					while ($i = mysql_fetch_array($req)){
				?>
						
						<option value= "<?php echo $i['angest'] ?>"  > <?php echo $i['Sect']." : ".$i['Permanent']; ?> </option>
				<?php				
					}
				}
				?>	
				</select>
				<strong><label id="idannee" for="annee" style="visibility:hidden">Année</label></strong>
				<input name="annee" class="annee" id="annee" type="text" readonly="true" size="2" />
	</div>
</div>

<div class="gauche">
	<!-- Menu  -->
	<div id="menu_entete"></div>
	<dl id="menu">
		<CENTER><H3>Menu</H3></CENTER>
		<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">INSCRIPTION</br>
		 <hr>
			
    <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"> 
      <ul>
        <li><a href="index.php?page=1">Inscription Agent/Exterieur</a></li>
        <hr">
        <li><a href="index.php?page=2">Politiques qualité</a></li>
        <hr">
        <li><a href="#">Cartographie</a></li>
        <hr">
        <li><a href="#">COPI-COSU-Revue de direction</a></li>
        <hr">
        <li><a href="#">Modelisation des processus</a></li>
        <hr>
        <li><a href="#">Planning de communication</a></li>
        <hr>
        <li><a href="#">Presentation des engagements NF Service</a></li>
        <hr width="100%">
        <li><a href="#">Engagements du centre bus</a></li>
      </ul>
    </dd>	
			
		 <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Suivi des engagements NF Service<hr width="100%">
			
    <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"> 
      <ul>
        <li><a href="#">Dysfonctionnements parcours voyageurs</a></li>
        <hr width="100%">
        <li><a href="#">Mesures accueil telephonique</a></li>
        <hr width="100%">
        <li><a href="#">Mesures Machinistes-Receveurs</a></li>
        <hr width="100%">
        <li><a href="#">Mesures reponses aux reclamations</a></li>
        <hr width="100%">
        <li><a href="#">Tableaux de bord</a></li>
      </ul>
    </dd>	

		 <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Documentation qualite
			
    <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"> 
      <ul>
        <li><a href="#">Documents du departement BUS</a></li>
        <hr width="100%">
        <li><a href="#">Documents du departement MRB Neuilly</a></li>
        <hr width="100%">
        <li><a href="#">Documents du departement MRB Bussy</a></li>
        <hr width="100%">
        <li><a href="#">Rechercher un document</a></li>
        <hr width="100%">
        <li><a href="#">Créer un nouveau document</a></li>
        <hr width="100%">
        <li><a href="#">Modifier un document</a></li>
      </ul>
    </dd>
	</dl>
</div>

<div class="frame">
<?php
if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page'];
 switch($page)
{
case '1': include ('file:///H|/localhost/www/site/plans_audit.htm');break;
case '2': include ('file:///H|/localhost/www/site/politiques.htm');break;
case 'suite':include ('file:///H|/localhost/www/site/suite.txt');break;
case 'fin':include ('file:///H|/localhost/www/site/fin.txt');break;
}
?>

<CENTER><h1>Bienvenue sur Qualidoc</h1></CENTER>
  <p>Qualidoc est le portail qualité du centre bus des Bords de Marne.
  Il est là pour mettre à votre disposition la documentation qualité du centre et vous permettre un accès simple et rapide à celle-ci. </p>
...

</div>
<div class="bas">
	<div class="cadre_bas1">
	<a href="#">Retour à l'accueil</a>
	</div>
	<div class="cadre_bas2">
	<a href="#">Plan du site</a>
	</div>
</div>
</body>
</html>






body {
padding:0;
margin:0;
font-family: verdana, arial, sans-serif;
font-size: 80%;
color: black;
scrollbar-face-color: #9C6 ;
scrollbar-track-color: #FFF ;
scrollbar-arrow-color: #FFF ;
scrollbar-shadow-color: " ;
scrollbar-highlight-color: " ;
scrollbar-3dlight-color: " ;
scrollbar-darkshadow-color: " ;

}


/*entête*/
.haut {
width: auto;
height: 80px;
background-color: #9C6;
color: #fff;
font-size: 16px;
text-align: center;
}
.haut_centre {
margin-left: 160px;
margin-right: 160px;
padding-top: 11px;
}
.haut_gauche {
float:left;
padding: 5px;
width: 160px;
}
.haut_droite {
float:right;
padding-top: 8px;
width: 160px;
}

.annee {
border : 0;
color : #fff;
background-color: #9C6;
font-weight:bold;

}
/*Contenu*/
.frame {
margin-left: 0px;
width: 800px;
height: 493px;
overflow: auto;
font-size: 15px;
}


/*Pied de page*/
.bas {
width: auto;
height: 10px;
background-color: #9C6;
padding: 9px;
font-size: 12px;
}
.cadre_bas1{
float: left;
width: 300px;
text-align: right;
}
.cadre_bas1 a {
color: #fff;
}
.cadre_bas1 a:hover {
text-decoration: underline;
}
.cadre_bas2{
float: right;
width: 300px;
}
.cadre_bas2 a {
color: #fff;
}
.cadre_bas1 a:hover {
text-decoration: underline;
}

/*Menu*/
.gauche {
float: left;
width: 220px;
height: 445px;
background-color: #FFF;
}
	/*Contenu du menu*/
	dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
	#menu_entete {
	border:2px;
    solid: #000000;
	margin-top: 80px;
	margin-left: 0px;
	width: 200px;
	padding-top: 23px;
	background: url(/Application/images/haut.gif) top left no-repeat;
	}
	#menu {
	margin-left: 0px;
	border:2px;
    solid: #000000;
	width: 200px;
	background: url(/Application/images/bas.gif) bottom left no-repeat;
	padding-bottom: 40px;
	margin-top: 0px;
	}
	#menu dt {
	cursor: pointer;
	margin: 0 20px 0px 0px;
	padding-left: 15px;
	text-align: center;
	}
	#menu dd {
	position: absolute;
	z-index: 100;
	left: 15em;
	margin-top: -2em;
	width: 15em;
	background: #9C6;
	border: 1px solid gray;
	}
	#menu ul {
	padding: 2px;
	}
	#menu li {
	text-align: center;
	font-size: 85%;
	height: 18px;
	line-height: 18px;
	}
	#menu li a, #menu dt a {
	color: #000;
	text-decoration: none;
	display: block;
	}
	#menu li a:hover {
	text-decoration: underline;
	}


Merci de votre aide
Modifié par alex75 (16 Jun 2006 - 17:08)
Sujet clos
Aller à