18042 sujets

Questions générales et questions de débutants

Comment empécher l'affichage du sous menu au chargement [Résolu]

Bonjour,
Je dois refaire un site aprés plusieurs années sans avoir mis les mains dans le "codage", grace aux tutos j'essaie de supprimer les cadres, utiliser des includes et bien sur les CSS (cela a quand même un peu de mal à renter, mais dans l'absolu tout est relatif Smiley eek ).
Il me reste 3 petits problémes :
J'ai utilisé le tuto présentation numéro 12 http://css.alsacreations.com/modeles/modele12.htm,
là c'est pas mal mais sous Netscape mon footer n'est qu'une ligne noire (Ie,opera,ff c'est bon).
J'ai utilié le tuto menu avec sous menu tuto http://css.alsacreations.com/modelesmenus/vd2.htm
là mon problème est l'affichage du sous menu à l'ouverture de la page et quand on utilise le menu supérieur et inférieur à celui contenant le sous menu (c'est clair ??? Smiley rolleyes )
Je chipote un peu mais j'aimerai comprendre et pas seulement faire du copier coller.
voici l'adresse du site utilisant tout cela http://chez.mana.pf/malapelle.jeanmarc

le fichier css utilisé 
 
/* CSS Document */
html, body {
width: 100%;
height: 100%;
}

html { border:0;}
body {
	margin: 0;
	padding: 0;
	font-family:"Times New Roman", Times, serif;
	font-size: 16px;
	background-color: #00CCFF; /*couleur de fond */
	color: #000000;
	overflow:auto;
	
}
.conteneur { /*le conteneur global du site */
width: 100%;
height: 100%;
position: absolute;
}

.header { /*le bandeau superieur */
height: 108px;
}

.footer {   /*le pied de page */
	background-color: #999999;
	height: 3em;
	text-align: center;
}



#Layer1 {/*le calque pour les mini drapeaux */
	position:absolute;
	left:23px;
	top:23px;
	width:101px;
	height:43px;
	z-index:1;
}	


.menu {  /*le menu */
	position: absolute;
	left:5px;
	width: 155px;
	height: 300px;

}



.frame { /*partie contenant les infos du site */
margin-left: 200px;
width: auto;
height: 85%;
overflow: auto;

}





/* fin des blocs de mise en page */

/* definition des styles d'ecritures */

.titre {
	font-size: 18px;
	font-weight: bold;
}
.titregros {
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}
.textecentre {
	text-align: center;
}
.textecentregras {
	text-align: center;
	font-weight: bold;	
}
.textecentregrasmois {
	text-align: center;
	background-color: #CC6699;
	font-weight: bold;	
}
.textecentregrastemperature {
	text-align: center;
	background-color: #FFCC99;
	font-weight: bold;	
}
.textecentregrasplui {
	text-align: center;
	background-color: #66CC99;
	font-weight: bold;	
}
.texte {
	text-align: justify;
}
.textejaponais {
	text-align: justify;
	font-family:"MS Gothic", "MS Mincho", Times, serif;
}
.textefaqjaponais {
	color: #003399;
	text-align: justify;
	font-family:"MS Gothic", Times, serif;
}
.textefaq {
	color: #003399;
	text-align: justify;
}
.boitemail	{
	top: 450px;
	left: auto;
	padding: 12px;
	width: 300px;
	text-align: center;
	border-color: #CCCCCC;
	border-width: 6px;
	border-style: ridge;
}

.bloctexte{
	margin:10px;
	text-align: justify;
}

.letrine{
font-weight:bolder;
text-decoration:underline:
}



/*fin des definitions des styles d'ecriture */

/*debut du menu */


dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
	position: absolute;
	top: 3em;
	left: 4px;
	width: 150px;
	margin-top: 60px;
	
}

#menu dt {        /*creation des boutons du menus principal */
	cursor: pointer;
	background-color: #FFCC00;
	height:30px; /*width:150px;*/
	line-height: 30px;
	margin: 7px 0;
	text-align: center;
	font-size: 18px;	
	border-top: 1px solid #cecece;
  	border-bottom: 2px solid #4a4a4a;
  	border-left: 1px solid #cecece;
  	border-right: 2px solid #4a4a4a;
	
}


#menu dt a {
	display: block;
	color: #000;
	text-decoration: none;
	border-top: 1px solid #cecece;
  	border-bottom: 2px solid #4a4a4a;
 	border-left: 1px solid #cecece;
  	border-right: 2px solid #4a4a4a;
}
 
#menu dt a:hover {    /*changement de couleur des boutons du menu principal au passage de la souris */
	display: block;
	text-decoration: none;
	background-color: #FFFF99;
	border-bottom: 1px solid #cecece;
	border-top: 2px solid #4a4a4a;
	border-right: 1px solid #cecece;
	border-left: 2px solid #4a4a4a;
							
}



#menu dd {              /* parametres du sous menu */
	position: absolute;
	z-index: 100;
	left: 8em;
	margin-top: -3em;
	width: 12em;
	border: 1px solid gray;
	background-color: #FFCC33;	
}


#menu ul {
padding: 2px;
}


#menu li {
text-align: center;
font-size: 18px;
height: 18px;
line-height: 18px;
}

#menu li a   {
	color: #000;
	text-decoration: none;
	display: block;
}

#menu li a:hover {           /* parametres du sous menu au passage de la souris */
	text-decoration: underline;
	background-color: #FFFF33;
}


/*paramatres pour la galerie photo */


div#galerie
{
	width: 666px ;
	background-color:#0066CC;
	
	border: 1px solid #dcb ;
	padding: 15px ;
	margin: 15px 30px ;
	text-align: center ;
	font: 0.9em Georgia, serif ;
}

ul#galerie_mini
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#galerie_mini li
{
	float: left ;
}

ul#galerie_mini li a img
{
	margin: 2px 1px ;
	border: 1px solid #dcb ;
}

dl#photo
{
	clear: both ;
	margin: 0 auto ;
}

dl#photo dt
{
	font: italic 2.5em/1.5em Georgia, serif ;
	color: #dcb ;
}

dl#photo dd
{
	margin: 0 ;
}

dl#photo img
{
	border: 1px solid #dcb ;
}

/* enleve les cadres quand les photos sont utilise en lien */

a img  { text-decoration: none;}
a img :hover { text-decoration: none;}
a img {border: 0;}
img {border:0;}
td img {display: block;}


Merci pour toute l'aide ou conseils que vous pourriez me fournir. J'attend le livre cité dans votre site pour m'instruire un peu plus Smiley smile
Modifié par onibaba (02 Sep 2006 - 05:30)
Administrateur
Hello,

La question a été débattue maintes et maintes fois déjà ici (une petite recherche ?).
Ce comportement est voulu pour des raisons évidentes d'accessibilité :
- au démarrage le menu et les sous-menus s'affichent
- si javascript est actif, alors les sous-menus disparaissent
- puis au survol, chaque sous-menu réapparait.

Du coup, si javascript n'est pas activé, le menu reste tout à fait utilisable car les sous-menus demeurent tous affichés.
merci raphael
j'ai effectué une "petite recherche" mais ici, sous les cocotiers, notre vitesse de connection et mon forfait ne me permet pas de parcourir tout le forum à mon grand regret Smiley decu
Serait il possible d'ajouter ce genre d'infos dans les sources des tutos en commentaires ??

Merci encore pour ta réponse si rapide.

Sujet résolu donc
Modifié par onibaba (01 Sep 2006 - 19:37)
Sujet clos
Aller à