28173 sujets

CSS et mise en forme, CSS3

bonjour a tous.

Vous allez me dire: onmouseout, c du java tu n'es pas dans le bon salon. Sauf que je pense (j'ai bien dis je pense) que mon soucis provient de mon code css.
Je vous explique le petit soucis: ayant suivi le tuto de alsacreations sur le menu horizontale en css avec un code java au survole, je me trouve confronté à un soucis avec Internet Explorer. Quand je survole mon menu principal, les sous menus apparaissent, cependant quand j'essaie de survoler c derniers, IE l'ai fait disparaitre. J'arrive a atteindre les premiers liens de ma liste mais au bout d'un certains moment elle disparait. Sous mozilla aucun soucis tout fonctionne parfaitement.
Je vous envoie le code :

css:


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

#menu {
left: auto;
right:auto;
}

#menu dl {
float: left;
padding-left:8px;
}


img{
border:none;
}

#menu a img{
margin-top:1px;
padding-top:4px;
}

#menu a:hover{
border-bottom:3px solid #dc143c;
cursor:default;
}

#menu dd {
position:absolute;
width:170px;
height:100%;
}
#menu li {
text-align: center;
background: #fff;
border:1px solid #dc143c;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
border: 0 none;
height:100%;
}

#menu li a{
display:block;
height:100%;
}

#menu li a:hover {
background: #dc143c;
border:none;
cursor:pointer;
color:#ffffff;
border:1px solid #dc143c;
}

java:

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

jespere avoir était clair dans mes explications!!

en vous remerciant d'avance
++

Smiley cligne
Modifié par slumbering (21 May 2007 - 10:00)
Bonjour à tous..
j'ai le même problème.. j'ai bien fait attention à lire le tutorial (me semble-t-il) ce qui a permit de corriger 2 , 3 trucs mais le coup du onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
sur la balise dd ca ne marche pas bien... effectivement j'ai aussi le probleme que le menu se déroule bien mais se repli au passage de la 2 ou 3eme ligne....
pour exemple:
www.caimandesign.com , le menu Société et Prestations sont sans le onmouseout et le menu Langage l'a.. résultat ce dernier menu cafouille....

<dl>	
	<dt class="menu-deroulant" onmouseover="javascript:montre('smenu3');" >Langages<img src="/images/arrow.gif" width="22" height="11" /></dt>
	<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
	<ul>
    <li>
	<a >                                  </a></li>
    <li><a href="/index.php">Français</a></li>
    <li><a href="lien1">English - webtranslator -</a></li>
    <li><a href="lien2">Español - webtranslator -</a></li>
    <li><a href="lien3">Deutsch - webtranslator -</a></li>
    <li><a href="/pages/ch/index.php">Chinese</a></li>
    <li><a >                                  </a></li>
	</ul>
	</dd>
</dl>


tient dans la foulée, pour faire des sauts de ligne dans le menu, je n'ai rien trouvé de mieux que d'écrire une ligne entière de " " (espace) sans lien href... pas super propre meme si ca marche....
Je ne sais pas si on peut faire mieux, surement...

Si on est pas dans le bon forum, peut on migrer le sujet vers "java" ?mais effectivement le CSS peut etre la cause :


div#menu {
	Z-INDEX: 100;
	WIDTH: 978px;
	TOP: 100px;
	POSITION: absolute;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dl {
float: left;
width: 200px;
}
#menu dt {
cursor: pointer;
text-align: left;
font-weight: bold;
background: #000000;
}
#menu dd {
border: 0;
display:none
}
#menu li {
text-align: left;
padding-left: -20px;
background: #000000;
}
#menu li a, #menu dt a {
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 19px;
font-style: normal;
display: block;
height: 100%;
padding-left: 20px;
}
#menu li a:hover, #menu dt a:hover {
background-color: #41283E;
padding-left: 20px;
}



On m'a dit que sur Safari 2.0.4 (Mac Book Pro), les menus se déroulent bien (ne se renreoulent pas on a vu) mais surtout les item sont selectionnés deux par deux !!!! misère !
Là si quelqu'un peu me donner un coup de main, une indication je suis plus que preneur !
Merci infiniement,
Armand
Bonsoir,

a écrit :
... onmouseout, c'est du java ...


You lost ! Game Over Smiley biggol ! Plus sérieusement, ne pas confondre Java avec Javascript ; ce sont deux langages bien différents Smiley cligne .

Slumbering, pourrais-tu mettre tes codes (CSS et Javascript) en forme (encadré par [code ][ /code] sans les espaces) afin que ton post soit plus lisible (on pourra ainsi mieux réfléchir à ton problème). Merci par avance.

