Sujet: CSS Newbie
23/11/2006 @ 13:16:23: Jean-Christophe: CSS Newbie
Plop :oh:

J'ai besoin de l'équipe. :tongue:

J'ai une liste. Cette liste, c'est des liens. Je voudrais qu'à coté des liens, il y ai des carrés (comme si c'était l'image de la liste).
Je voudrais aussi que le carré change de couleur quand le lien est actif... En gros, le bt est de savoir où on est.

Mettre un carré à côté d'un lien (comme un puce dans la liste), je sais faire. "list-style-image" fait ca très bien. Par contre, je me demande si je fais bien de chercher dans cette direction là :ohwell:

Voilà :topicalacon:
23/11/2006 @ 13:19:51: zion: CSS Newbie
http://css.alsacreations.com/Galeries-de-menus-en-CSS

C'est parfaitement bien de chercher dans cette direction :joce:
Te faudra peut être bidouiller un peu pour quand le lien est actif mais c'est vraiment plus propre en CSS :joce:
23/11/2006 @ 13:52:30: etik: CSS Newbie
Suis bien d'accord, je viens d'heriter d'un site...
Je re-ecris tout en DIV et CSS. a mort les tables :banzai:
Pour l'instant le menu fait exactement ce que tu recherches.
Si tu le trouves en CSS je suis preneur !

