28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je suis webmaster d'un site météo pour la charente, http://meteo-charente.fr

J'ai changé de menu, avant c'était un menu fixe et j'ai preferé opté pour le menu déroulant, mais je rencontre plusieurs problemes.

Le premier, le fait que sous firefox mon menu se trouve DANS le corps de la page, sous IE tout va bien il est parfaitement là ou il faut.

Et dans les deux cas, la liste à puce que j'avais avant dans l'ancien menu, enfin du moins les puces refusent de s'enlever ... je n'arrive pas à les enlever même en enlevant leur réference dans le code CSS ... De plus elles prennent une trop grosse place dans les sous menus .

Voilà ma page cSS

/*
Meteo-Charente design
Réalisé par C.Vincent
 http://meteo-charente.fr
 
*/

body
{
   width: 820px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 10px;   
   background-image: url("http://meteo-charente.fr/resources/fond.gif");
}

/* L'en-tête */

#en_tete
{
   width: 800px;
   height: 208px;
   background-image: url("http://meteo-charente.fr/resources/fondprintemps.gif");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}


}
#menu {
position: relative; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
color: navy;
cursor: pointer;
text-align: center;
font-weight: bold;
background: white;
border: 2px solid black;
margin: 5px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: white;
}
#menu li a, #menu dt a {
color: navy;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}


/* Le corps de la page */

#corps
{
   margin-left: 5px;
   margin-bottom: 20px;
   padding: 2px;
   text-align: center;
   font-size: 14px;
   font-family: Verdana;
   
   color: teal;
   background-color: white;
   background-image: url("");
   background-repeat: repeat-x;
   
   border: 2px solid black;
}

#corps h1
{
   color: navy;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-decoration: underline;
}

#corps h2
{
   height: 40px;
   text-decoration: underline;

   background-image: url("http://meteo-charente.fr/resources/carte.gif");
   background-repeat: no-repeat;
   
   padding-left: 30px;
   color: teal;
   text-align: center;
}

#corps h3 
{
   font-style: italic;
   text-decoration: underline;
}

#corps h4   
 {    
color: black;
text-decoration: underline;
}  

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 10px;

   text-align: center;

   color: black;
   background-color: white;
   background-image: url("");
   background-repeat: repeat-x;
   
   border: 3px solid black;


Ici mon menu que j'ai intégré en include php

<div id="menu">
	<dl>

		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Prévisions</dt>

		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
					<li><a href="previ.php">Prévisions +3 jours</a></li>
				   <li><a href="radars.php">Radars des précipitations</a></li>
                   <li><a href="pictos.php">Légende pictogrammes</a></li>
				   <li><a href="previville.php">Previsions par ville (bientôt)</a></li>
				</ul>

			</dd>
	</dl>
	<dl>			
		<dt onmouseover="javascript:montre('smenu2');">Stations météo</dt>

		<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
					<li><a href="http://cyclonus16.free.fr/Vantage_pro_2/Current_Vantage_Pro.htm"><b>Temps en direct en Sud-Charente</b></a></li>
				   <li><a  href="http://toph17.c.la/"><b>Temps en direct en Charente Maritime</b></a></li>
				</ul>
				
				</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Observations</dt>

			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>

		<li><a href="presentation.php">La Charente en France</a></li>
					 <li><a href="suivis.php">Les records d'une journe agitée</a></li>
					<li><a href="animsat.php">Animation satellite</a></li>
				   <li><a href="meteo-alerte.php">Meteoalerte</a></li>
                   <li><a href="imgHD.php">Images satellites HD</a></li>
                   <li><a href="photosHD.php">Photos satellites</a></li>
				   <li><a href="http://s221478381.onlinehome.fr/">Album photo</a></li>
				   <li><a href="Température.php">Températures en Direct</a></li>
	</dl>

	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Les modèles</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<ul>

					 <li><a href="modele1.php">Un modèle ?</a></li>
				   <li><a href="GFS.php">GFS</a></li>
                   <li><a href="WRFNMM.php">WRF NMM</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu5');">Les plus</dt>
			<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
			<ul>

					<li><a href="http://meteo-charente.fr/tinc?key=bbvuY8dj">Contact</a></li>
				   <li><a href="http://s221478381.onlinehome.fr/tinc?key=8dgxCZAm&start=-1&reverse=1">Livre d'or</a></li>
				   <li><a href="http://meteo-charente.forumpro.fr">Forum</a></li>
				   <li><a href="liens.php">Liens</a></li>
				</ul>
			</dd>
	</dl>
		
</div>


Voilà ... merci pour votre aide .

http://meteo-charente.fr pour voir ce qu'il en est