11548 sujets

JavaScript, DOM et API Web HTML5

Roundies.js et balise table

Bonsoir !
je suis actuellement en train de m'arracher les cheveux sur mon projet de BTS IG,
que j'ai en phase de test ici
pour faire vite et efficace, je ne sais pas comment nommer ma balise (représentant les sous menus déroulés) dans le roudies.js :




<div class="posmenu0" onmouseover='menu_show("ac1","ac2","ac3")' onmouseout='menu_hide("ac1","ac2","ac3")'>
               <table>
                      <tr><td id="menu" ><a href="*">Actualites</a></td></tr>
               
                       <tr><td id='ac1' class="submenu"><a href='#'>Nouveautés</a></td></tr> 
              </table> 
</div>


je cherche a mettre une règle sur ma 
class="submenu"





.submenu{
        background: #312e69;
		border: 1px #E0DBF9; 
        padding: 5px auto; 
        color: #fff; 
        text-decoration: none; 
	visibility:'hidden';
	Font-Variant:inherit;
	cursor:url("http://i.imgur.com/z0kUB.png") , auto;
		
		/*Bordure spéciale*/
	-moz-border-radius-bottomleft:10px;
	-moz-border-radius-bottomright:10px;
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;
	-webkit-border-radius: 10px 10px 10px 10px ;
	behavior:url(script/border-radius.htc); /*pour IE*/
	position: relative z-index 0; /*pour IE*/
	/*Fin Bordure spéciale*/

}

.submenu a:hover, a:focus {

        background: #00000; 
	border: 1px #E0DBF9; 
        margin: 0; 
        color: #ffffff; 
        text-decoration: none; 
	visibility:'hidden';
		
		/*Bordure spéciale*/
	-moz-border-radius-bottomleft:10px;
	-moz-border-radius-bottomright:10px;
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;
	-webkit-border-radius: 10px 10px 10px 10px ;
	behavior:url(script/border-radius.htc); /*pour IE*/
	position: relative z-index 0; /*pour IE*/
	/*Fin Bordure spéciale*/
}



j'ai tenté plusieurs essais, comme ceux ci , mais rien a faire, mes coins restent carrés.


DD_roundies.addRule('a.submenu', '10px 10px 10px 10px');
DD_roundies.addRule('.submenu', '10px 10px 10px 10px');
DD_roundies.addRule('td.submenu', '10px 10px 10px 10px');
DD_roundies.addRule('tr.submenu', '10px 10px 10px 10px');
DD_roundies.addRule('table.submenu', '10px 10px 10px 10px');


par contre mon 
<td id="menu">
fonctionne
avec 

DD_roundies.addRule('#menu a', '0 20px 10px 20px');



je suis consciente aussi qu'il y a quelque chose qui cloche avec le comportement de mon menu et que vous avez 1 chance sur 1 et demi d'avoir un truc atroce sur IE... je ne sais plus trop où donner de la tête... et dire que je n'ai pas encore commencer le côté PHP... /soupir/
Modifié par Cainael (14 Feb 2011 - 00:49)
Bonjour,

De mémoire, Roundies.js doit utiliser du positionnement absolu pour placer les éléments générés (du VML je crois) dans les coins de l'élément. Hors, en CSS un tableau ou une cellule de tableau ne peux pas servir de référent pour positionner des éléments en absolu. En bref, si cette hypothèse est correcte: Roundies.js pas utilisable sur des tableaux ou cellules de tableau.
Bonjour fvsch,
merci pour m'avoir répondu !
je pense que votre hypothèse ne tient pas debout (non, me fusillez pas du regard !)
ma 
<td id="menu" >
fonctionnait avec sa règle : 
DD_roundies.addRule('#menu a', '0 20px 10px 20px');
alors qu'il s'agissait aussi d'une <td>.

Au final j'ai abandonné de faire trop d'arrondis, et j'ai refait un autre design, qui cette fois n'accepte même plus un seul arrondis..., j'aurais voulu arrondir les coins du bloc "panier"..., je désespère : http://rayonlune.free.fr/ .

http://i78.servimg.com/u/f78/12/68/70/59/panier10.jpg 



                 <div class="panier" align="center">
                    (X) artiles <br /> 
                    <img src="img/panier.png"/> <br/>
                    <hr/>
                   <small><a href="#"/> Mon compte</a>  |  <a href="#"/> S'inscrire</a></small>
                </div>






.panier{
	font-weight:bold;
	background-color:#5d5a79;
	color:#ded4e2;
	text-align:center;
	width:170px;
	height:auto;
	padding-bottom:3px;
	padding-top:3px;
	margin-top:435px;
	margin-left: 630px;
	margin-right: auto;
	border: 1px #ded4e2 dashed;
	text-decoration: none;
	position:absolute; 
	z-index:2; /*sert a superposer plusieurs éléments, plus l'incice est grand, plus l'importance est : relié a #navi { "menu.jpg" } */

    	/*Bordures arrondies*/
	border-radius: 0px 12px 12 0px; /*W3C - opéra*/
	-moz-border-radius-bottomleft:0px;
	-moz-border-radius-bottomright:12px;
	-moz-border-radius-topleft:12px;
	-moz-border-radius-topright:0px; /*pour mozilla*/
	-webkit-border-radius: 0px 12px 12px 0px; /*pour chrome*/
	behavior:url(script/border-radius.htc); /*pour IE*/

		/*Fin Bordures*/


et la règle roundies :


<!--[if lte IE 8]> 
<script type="text/javascript" src="roundies.js"> 

        DD_roundies.addRule('.panier', '0px 12px 0px 12px');

</script><![endif]-->





la méthode du "border-radius.htc" ne convient pas, car j'ai déjà une propriété position et index.


Tout le reste du design arrondis sont des images.
Au final, je me demande, si je ne devrais pas rester en image...
Modifié par Cainael (15 Feb 2011 - 17:21)
Bonjour,

Pour commencer, je voudrais rappeler que le script Roundies de Drew Diller (DD_roundies) est une expérience, annoncé par l'auteur comme étant en version alpha (version 0.0.2a donc de l'aveu de l'auteur incomplète et instable), et pas mis à jour depuis deux ans. Rien que pour cette raison j'en déconseille formellement l'utilisation, quelles que soient les qualités de ce script.

De plus, la section Known Issues de la documentation de ce script dit explicitement que ça marche mal avec les cellules de tableau:
http://www.dillerdesign.com/experiment/DD_roundies/#lacking
Enfin, la dernière version du script n'a jamais été testée avec (et corrigée pour) IE8, et la dernière version testée, qui présentait de nombreux problèmes, était IE8b2:
http://www.dillerdesign.com/experiment/DD_roundies/#supported_browsers

Mon conseil: oublier ce script (et de manière générale toute solution JS pour des coins arrondis dans IE). IE9, qui sort dans les prochaines semaines, aura border-radius. Si les coins carrés dans IE 7-8 ne sont pas acceptables, utiliser des images de fond.
Sujet clos
Aller à