Romain
pour faire avancer le problème, le onmouseout fait que mon menu langages de www.caimandesign.com marche absoluement parfaitement sous Firefox !!!!! alors sous IE et Safari que se passe-t-il ??? help, je fouille, creuse , code, décode mais ne trouve pas...
Armand
Modifié par Armand Billard (17 May 2007 - 01:02)
OUps !! yodaswii tu as tout a fait raison, je voulais parler du javascript et non pas du java Smiley langue .

Désolé pour le code mal présenté: le voici de nouveau.

le java


<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


et le css

dl, dt, dd, ul, li {
margin: 0 9px 0 3px;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 220px;
left: auto;
right:auto;
z-index:2;
}
#menu dl {
float: left;
}

img{
border:none;
}

#menu a img{
margin-top:1px;
padding-top:4px;
}

#menu a:hover{
border-bottom:3px solid #fdf1b8;
cursor:default;
}

#menu dd {
position:absolute;
width:170px;
height:100%;
}
#menu li {
text-align: center;
background: #fff;
border:1px solid #fdf1b8;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
height: 100%;
border: 0 none;
}


#menu li a:hover {
background: #fbea99;
display:block;
border:none;
cursor:pointer;
}


Armand, je vois que je ne suis pas le seul, ce qui me rassure Smiley ravi
Sinon j'ai une solution pas top top mais qui dépanne. TU reprend le onmouseout et te le remplace par un onClick(que tu place dans la balise body)

 <body onClick="javascript:montre('');">


La personne na juste qu'à cliquer sur la page pour faire disparaitre le menu.
C'est vraiment du bidouillage et je ne sais pas si niveau sémantique ça le fait. Mais ça marche Smiley murf

a plus
jf
C bon ! j'ai trouvé quel était le problème.

Il s'agit de mon animation flash se trouvant juste derriere mes sous menu.
Donc pour ceux à qui le problème arrive, eviter de coller des anims flash à côté de votre menu déroulant.

Armand pour toi le probleme était identique notament sur le site que tu nous a indiqué. Ton menu recouvre une anim flash et c la que le probleme arrive.
Bref ca marche pour moi désormé.
Salut tout le monde...
C'était surement une bonne piste le flash mais la ca ne m'aide pas car meme dans une page sans Flash (avec juste une image en jpg) le probleme reste le meme ...
http://www.caimandesign.com/pages/fr/realisations/thomson-st2030.php
Pour la construction de mes pages j'ai un fichier header.html et je l'appelle dans chacune des pages (par exemple dans thomson-st2030.php) avec :
<?php
    include("header.html");
?>

dans une page construite sur un mode html mais renommée .php

ca donne par exemple pour la page en question :

<SCRIPT type=text/javascript>
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</SCRIPT>

<link href="../../../caimandesigncss.css" rel="stylesheet" title="caimandesigncss" type="text/css">
</head>

<body>

<?php
    include("../../../header.html");
?>

<div id="conteneur-index">
<div id="image"><img src="../../../images/realisations/thomson-video-player.jpg" />
</div>


<div class="text-etudes" id="text-etudes"> 
  <div>Thomson, leader sur le march&eacute; de l'&eacute;quipement vid&eacute;o
      a pr&eacute;sent&eacute; au Cebit 2006 un lecteur multim&eacute;dia offrant la possibilit&eacute;
      de se connecter en Wi-Fi sur le r&eacute;seau internet. <br />
      Streaming audio et vid&eacute;o sont au programme de cet &eacute;tonnant prototype 
      fonctionnel qui a mobilis&eacute; le savoir faire de Thomson en mati&egrave;re de 
      d&eacute;veloppement high-tech associ&eacute; au design avant-gardiste sign&eacute; Caiman Design.</div>
</div>

<div id="conteneur-brut">
<div id="conteneur-texte">
	<div align="justify">
	<p class="titre"><span class="titre">THOMSON WI-FI Portable Multimediaplayer</span><span class="texte"><br />
	<br />
	</span><span class="sous-titre">Le Thomson WI-FI Portable Multimediaplayer a &eacute;t&eacute; pr&eacute;sent&eacute; dans le cadre de l'exposition Cebit 2006. <br />
	</span>
	<div class="texte"><span class="texte">Il s'agit d'un lecteur de vid&eacute;os de type Mpeg 4 design&eacute; pour Thomson par Caiman Design. Le Thomson Lyra Vid&eacute;o peut se connecter &agrave; un r&eacute;seau WiFi pour r&eacute;cup&eacute;rer ou lire de la musique, des vid&eacute;os, visionner des images ou encore afficher des documents de formats divers. Il dispose d'un grand &eacute;cran couleur tactile de 4 pouces (480x272px), d'un DD de 30Go, du Wi-Fi g, de l'USB host 2.0 et d'une compatibilité importante audio/video/photo.  <br />
	Le Lyra Vid&eacute;o Player est muni d'une baterie extractible et d'un pied de stand repliable.</span>
	<br />
	<span class="sous-titre"><br />
	Ci apr&egrave;s une vid&eacute;o film&eacute;e au Cebit 2006 : <br />
	<br />
	</span><span class="texte">Le chef de projet Thomson pr&eacute;sente le WI-FI Portable Multimediaplayer : </span><span class="sous-titre"><br />
	<br />
	</span>
	<embed src="http://video.google.com/googleplayer.swf?docId=1657154656436442273&hl=fr" style="width:918px; height:545px;" id="VideoPlayback" type="application/x-shockwave-flash" flashvars=""> </embed>
