28173 sujets

CSS et mise en forme, CSS3

[Résolu]Probleme navigateurs

bonjour a vous
je cherche un petit peu d'aide pour savoir si en javascript il y a un code pour faire en sorte que ma page internet s'affiche sans bug sur differents navigateurs voici ma page html
<!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=iso-8859-1" />
<title>Document sans nom</title>
	<link rel="stylesheet" type="text/css" href="jasco.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';}
}
//-->
</script>
</head>

<body>
	<div id="conteneur">
		<div id="header"></div>
	  <div id="haut">
	  
			<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();" >
		<a href="principale.html" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Contact</dt>
			<dd id="smenu1"onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="contactSAV.html">Service Après-Vente </a></li>
					<li><a href="contactScom.html">Service Commercial</a></li>
					<li><a href="services/applications.html">Application</a></li>
					<li><a href="services/Formation.html">Formation</a></li>
				</ul>
			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Produits</dt>
			<dd id="smenu2"onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="spectroscopy.html">Spectroscopie</a></li>
					<li><a href="chroma.html">Chromatographie</a></li>
					<li><a href="consommable.html">Consommable</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">JASCO  Monde</dt>
			<dd id="smenu3"onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="#">Amérique du Nord</a></li>
					<li><a href="#">Amérique Latine</a></li>
					<li><a href="#">Europe</a></li>
					<li><a href="#">Afrique du Nord</a></li>
					<li><a href="#">Asie</a></li>
					<li><a href="#">Océanie</a></li>
				</ul>
			</dd>
	</dl>
</div>
		
  </div>
  <div id="gauche">
    <div id="menugauche"> <a href="demandes/demande.php4">Vos demandes</a> 
	                      <a href="evenement.html">Evenements</a> 
						  <a href="new.html">nouveautés</a>  
						  <a href="partenaires.html">Partenaires</a> </div>
	<form name="form1" method="post" action="login.php4">
    
    <table width="140" border="0" cellpadding="0">
     
      <tr>
        <td>
		LOGIN:<br /><input name="txt_login" type="text" size="15"  >
		</td>
      </tr>
      <tr>
       <td>
		PASSWORD:<br /><input name="txt_password" type="password" size="10" >
		</td>
		<td><font size="0"><br />
<input type="submit" name="Ok" value="Ok" style="float: right"></font>
</td>
      </tr>
    </table>
	</form>		<b>	
				<a href="identification/enregistrer.html"
				style="text-decoration: none">
                <font color="#FF0000" >Inscrivez-vous!</font></a></b>
                				
				<b>
				<a href="logout.php4" style="text-decoration: none">
                Déloguez-vous!</a></b>  
			
	  </div>

	  
	  
	  
  	<div id="centre">
	Chromatographie
  	</div>
	</div>
</body>
</html>



et pour la feuille de style jasco.css
/* CSS Document */
body
{

background: #E0DFDF;
margin: 0px; 
} 
#conteneur
{
width: 760px;
/*height: 550px;
/*background-color: #ffffff;*/
background-image:url(images/conteneur.gif);
border: 1px solid black;
margin-left: -380px; 
margin-top: -275px; 
top: 50%; 
left: 50%; 
position: absolute; 
} 
#header/*en tête de page avec logo jasco*/
{
width:760px;
background-color:#CCCCCC;
background-image:url(images/header.gif);
height:100px;
}
#haut 
{
position: relative;
margin-left:auto;
margin-right:auto;
width:760px;
background-color:#000;
border-style: groove ;
border-top-width:medium 3em;
border-color:#CCCCCC;
}
#centre /*partie de remplissage*/
{
width:36em;
background-color:#FFF;
margin-left: 10em ;
padding:15px;
height:550px;
}
#gauche/*position  du bloc du menu*/ 
{
	background-color:#cfcfcf;
	position: absolute;
	left:3px;
	width: 9.48em;
	/*height:;*/
	top: 139px;
	}
