Bonjour,
Merci d'abord pour tout ce que j'ai pu apprendre sur Alsacréations
Voici mon souci :
Je voudrais refaire le site de mon asso de Shiatsu, et j'ai commencé à travailler sur un modèle de page avec CSS.
Pour le menu, je me suis inspiré d'Eric MEYER (More on CSS)
Le résultat fonctionne parfaitement sous Firefox et Safari, il est OK par le biais de l'extension Firefox "View this page in IE"....mais le texte central est invisible si la page est ouverte directement dans IE
.Il est pourtant présent, puisqu'en sélectionnant son emplacement à la souris il devient visible !
Adresse de la page
http://www.shiatsu-aist.org/test/menu.html
Le menu fait appel à un behavior csshover.htc, dont le texte est également dispo en .txt ici
http://www.shiatsu-aist.org/test/csshover.txt
J'en perds mon latin...Quelq'un a-t-il une idée de la solution, ou rencontré le même souci ?
Voici le CSS :
www.shiatsu-aist.org/test/menu.html
Modifié par Sei Shiatsu Do (18 Dec 2005 - 15:41)
Merci d'abord pour tout ce que j'ai pu apprendre sur Alsacréations

Voici mon souci :
Je voudrais refaire le site de mon asso de Shiatsu, et j'ai commencé à travailler sur un modèle de page avec CSS.
Pour le menu, je me suis inspiré d'Eric MEYER (More on CSS)
Le résultat fonctionne parfaitement sous Firefox et Safari, il est OK par le biais de l'extension Firefox "View this page in IE"....mais le texte central est invisible si la page est ouverte directement dans IE


Adresse de la page
http://www.shiatsu-aist.org/test/menu.html
Le menu fait appel à un behavior csshover.htc, dont le texte est également dispo en .txt ici
http://www.shiatsu-aist.org/test/csshover.txt



Voici le CSS :
* {margin:0;padding:0}
.vert {
color: #4B5D1E;
}
#espace{
clear: both;
}
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 1%;
background: #C4DA8D;
behavior: url(csshover.htc);
} /* WinIE behavior call */
p {margin: 1.25em 0 1.25em 0;
}
.h3{color:#003300;
font-weight:bold;
font-size: 1.3em;
line-height: 0.2;
}
.h4{color:#003300;
font-weight:bold;
font-size: 1.2em;
line-height: 0.2;
}
.hr{
border-top:3px double #C4DA8D;
}
a:link {
color: /*#003300*/#4B5D1E;
text-decoration: none;
font-weight: 900;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
a:visited {
color: /*#003300*/#4B5D1E;
text-decoration: none;
font-weight: 900;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
a:hover {
color: #DBA400/*#006600*/;
text-decoration: none;
font-weight: 900;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
a:active {
color: #DBA400/*#006600*/;
text-decoration: none;
font-weight: 900;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
/*Aspect de la page*/
#conteneur {
width:auto;
margin:0 auto;
border: 3px double #8B8B8B;
background-color:white;/*#EFECF8;*/
}
#conteneur h3{
color:#4B5D1E;
margin-right:2em;
margin-left:1em;
}
/*BANDEAU HAUT (LOGO + TITRE)*/
#bandeau {
height: 170px;
background-image: url(images/logo_dessin_160x160.gif);
background-position: 3px;
background-repeat: no-repeat;
}
#bandeautxt{
position: relative;
text-align: center;
margin-left: 250px;
margin-right:250px;
font-size:2em;
}
/*Dans le titre, la premiere lettre de chaque mot
en gris*/
.lettretitre {
font-size:130%;
color : #8B8B8B;
}
/*FIN DU BANDEAU*/
/*DEBUT colonne centrale /texte des pages*/
#centre {
/*display: block;
visibility: visible;*/
margin-left: 160px;
margin-right: 160px;
min-height: 350px;
}
/*Lettrine en gris dans chaque paragraphe*/
#centre p {
text-indent: 1em;
text-align: justify;
margin-right: 4em;
margin-left: 3em;
}
#centre p:first-letter {
font-size : 1.5em;
/*font-weight:bold;*/
color : #8B8B8B;
font-weight:600;
}
/*Pied de page (en bas de conteneur)*/
#pied {
/*display: block;
visibility: visible;*/
clear:both;
background-color:#ABABAB;
color: #C4DA8D;
text-align: center;
font-size: 1.2em;
font-style: italic;
border-top: 5px double #3A3A3A;
margin-top: 1em;
font-weight: bold;
}
/* Colonne de gauche (pour le menu de navigation)*/
#gauche {
float:left;
width: 150px;
margin-left: 0.2em
}
/*Colonne de droite (pour l'affichage des news)*/
#droite {
float:right;
width: 150px;
border: 1px solid #CCC;
font-size: 1em;
margin-top: 4em;
margin-right:0.5em;
padding:0.5em 0.5em 0.5em 0.5em ;
text-align: center;
}
#droite li {
margin-bottom: 5px;
margin-left:0.5em;
list-style-type: none;
text-align: left;
font-size: 0.9em;
border-top: 1px solid #8B8B8B;
font-weight:bold;
}
#droite li a:link{
text-decoration: none;
font-size: 1em;
font-weight:bold;
background-color: #DBA400;
color:#4B5D1E;
padding-left:1em;
padding-right: 1em;
line-height: 25px;
}
#droite li a:visited {
color: #003300;
text-decoration: none;
}
#droite li a:hover{
text-decoration: none;
color:#DBA400;
background-color: #C4DA8D;
padding-right: 1em;
padding-left:1em;
}
#droite li a:active {
text-decoration: none;
}
/* -------------MENU MEYER-----------------*/
/*
Reprise de moreoncss d'Eric MEYER
Citer source dans l'ours ?
*/
#menugauche {
list-style-type: none;
}
div#nav {float: left; width: 145px; margin: 4em 0 0 -1px;
background: #E2EDC6;
font-size: 0.8em;
font-weight: bold;
}
div#nav ul {margin: 0; padding: 0; width: 145px/*7em*/; background: #E2EDC6;
border: 1px solid #AAA;}
div#nav ul.level2 {background: #E2EDC6;}
div#nav ul.level3 {background: #E2EDC6;}
div#nav li {position: relative; list-style: none; margin: 0;
border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #C4DA8D;}
div#nav li.submenu {background: url(images/submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #C4DA8D;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
color:/*#003300*/#4B5D1E;;text-decoration: none; width: 6em; border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color:/*#CCCCFF*/#DBA400;color:#8B8B8B/*#006600*/;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 145px/*7em*/;
display: none;}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
/* -------------FIN MENU MEYER-----------------*/
www.shiatsu-aist.org/test/menu.html
Modifié par Sei Shiatsu Do (18 Dec 2005 - 15:41)