</div>
</div>
</div>
</div>

<div class="copyright" id="bas-de-page"><br />
  <br />
  <a href="http://www.caimandesign.com">caiman design</a> copyrights, all rights reserved.</div>
</div>

</body>


toujours est-il que le onmouseout ne marche pas... j'ai bricolé qu'une fios un menu déplié, il se replie si je passe la souris sur mon logo en haut à gauche car j'ai placé un onmouseout à l'arrache comme ça :
<div id="conteneur-logo"><img src="/images/logo.jpg" width="978" height="100" border="0" usemap="#Map" /onmouseout="javascript:montre('');">
  <map name="Map" id="Map">
    <area shape="rect" coords="13,16,219,55" href="/index.php" />
  </map>
</div>

mais si je le place sur l'image qui est sous le menu, le menu se replie illico presto donc je ne peux pas utiliser cette astuce.. de plus si cette feinte marche sous IE, elle ne marche pas sous Firefox.

donc le problème reste entier.... d'autant que :
(apprécier la différence, les menus Sociétés et Prestations sont sans "onmouseout", le menu Langages avec "onmouseout")
1 - le onmouseout débloque sur IE (menu langages)
2 - le onmouseout marche parfaitement sous Firefox (menu langages)
3 - l'ensemble semble mal marcher sous Safari mais je n'ai pas ou voir de mes yeux... quelqu'un me confirme ou infirme ?

merci de m'aider sur ce sujet épineux, les tutoriaux sont très bien fait mais la je sèche lamentablement sur ce code...
Armand
Salut,

a propos de ton menu moi je constate sur la page donnée que tes 2 premiers menu fonctionne bien sous ie6. mais pas le troisieme qui se replie trop vite pour sélection.

en regardant ton code je vois cependant une différence de code pour le 3 eme menu.

au lieu de

<dt class="menu-deroulant" onmouseover="javascript:montre('smenu2');">Prestations<img src="/images/arrow.gif" width="22" height="11" /></dt>
<dd id="smenu2">



tu as

<dt class="menu-deroulant" onmouseover="javascript:montre('smenu3');" >Langages<img src="/images/arrow.gif" width="22" height="11" /></dt>
<dd id="smenu3" [b]onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');"[/b]>	



si tu retire ce qui est en gras tes 3 menus fonctionne sous ie6.

voila je sais pas si ca repond totalement a ton pb mais ca fait avancer le schmilblic..

PS: ton code contiens 2 doctype deux <body> deux.....etc....
tu dois faire un include d'une page complete je sais pas si c'est good good.


maintenant
Modifié par CPascal (18 May 2007 - 23:26)
Salut, merci a toi pour ton analyse du code (je nettoierai les doblons déjà..)
effectivement ce que tu as remarqué en identifié en gras, c'est ce au ej'ai fais expres dans mon code pour montrer la différence. En fait quand tu dis aue les deux premiers menus marchent bien, moi je trouve qu'ils ne fonctionnent pas car ils ne se replient pas automatiquement quand on sort la souris du menu.. le 3eme lui se replie trop vite...
le problème est d'identifier le couac et de coder un nouveau truc qui marcherait sous IE... sous Firefox ca marche bien et sous Opera je ne sais pas ....
voila !!! Bon week end , Armand
Je viens de changer le titre du sujet! j'ai retire le "resolu" car Armand tu as le probleme qui persiste et pour etre honnete moi aussi. En fait meme sans le flash mon menu disparait trop vite. Si quelqu'un pouvait nous aider merci d'avance Smiley cligne
Ah ah le sujet repart !!!
Pinaise je trouve toujours pas et là j'ai beau fouiller et modifier le code je suis dans la panade... Y a t il un codeur - modérateur qui pourrait nous venir en aide ?
Merci infiniement..
L'url à problèmewww.caimandesign.com
à propos des menus..
je répète, les menus Société et Prestations marchent mais ne se replient pas on mouse out.. et le menu Langages (sur lequel j'ai appliqué un onmouseout) se replie beaucoup trop vite...
C'est comme ca sur IE, le tout marche comme il faudrait sur Firefox et sur Opera ca semble bugger avec des sélections "doubles"...
Merci
Armand