Programmation » CSS Newbie
Catégorie:  
   
CSS Newbie
Publié le 23/11/2006 @ 13:16:23,
Par Jean-Christophe
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:
   
CSS Newbie
Publié le 23/11/2006 @ 13:19:51,
Par zion
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:
Je suis le Roy :ocube:
   
CSS Newbie
Publié le 23/11/2006 @ 13:52:30,
Par etik
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

Dernière édition: 23/11/2006 @ 16:20:57
   
CSS Newbie
Publié le 23/11/2006 @ 13:58:14,
Par Jean-Christophe
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" ?
   
CSS Newbie
Publié le 23/11/2006 @ 14:05:47,
Par Sillage
ul.menu a:active non ?
   
CSS Newbie
Publié le 23/11/2006 @ 14:16:22,
Par Jean-Christophe
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.
   
CSS Newbie
Publié le 23/11/2006 @ 14:29:39,
Par Jean-Christophe
ayè!!
J'ai trouvé :grin:
  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. ul.menu a.active{ 
  8. background-image:url(img/square_full.png); 
  9. background-position: left center; 
  10. background-repeat: no-repeat; 
  11. }
   
CSS Newbie
Publié le 23/11/2006 @ 14:39:46,
Par 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
   
CSS Newbie
Publié le 23/11/2006 @ 15:03:47,
Par etik
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*
   
CSS Newbie
Publié le 23/11/2006 @ 15:31:06,
Par Jean-Christophe
oui, mais alors, je ne sais pas les changer. Si?
   
CSS Newbie
Publié le 23/11/2006 @ 16:03:13,
Par etik
Si mais il fait le mettre au niveau <li>

  1. <html
  2. <head
  3. <style type="text/css"
  4. <!-- 
  5. .menuItem a {  
  6. list-style-image: url(img/square_empty.gif);  
  7. .menuItem a:hover { 
  8. list-style-image: url(img/square_full.gif);  
  9. --> 
  10. </style
  11. </head
  12. <body
  13. <ul
  14. <li class=menuItem><a href=#>menu1</a></li> 
  15. <li class=menuItem><a href=#>menu2</a></li
  16. <li class=menuItem><a href=#>menu3</a></li> 
  17. <li class=menuItem><a href=#>menu4</a></li
  18. </ul
  19. </body
  20. </html>

Dernière édition: 23/11/2006 @ 16:19:00
   
CSS Newbie
Publié le 23/11/2006 @ 16:05:34,
Par Jean-Christophe
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?
   
CSS Newbie
Publié le 23/11/2006 @ 16:10:59,
Par etik
visibility:hidden ??
   
CSS Newbie
Publié le 23/11/2006 @ 16:13:58,
Par Jean-Christophe
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
  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.
   
CSS Newbie
Publié le 23/11/2006 @ 16:15:12,
Par Jean-Christophe
Je ne sais même pas comment s'appelle la partie de la ligne 1. avant le "{" :totoz:
   
CSS Newbie
Publié le 23/11/2006 @ 16:18:05,
Par etik
Tu as le code <html> ou il y a le block-menu-37
   
CSS Newbie
Publié le 23/11/2006 @ 16:26:10,
Par Jean-Christophe
  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>
   
CSS Newbie
Publié le 23/11/2006 @ 16:26:43,
Par etik
a tester

block-menu-37.h2.title{display:none;}
   
CSS Newbie
Publié le 23/11/2006 @ 16:27:01,
Par zion
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:
Je suis le Roy :ocube:
   
CSS Newbie
Publié le 23/11/2006 @ 16:28:40,
Par Jean-Christophe
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!
Répondre - Catégorie:  
Informaticien.be - © 2002-2024 AkretioSPRL  - Generated via Kelare
The Akretio Network: Akretio - Freedelity - KelCommerce - Votre publicité sur informaticien.be ?