function MM_findObj(n, d) {
var p,i,x;
if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImgRestore() {
var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}

function MM_swapImage() {
var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x;
if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

<a href="http://www.informaticien.be/" onmouseout=MM_swapImgRestore() onmouseover=MM_swapImage('icon_1','','img/icon1_mo.gif',1) class=boxlink target=_top>
<img src=img/icon1.gif name=icon_1 width=11 height=11 border=0>oh le joli site</a>


icon1.gif c'est le carre vide
icon1_mo.gif c'est le carre remplis
23/11/2006 @ 13:58:14: Jean-Christophe: CSS Newbie
bon, il ne me manque pas grand chose...
Pour l'instant, j'ai un carré.
J'arrive à le faire changer de couleur avec le hover.
Mais il me manque un petit détail pour utiliser "active"
ul.menu a{
display: block;
text-indent: 20px;
background-image:url(img/square_empty.png);
background-position: left center;
background-repeat: no-repeat;
}

ul.menu a:hover{
background-image:url(img/square_full.png);
background-position: left center;
background-repeat: no-repeat;
}


Ca, ca marche. Mais pour le active, je dois mettre quoi avant le {}? "ul.menu active a" ?
23/11/2006 @ 14:05:47: Sillage: CSS Newbie
ul.menu a:active non ?
23/11/2006 @ 14:16:22: Jean-Christophe: CSS Newbie
ben non :spamafote:
"ul.menu a:active" change l'icone le temps que je clicke. Dès que je lache (et que j'arrive là où je veux), ca revient à la position originale.
23/11/2006 @ 14:29:39: Jean-Christophe: CSS Newbie
ayè!!
J'ai trouvé :grin:
Code:
  1. ul.menu a{ 
  2. display: block; 
  3. text-indent: 20px; 
  4. background-image:url(img/square_empty.png); 
  5. background-position: left center; 
  6. background-repeat: no-repeat; 
  7. } 
  9. ul.menu a.active{ 
  10. background-image:url(img/square_full.png); 
  11. background-position: left center; 
  12. background-repeat: no-repeat; 
  13. }
23/11/2006 @ 14:39:46: Jean-Christophe: CSS Newbie
Bon, j'ai encore une question...

Comment spécifier un paramètre pour un titre dans un DIV.
Je connais le nom du div et la classe du titre.
Pour être clair, je voudrais mettre display:none pour le titre du menu en bas, à droite http://www.jacquesfryns.6tem.be/?q=node/1
23/11/2006 @ 15:03:47: etik: CSS Newbie
Cool! j'ai aussi pu changer mon menu et passer en CSS.
Tu peux aussi utiliser list-style-image: dans un UL a la place de tous les background*
23/11/2006 @ 15:31:06: Jean-Christophe: CSS Newbie
oui, mais alors, je ne sais pas les changer. Si?
23/11/2006 @ 16:03:13: etik: CSS Newbie
Si mais il fait le mettre au niveau <li>

Code:
  1. <html> 
  2. <head> 
  3. <style type="text/css"> 
  4. <!-- 
  5. .menuItem a {  
  6. list-style-image: url(img/square_empty.gif);  
  7. } 
  9. .menuItem a:hover { 
  10. list-style-image: url(img/square_full.gif);  
  11. } 
  12. --> 
  13. </style> 
  14. </head> 
  15. <body> 
  16. <ul> 
  17. <li class=menuItem><a href=#>menu1</a></li> 
  18. <li class=menuItem><a href=#>menu2</a></li> 
  19. <li class=menuItem><a href=#>menu3</a></li> 
  20. <li class=menuItem><a href=#>menu4</a></li> 
  21. </ul> 
  22. </body> 
  23. </html>
23/11/2006 @ 16:05:34: Jean-Christophe: CSS Newbie
ok, merci, je vais voir ca.
Tant que tu es là, tu n'aurais pas une idée pour ma question, quelques posts au dessus, dans ce topic?
23/11/2006 @ 16:10:59: etik: CSS Newbie
visibility:hidden ??
23/11/2006 @ 16:13:58: Jean-Christophe: CSS Newbie
ben oui, mais mon problème, c'est que je ne connais pas du tout la syntaxe de CSS, donc, je ne sais pas comment capter l'objet à qui je veux appliquer la propriété.
:spamafote:

c'est sans doute un truc du style
Code:
  1. block-menu-37 h2 { 
  2. visibility: hidden; 
  3. }

M'ai j'en sais rien du tout en fait...
Tous les tutos que j'ai trouvé jusqu'ici expliquent comment appliquer les propriétés, mais pas à quoi.
23/11/2006 @ 16:15:12: Jean-Christophe: CSS Newbie
Je ne sais même pas comment s'appelle la partie de la ligne 1. avant le "{" :totoz:
23/11/2006 @ 16:18:05: etik: CSS Newbie
Tu as le code <html> ou il y a le block-menu-37
23/11/2006 @ 16:26:10: Jean-Christophe: CSS Newbie
Code:
  1. <div class="block block-menu" id="block-menu-37"> 
  2.     <h2 class="title">Menu</h2> 
  3.     <div class="content"> 
  4.         <ul class="menu"> 
  5.             <li class="collapsed"><a href="/?q=node/2" title="">activités</a></li> 
  6.             <li class="leaf"><a href="/?q=node/1" title="" class="active">contact</a></li> 
  7.             <li class="leaf"><a href="/?q=user" title="Connexion à la partie privée du site.">Privé</a></li> 
  8.         </ul> 
  9.     </div> 
  10. </div>
23/11/2006 @ 16:26:43: etik: CSS Newbie
a tester

block-menu-37.h2.title{display:none;}
23/11/2006 @ 16:27:01: zion: CSS Newbie
Citation de: Jean-Christophe
Bon, j'ai encore une question...

Comment spécifier un paramètre pour un titre dans un DIV.
Je connais le nom du div et la classe du titre.
Pour être clair, je voudrais mettre display:none pour le titre du menu en bas, à droite http://www.jacquesfryns.6tem.be/?q=node/1



#block-menu-37 h2 {
visibility: hidden;
}


:petrus:
23/11/2006 @ 16:28:40: Jean-Christophe: CSS Newbie
Tant que vous êtes là, c'est quoi la règle?
parfois c'est un #, parfois un point et parfois rien devant et parfois il y a des espaces dedans...
Je suis perdu!
1 2 
Retour