Bonsoir,
J'ai clairement un souci avec l'affichage, et surtout l'utilisation de mon menu déroulant sous IE6 et IE7, ainsi que sur Safari m'a dit une amie qui travaille sur Mac (par contre, elle n'a pas été assez précise).
En fait, lorsque l'on déroule le menu sous IE6 ou IE7, tout va bien jusqu'à ce que l'on arrive à la limite du div placé en-dessous. A partir de là, c'est comme si le div prenait le dessus et que mon curseur ne pouvait plus "voir" le menu.
Toutes ces expressions ne font pas très pro, certes, mais je ne sais pas comment le décrire autrement.
Et bien entendu, sous Firefox, aucun problème...
Voici mon code html (juste la page d'accueil, les autres sont codées de façon identique), la feuille CSS qui va avec, suivie du code javascript utilisé (je crois que c'est mon copain qui l'avait trouvé sur le net, tout prêt).
Code source
La feuille de styles:
La feuille javascript
D'avance merci pour l'aide que vous pourrez m'apporter. Je suis loin d'être pro, j'ai commencé les feuilles CSS il y a six mois (et je ne bosse pas non plus dans l'informatique)[/i][/i]
Modifié par Mag (15 Nov 2007 - 20:47)
J'ai clairement un souci avec l'affichage, et surtout l'utilisation de mon menu déroulant sous IE6 et IE7, ainsi que sur Safari m'a dit une amie qui travaille sur Mac (par contre, elle n'a pas été assez précise).
En fait, lorsque l'on déroule le menu sous IE6 ou IE7, tout va bien jusqu'à ce que l'on arrive à la limite du div placé en-dessous. A partir de là, c'est comme si le div prenait le dessus et que mon curseur ne pouvait plus "voir" le menu.
Toutes ces expressions ne font pas très pro, certes, mais je ne sais pas comment le décrire autrement.
Et bien entendu, sous Firefox, aucun problème...
Voici mon code html (juste la page d'accueil, les autres sont codées de façon identique), la feuille CSS qui va avec, suivie du code javascript utilisé (je crois que c'est mon copain qui l'avait trouvé sur le net, tout prêt).
Code source
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="htmlL Tidy for Windows (vers 12 April 2005), see www.w3.org">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>
Accueil horizontal
</title>
<link rel="stylesheet" href="./styles/style horizonb.css" type="text/css">
<script type="text/javascript" src="./styles/menuderoulant.js">
</script>
</head>
<body id="Lecartonadollz"; onload="setHover('menuDeroulant')">
<div id="pageHeader">
<h1>
Le Carton à dollz
</h1>
</div>
<div id="pageHeader2">
<ul id="menuDeroulant">
<li>
<a href="ecran_a_dollz/Index.html">L'Ecran à Dollz</a>
<ul class="sousMenu">
<li>
<a href="ecran_a_dollz/dollz/Index.html">Dollz</a>
</li>
<li>
<a href="ecran_a_dollz/pixel_art/Index.html">Pixel Art</a>
</li>
<li>
<a href="#">Gifts</a>
</li>
<li>
<a href="ecran_a_dollz/sisters/Index.html">Sisters</a>
</li>
<li>
<a href="ecran_a_dollz/concours/Index.html">Concours</a>
</li>
<li>
<a href="#">Awards</a>
</li>
</ul>
</li>
<li>
<a href="carton_a_dessin/Index.html">Le Carton à Dessins</a>
<ul class="sousMenu">
<li>
<a href="carton_a_dessin/chine_etc/Index.html">Encre de Chine, etc.</a>
</li>
<li>
<a href="carton_a_dessin/infographie_etc/Index.html">Infographie, etc.</a>
</li>
<li>
<a href="carton_a_dessin/ptits_bics_etc/Index.html">Les Ptits Bics, etc.</a>
</li>
</ul>
</li>
<li>
<a href="carnet_de_textes/Index.html">Le Carnet de Textes</a>
<ul class="sousMenu">
<li>
<a href="carnet_de_textes/astre_gourmand/Index.html">Astre Gourmand</a>
</li>
<li>
<a href="carnet_de_textes/je_le_deplie/Index.html">Je le déplie</a>
</li>
<li>
<a href="carnet_de_textes/lecon_de_peche/Index.html">Leçon de pêche</a>
</li>
<li>
<a href="carnet_de_textes/meditation_feline/Index.html">Méditation féline</a>
</li>
<li>
<a href="carnet_de_textes/sans_voix_sans_voie/Index.html">Sans voix Sans voie</a>
</li>
<li>
<a href="carnet_de_textes/tic_tac/Index.html">Tic tac</a>
</li>
</ul>
</li>
<li>
<a href="boite_a_tout/Index.html">La Boîte à Tout</a>
<ul class="sousMenu">
<li>
<a href="boite_a_tout/maximes_detournees/Index.html">Maximes Détournées</a>
</li>
<li>
<a href="#">Mon gueuloir à moi</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="description">
<h2>
Accueil
</h2>
<p style="text-align: center;">
<br>
. . . :Bienvenue sur le Carton à Dollz : . . .
</p>
<p>
Ce site regroupe des liens vers des dessins, des textes, des éléments farfelus et bien sûr vers des
dollz, comme son nom l'indique. Tous sont des créations personnelles ou des collaborations pour certaines colorisations.<br>
La partie Dollz n'est pas encore terminée mais vous pouvez cepedant visiter les liens menant vers les textes,
vers les dessins et les concours de l'Ecran à dollz. Le menu se
trouve en haut au milieu de l'écran.<br>
Le site est conçu pour être optimal sur le navigateur Firefox.
Je n'ai cherché en aucune façon à le faire tourner sur IE, il est donc normal que vous constatiez des bugs, (voire même que la navigation soit
quasi impossible) que je corrigerai au fur et à mesure.<br>
Bonne navigation.
</p>
</div>
<div id="galery">
<h2>
What's up, doc?
</h2>
<p>
<span class="lien">News dollistiques:</span><br>
<br>Novembre 2007. <br>
Des pixels sont venus rejoindre les dolls.<br>
Le vote pour le concours de cartable est clos et les awards sont en ligne sur le site. Cliquez <a href=
"ecran_a_dollz/concours/c_cartable/Index.html">là</a> pour voir les entrées.<br>
J'ai fait ma page "sisters"!!! Oui, c'est vrai qu'on pourrait le mettre au singulier, je n'en ai qu'une, mais quand même.<br><br>
<span class="lien">News websitiennes</span> Le site est en pleine restructuration. La partie infographie est -enfin!- terminée et une page "Maximes détournées" a fait son entrée dans la "Boîte à tout".
Les pages des dessins et des textes ont changé d'aspect elles aussi.<br>
Voilà, l'Ecran à Dollz se fait lui aussi une beauté, il sera achevé en tout dernier je pense.<br>
Les menus déroulants sont à prioris fonctionnels, ainsi que leurs liens, sur toutes les pages.
N'hésitez pas à abuser du lien "page précédente" si ce n'était pas le cas. Je prépare un bouton direct "retour vers la page d'accueil" mais il n'est pas encore en ligne. Merci pour votre patience.</p>
<p>
<span class="lien">News textuelles:</span>Le texte <a href="carnet_de_textes/tic_tac/Index.html">Tic tac</a> est en ligne.<br><br>
Mais, parce que ce site reflète aussi ce que je suis, ce pour quoi je suis prête à donner et ce en quoi je
crois, n'hésitez pas à cliquer sur le lien suivant:<br>
<a href="http://www.france-adot.org/"><img src="http://www.france-adot.org/images/bandeaux/234x60-don-vie.gif" alt="Association pour le Don d'Organe et de Tissus humains" border="0"></a>
</p>
<p></p>
</div>
<div id="footer1">
<h2>
Crédits
</h2>
<p>
C'est Mag qui l'a fait avec <a title="Document fait avec KompoZer" href="http://kompozer.net/"><img alt=
"Document fait avec KompoZer" src="http://kompozer.sourceforge.net/images/kompozer_80x15.png" border=
"0"></a><br>
Avril - octobre 2007<br>
<img style="width: 80px; height: 80px;" alt="tropcoolpouIE" src="img/too_cool_badge_fr.png">
</p>
<div id="footer2">
<h2>
Liens/links
</h2>
<p>
<a href="Liens/Index.html#forumdolls">Forums de dolls</a><br>
<a href="Liens/Index.html#creaweb">Sites d'aide à la création web</a><br>
<a href="Liens/Index.html#creainfo">Sites de création infographique</a><br>
<a href="Liens/Index.html#melier">Me lier? Mais bien sûr</a>
</p>
</div>
</div>
<!--div id="extraDiv1"></div-->
<div id="extraDiv2"></div>
</body>
</htmll>
La feuille de styles:
body#Lecartonadollz {
margin: 0px auto;
width: 1400px;
height: 800px;
font-family: Andy;
font-size: large;
background-repeat: no-repeat;
background-position: left top;
background-color: #3694d4;
background-image: url(../img/fond-site-2100-herbes.jpg);
}
body#Lecartonadollz > div#extraDiv1 {
/*margin: 660px 1400px 0 0;*/
background-image: url(../img/Herbes3.png);
/*background-position: left bottom;*/
position: fixed;
height: 140px;
width: 700px;
z-index: 0;
bottom: 0px;
background-repeat: no-repeat;
}
body#Lecartonadollz > div#extraDiv2 {
/*margin: 0 0 600px 1495px;*/
right:0px;
background-image: url(../img/Nuages.png);
/*background-position: right top;*/
position: fixed;
background-repeat: no-repeat;
height: 200px;
width: 605px;
z-index: 0;
}
body#Lecartonadollz h2 {
border: 1px dotted #ffffff;
font-family: Monotype Corsiva;
font-size: large;
color: #ffffff;
background-color: #3366ff;
width: 300px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
body#Lecartonadollz h3 {
font-family: Monotype Corsiva;
font-size: small;
color: #ffffff;
text-align: center;
}
body#Lecartonadollz p {
margin: 3%;
text-align: justify;
font-family: Monotype Corsiva,Courier New;
}
div#pageHeader {
position: absolute;
left: 10px;
width: 400px;
}
div#pageHeader p {
display: inline;
}
div#pageHeader h1 {
border: 2px dotted #ffffff;
left: 10px;
font-family: Monotype Corsiva;
font-size: x-large;
color: #ffffff;
background-color: #3366ff;
text-align: center;
width: 350px;
padding: 10px;
}
div#pageHeader2 {
padding: 5px;
position: absolute;
left: 450px;
width: 1150px;
top: 10px;
}
div#description {
position: absolute;
left: 10px;
top: 100px;
bottom: 100px;
width: 350px;
height:600px;
text-align: justify;
z-index: 10;
}
div#galery {
position: relative;
float: left;
z-index:10;
text-align: justify;
left: 400px;
top: 100px;
bottom: 100px;
height: 450px;
width:1000px;
/*margin: 0 5px 0 0;*/
overflow: auto;
right: 100px;
}
div#footer1 {
position: absolute;
top: 600px;
bottom: 0px;
left: 1100px;
width: 350px;
height: 75px;
}
div#footer2 {
position: absolute;
bottom: 0px;
right: 400px;
width: 300px;
height: 75px;
}
div#footer1 p, div#footer2 p {
font-family: Monotype Corsiva,Courier New;
text-align: center;
}
#galery img{
display: inline;
width:auto;
border: 0;
}
#galery p{
float: left;
padding: 0 1em 0 0;
width: 350px;
}
#galery .lien{
border: 1px dotted #ffffff;
font-family: Monotype Corsiva;
font-size: large;
color: #ffffff;
background-color: #3366ff;
width: 300px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
#description .lien{
border: 1px dotted #000;
font-family: Monotype Corsiva;
font-size: large;
color: #000;
background-color: none;
width: 300px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 2px;
}
#menuDeroulant {
border: none;
margin: 0;
padding: 0;
width: 700px;
list-style-type: none;
position: absolute;
text-align: center;
text-decoration: none;
color: #ffffff;
z-index: 20;
font-family: Monotype Corsiva,Courier New;
}
#menuDeroulant li {
border: 1px dotted ;
margin: 0;
padding: 0;
float: left;
width: 150px;
}
#menuDeroulant .sousMenu {
border: none;
margin: 0;
padding: 0;
list-style-type: none;
display: none;
}
#menuDeroulant .sousMenu li {
border: 0.5px dotted #ffffff;
margin: 0;
padding: 0;
float: none;
width: 150px;
background-color: #3366ff;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited {
margin: 0;
padding: 7px;
display: block;
height: 2%;
color: #ffffff;
text-decoration: none;
background-color: #1375f7;
}
#menuDeroulant li a:hover {
margin: 0;
padding: 7px;
border-right-style: dotted;
display: block;
height: 2%;
color: #ffffff;
text-decoration: none;
background-color: #1375f7;
}
#menuDeroulant li a:active {
border-right: 1px dotted #000099;
margin: 0;
padding: 7px;
display: block;
height: 2%;
text-decoration: none;
background-color: #c87f03;
color: #ffffff;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited {
border: none;
margin: 0;
background: transparent none repeat scroll 0% 50%;
display: block;
text-decoration: none;
color: #ffffff;
}
#menuDeroulant .sousMenu li a:hover {
background-image: none;
background-color: #000099;
}
#menuDeroulant li:hover > .sousMenu {
display: block;
}
#menuDeroulant3 {
border: none;
margin: 0;
padding: 0;
width: 800px;
list-style-type: none;
position: absolute;
text-align: center;
text-decoration: none;
color: #ffffff;
z-index: 2;
font-family: Monotype Corsiva,Courier New;
}
#menuDeroulant3 li {
border: 1px dotted ;
margin: 0;
padding: 0;
float: left;
width: 125px;
}
#menuDeroulant3 .sousMenu {
border: none;
margin: 0;
padding: 0;
list-style-type: none;
display: none;
}
#menuDeroulant3 .sousMenu li {
border: 0.5px dotted #ffffff;
margin: 0;
padding: 0;
float: none;
width: 125px;
background-color: #3366ff;
}
#menuDeroulant3 li a:link, #menuDeroulant3 li a:visited {
margin: 0;
padding: 7px;
display: block;
height: 2%;
color: #ffffff;
text-decoration: none;
background-color: #1375f7;
}
#menuDeroulant3 li a:hover {
margin: 0;
padding: 7px;
border-right-style: dotted;
display: block;
height: 2%;
color: #ffffff;
text-decoration: none;
background-color: #1375f7;
}
#menuDeroulant3 li a:active {
border-right: 1px dotted #000099;
margin: 0;
padding: 7px;
display: block;
height: 2%;
text-decoration: none;
background-color: #c87f03;
color: #ffffff;
}
#menuDeroulant3 .sousMenu li a:link, #menuDeroulant3 .sousMenu li a:visited {
border: none;
margin: 0;
background: transparent none repeat scroll 0% 50%;
display: block;
text-decoration: none;
color: #ffffff;
}
#menuDeroulant3 .sousMenu li a:hover {
background-image: none;
background-color: #000099;
}
#menuDeroulant3 li:hover > .sousMenu {
display: block;
}
body#Lecartonadollz > #compteur{
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
}La feuille javascript
function hover(obj){
if(document.all){
UL = obj.getElementsByTagName('ul');
if(UL.length > 0){
sousMenu = UL[0].style;
if(sousMenu.display == 'none' || sousMenu.display == ''){
sousMenu.display = 'block';
}else{
sousMenu.display = 'none';
}
}
}
}
function setHover(id){
LI = document.getElementById(id).getElementsByTagName('li');
nLI = LI.length;
for(i=0; i < nLI; i++){
LI[i].onmouseover = function(){
hover(this);
}
LI[i].onmouseout = function(){
hover(this);
}
}
}
D'avance merci pour l'aide que vous pourrez m'apporter. Je suis loin d'être pro, j'ai commencé les feuilles CSS il y a six mois (et je ne bosse pas non plus dans l'informatique)[/i][/i]
Modifié par Mag (15 Nov 2007 - 20:47)
,
.