dl, dt, dd, ul, li
 {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu 
{
left: 0;
z-index:100;
}
#menu dl 
{
float:left;
width: 10.5em;
margin: 0 1px auto;
}
#menu dt 
{
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
height:20px;
line-height:20px;
margin:2px 0;
}
#menu dd 
{
position:absolute;
z-index:100;
background:#CCCCCC;
border: 1px solid gray;
}
#menu li
 {
text-align: center;
background: #CCC;
font-weight:bold;
}
#menu li a, #menu dt a 
{
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;

}
#menu li a:hover, #menu dt a:hover 
{
background: #eee;
}

a {

text-decoration: none;
color: black;
color: #222;
}

/*menu fixe gauche*/
ul#menugauche
{
margin:auto;
padding:auto;
font:bold  Georgia, "Times New Roman", Times, serif;
list-style-type:none;
/*left:50%;*/
}
#menugauche a
{
display:block;
margin:5px 0;
color:#000;
text-decoration:none;
line-height:25px;
width:9.48em;
border:1px solid #CCCCCC;
background:#CCCCCC;
text-align:center;
border-width:1px 2px 2px 1px;
border-color:#cecece #4a4a4a #4a4a4a #cecece;
border-style:solid;
}
#menugauche a:hover
{
border-width:2px 1px 1px 2px;
border-color:#4a4a4a #cecece #cecece #4a4a4a;
}
p {margin: 0 0 10px 0;}




/*///////polices de textes///////*/
h2
{
font-family:"Times New Roman", Times, serif;
font-style:normal;
color:#000000;
font-size:13px;
font-weight:normal;

}
h1
{
font-family:"Georgia", Times New Roman, Times, serif;
font-style:oblique;
color:#000000;
font-size:18px;
font-weight:bolder;
}

h3
{
font-weight:bold;
font-size:16px;
}
.titredefinition
{
font-size:16px;
text-decoration:underline;
font-weight:bold;
}
.titre
{
font-size:16px;
font-weight:bold;
}
h4
{
font-family:"Georgia", Times New Roman, Times, serif;
font-style:oblique;
color:#000000;
font-size:22px;
font-weight:bolder;

}

/************************* pop up genere pour ouverture nouvelle fenetre**************/
a.lien_ext:after {
content: " (lien externe)";
}


merci d'avance à tout ceux qui voudront bien m'aider
Modifié par oscars (30 Nov 2006 - 01:23)
Modérateur
Bonjour,

Pourquoi (mettre du scotch) en javascript ?

Quel est le problème au juste et sous quel navigateur ? ( un exemple en ligne ? Smiley cligne )
j'avoue le site est loin d'etre au mieux de sa forme en fait quand je fais un test sous firefox le menu du haut et ses sous menus se décalle et ma balise "centre" sort de ma balise "conteneur" sinon si par rapport au code présent vous avez des améliorations elles sont les bienvenues
pour un exemple en ligne pas possible pour l'instant


suivant la taille de l'écran ,de la taille du texte choisi dans le navigateur il y des problèmes
j'ai eu peur un instant je ne retrouvais pas mon post
donc si une âme charitable a une idée sur ma requête qu'elle n'hésite
pas

Smiley ola
Pas le temps de tout voir, mais déjà tu risques d'avoir des problèmes avec ça :
#centre /*partie de remplissage*/
{
width:36em;
}

#gauche/*position  du bloc du menu*/ 
{
	width: 9.48em;
}

Il y a deux problèmes dans ce bout de code (simplifié) :
1 - les commentaires entre le sélecteur et la première accolade... certains navigateurs n'aiment pas du tout ça (même si je ne sais plus du tout lesquels) ;
2 - les dimensions de blocs en em, à proscrire, sauf pour des min-height, max-width, etc.

Si tu es perdu sur l'unité em, un petit topo : Typographie web : gérer la taille du texte avec les « em » (on n'y parle pas du dimensionnement des blocs en em, mais on explique ce que signifie cette unité).

Plus concrètement, je peux te proposer un exemple de « correctif » (pas forcément applicable vu que je ne connais pas toute ta feuille de style, mais ça te donnera une idée) :
/* partie de remplissage */
#centre {
	width: 80%;
}

/*position du bloc du menu*/ 
#gauche {
	width: 18%;
}

J'ai plus ou moins gardé les proportions de départ, mais indexées sur la largeur disponible dans le bloc conteneur, pas sur la taille du texte (variable) !
merci MPOP j'essaie de voir ce que ça donne et je te tiens au courant pour l'unité em je sais que ce n'etait pas forcement la meilleur idée et j'avais oublié de la corriger je ne répondrais peut-etre pas tout de suite
en fait eu le temps d'essayer pour la largeur j'ai mis ça a la place
/* partie de remplissage */
#centre {
	width: 75%;
}

/*position du bloc du menu*/ 
#gauche {
	width: 18%;
}

mais toujours un probleme avec le menu deroulant horizontal et la hauteur de mon conteneur des que je peux je met un exemple en ligne
merci encore
bonjour a vous pas eu le temps de revenir plus tôt
donc toujours sur le probleme de navigateur je vous met un lien pour visualiser les erreur de pages


http://perso.orange.fr/decouverte-cuisine/spectroscopy.html
si pour ceux qui trouverais que c'est loin d'etre géniale n'hésitez pas a me donner vos opinions que je puisse coriger ce site merci d'avance
Modifié par oscars (29 Nov 2006 - 11:51)
(question a part au niveau de la creation du site il est preferable de commencer son site pour firefox ou pour ie)
merci a toi Eldebaran
mais au cas ou tu une idée pour ma page en question merci d'avance
Modifié par oscars (29 Nov 2006 - 12:41)
a force de recherche et de prise de tête le problème est résolu simplement j' ai repris tout mon css a la base et repris point par point merci encore uax personnes qui m'ont prposé des solutions
oscars a écrit :
a force de recherche et de prise de tête le problème est résolu simplement j' ai repris tout mon css a la base et repris point par point merci encore uax personnes qui m'ont prposé des solutions
Bravo, c'est comme cela que l'on progresse !

A bientôt...
Sujet clos
Aller à