Programmation » CSS Newbie
CSS Newbie
Publié le 23/11/2006 @ 13:16:23,
Par Jean-ChristophePlop
J'ai besoin de l'équipe.
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à
Voilà
J'ai besoin de l'équipe.
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à
Voilà
CSS Newbie
Publié le 23/11/2006 @ 13:19:51,
Par zionhttp://css.alsacreations.com/Galeries-de-menus-en-CSS
C'est parfaitement bien de chercher dans cette direction
Te faudra peut être bidouiller un peu pour quand le lien est actif mais c'est vraiment plus propre en CSS
C'est parfaitement bien de chercher dans cette direction
Te faudra peut être bidouiller un peu pour quand le lien est actif mais c'est vraiment plus propre en CSS
Je suis le Roy
CSS Newbie
Publié le 23/11/2006 @ 13:52:30,
Par etikSuis bien d'accord, je viens d'heriter d'un site...
Je re-ecris tout en DIV et CSS. a mort les tables
Pour l'instant le menu fait exactement ce que tu recherches.
Si tu le trouves en CSS je suis preneur !
icon1.gif c'est le carre vide
icon1_mo.gif c'est le carre remplis
Dernière édition: 23/11/2006 @ 16:20:57
Je re-ecris tout en DIV et CSS. a mort les tables
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>
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-Christophebon, 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"
Ca, ca marche. Mais pour le active, je dois mettre quoi avant le {}? "ul.menu active a" ?
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;
}
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:16:22,
Par Jean-Christopheben non
"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.
"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-Christopheayè!!
J'ai trouvé
J'ai trouvé
- 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.active{
- background-image:url(img/square_full.png);
- background-position: left center;
- background-repeat: no-repeat;
- }
CSS Newbie
Publié le 23/11/2006 @ 14:39:46,
Par Jean-ChristopheBon, 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
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 etikCool! 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*
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-Christopheoui, mais alors, je ne sais pas les changer. Si?
CSS Newbie
Publié le 23/11/2006 @ 16:03:13,
Par etikSi mais il fait le mettre au niveau <li>
Dernière édition: 23/11/2006 @ 16:19:00
- <html>
- <head>
- <style type="text/css">
- <!--
- .menuItem a {
- list-style-image: url(img/square_empty.gif);
- }
- .menuItem a:hover {
- list-style-image: url(img/square_full.gif);
- }
- -->
- </style>
- </head>
- <body>
- <ul>
- <li class=menuItem><a href=#>menu1</a></li>
- <li class=menuItem><a href=#>menu2</a></li>
- <li class=menuItem><a href=#>menu3</a></li>
- <li class=menuItem><a href=#>menu4</a></li>
- </ul>
- </body>
- </html>
Dernière édition: 23/11/2006 @ 16:19:00
CSS Newbie
Publié le 23/11/2006 @ 16:05:34,
Par Jean-Christopheok, 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?
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:13:58,
Par Jean-Christopheben 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é.
c'est sans doute un truc du style
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.
c'est sans doute un truc du style
- block-menu-37 h2 {
- visibility: hidden;
- }
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-ChristopheJe ne sais même pas comment s'appelle la partie de la ligne 1. avant le "{"
CSS Newbie
Publié le 23/11/2006 @ 16:18:05,
Par etikTu 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- <div class="block block-menu" id="block-menu-37">
- <h2 class="title">Menu</h2>
- <div class="content">
- <ul class="menu">
- <li class="collapsed"><a href="/?q=node/2" title="">activités</a></li>
- <li class="leaf"><a href="/?q=node/1" title="" class="active">contact</a></li>
- <li class="leaf"><a href="/?q=user" title="Connexion à la partie privée du site.">Privé</a></li>
- </ul>
- </div>
- </div>
CSS Newbie
Publié le 23/11/2006 @ 16:26:43,
Par etika tester
block-menu-37.h2.title{display:none;}
block-menu-37.h2.title{display:none;}
CSS Newbie
Publié le 23/11/2006 @ 16:27:01,
Par zionBon, 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
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;
}
Je suis le Roy
CSS Newbie
Publié le 23/11/2006 @ 16:28:40,
Par Jean-ChristopheTant 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!
parfois c'est un #, parfois un point et parfois rien devant et parfois il y a des espaces dedans...
Je suis perdu!