Bonsoir ymhotepa,
Je souhaite effectivement que la boite de texte apparaisse au survol du lien et qu'elle soit placée sur la droite.
Dans les deux menus que l'on voit sur cette
page le menu de gauche ne fonctionne pas ainsi. (je dois preciser qu'il fonctionnait ainsi jusqu'au 25 fevrier, date à laquelle il a soudainement agi autrement...)
Il faut savoir que ces deux menus sont des jumeaux (même CSS même html) justement pour mettre en evidence le comportement etrange de celui de gauche.
On dirait que les colonnes agissent comme des frames et que tout ce qui est hors des limites du cadre n'est pas visible. C'etait le cas aussi sur FF quand j'avais mis au point ce menu. Du coup je m'etais servi de la commande !important pour placer les blocs de textes au dessus du menu. Ceci est toujours le cas d'ailleurs si l'on visualise avec FF.
Je pourrais abandonner l'idee de placer mes blocs a droite sous IE pour adopter la meme solution que sous FF mais, problème, sous IE les ecritures du bloc de texte et celles du menu se supersposent.
Je cherche les raisons de ce drole de comportement de IE surtout parce que jusqu'au 25 fevrier, mon menu fonctionnait parfaitement bien.
Voici recopiée la partie de mon css concernant ce menu. A noter : il y a trois types d'entité dans ce menu selon qu'il s'agit du titre
-d'un article
-d'un article avec podcast
-d'un mois
/* ----TEXTES SANS LECTURE AUDIO----------- */
/* ----Liste des titres d'articles----------- */
ul#menu {
margin: 0;
padding: 0;
padding-right:5px;
width:200px;
font: bold 1em verdana, Georgia, Arial, Times, serif;
font-size:8px;
list-style-type: none;
position: relative;
border-right:5px solid white;
}
/* ----Lien des titres d'articles----------- */
#menu a {
position: relative;
display: block;
margin: 0px 0;
color: #ff3399;
text-decoration: none;
width: 200px;
border-top: 1px dashed #FF00BD;
background: transparent;
text-align: right;
line-height: 16px;
}
#menu a:hover {
position: relative;
color: #ff3399;
background: #DDDDDD;
border:none;
border-top: 1px dashed #FF00BD;
}
/* ---------- "INFOBULLES" DIV sur les titres "menu"---------- */
a.menu span {
display: none;
width:178px !important;
width:300px;
z-index:5000;
}
a.menu:hover {
background: none;
z-index: 500;
}
a:hover.menu span {
display: inline;
position: absolute;
top: 10em !important;
top: 0;
left: 0 !important;
left: 24em;
z-index: 20000;
background: #dddddd;
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #ff3399;
border: 1px dashed #ff3399;
width:300px;
text-align:justify;
font-weight:bold;
font-size: x-small;
line-height:12px;
padding:1em;
}
/* ----TEXTES AVEC LECTURE AUDIO----------- */
/* ----Liste des titres d'articles----------- */
ul#menu1 {
margin: 0;
padding: 0;
padding-right:5px;
width:200px;
font: bold 1em verdana, Georgia, Arial, Times, serif;
font-size:8px;
list-style-type: none;
position: relative;
border-right:5px solid white;
}
/* -------------- lien des titres d'articles----------------- */
#menu1 a {
position: relative;
display: block;
margin: 0px 0;
color: #ff3399;
text-decoration: none;
width: 200px;
border-top: 1px dashed #FF00BD;
background: transparent;
text-align: right;
line-height: 16px;
background-image: url(http://idata.over-blog.com/0/00/97/20/menu-icone-lecture.jpg);
background-repeat:no-repeat;
background-position:0% 50%;
}
#menu1 a:visited {
position: relative;
display: block;
margin: 0px 0;
color: #FFA1E1;
text-decoration: none;
width: 200px;
border-top: 1px dashed #FF00BD;
background: transparent;
text-align: right;
line-height: 16px;
background-image: url(http://idata.over-blog.com/0/00/97/20/menu-icone-lecture.jpg);
background-repeat:no-repeat;
background-position:0% 50%;
}
#menu1 a:hover {
position: relative;
color: #ff3399;
background: #DDDDDD;
border-top: 1px dashed #FF00BD;
background-image: url(http://idata.over-blog.com/0/00/97/20/menu-icone-lecture.jpg);
background-repeat:no-repeat;
background-position:0% 50%;
}
/* ------- "INFOBULLES" DIV sur les titres "menu1"--------- */
a.menu1 span {
display: none;
width:178px !important;
width:300px;
z-index:5000;
}
a.menu1:hover {
background: none;
z-index: 500;
}
a:hover.menu1 span {
display: inline;
position: absolute;
top: 10em !important;
top: 0;
left: 0 !important;
left: 24em;
z-index: 2000;
background: #dddddd;
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #ff3399;
border: 1px dashed #ff3399;
width:300px;
text-align:justify;
font-weight:bold;
font-size: x-small;
line-height:12px;
padding:1em;
padding-top:5em;
background-image: url(http://idata.over-blog.com/0/00/97/20/texte_lecture.jpg);
background-repeat:no-repeat;
background-position:5% 5%;
}
/* ----TEXTES CLASSéS PAR MOIS----------- */
/* ----Liste des mois----------- */
ul#mois {
margin: 0;
padding: 0;
padding-right:5px;
width:200px;
font: bold 1em verdana, Georgia, Arial, Times, serif;
font-size:8px;
list-style-type: none;
border-right:5px solid white;
}
/* ----Liens des mois----------- */
#mois a {
display: block;
margin: 0px 0;
color: yellow;
text-decoration: none;
line-height: 16px;
width: 200px;
border-top: 1px dashed white;
background: #ff3399;
text-align: center;
}
#mois a:hover {
position: relative;
bottom: 2px;}
/* ----------"INFOBULLES" DIV sur les MOIS---------- */
a.mois span {
display: none;
width:178px !important;
width:200px;
z-index:5000;
}
a.mois:hover {
background: none;
z-index: 500;
}
a:hover.mois span {
display: inline;
position: absolute;
top: 10em !important;
top: 0;
left: 0 !important;
left: 24em;
z-index: 2000;
background: yellow;
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #ff3399;
border: 1px dashed #ff3399;
width:200px;
text-align:justify;
font-weight:bold;
font-size: x-small;
line-height:12px;
padding:1em;
}
Ce code pourrait très probablement être optimisé. Je ne suis pas specialiste je l'avoue. Mais je me donne du mal pour que mon blog soit plaisant pour mes lecteurs.
Merci d'avance.
Brad
Modifié par Brad (06 Mar 2006 - 22:06)
