Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

aide pour CSS

79 réponses
Avatar
mannucci_spamkiller
Binsouère.

Je débute dans les CSS depuis quelques jours seulement, et suis sur la
personnalisation d'un thème Wordpress (c'est le Dyne 1.1).
je ne sais pas si c'est la meilleure idée pour mieux apprendre les CSS,
mais bon.

Et je galère grave pour modifier (pourtant "à peine") le menu
horizontal)

Voici la partie concernée du fichier style.css

#menu{background:url(images/menu2.png) repeat-x;
text-transform:uppercase; position:absolute; text-align:center:;
left:10%; height:55px; top:252px; margin:0; padding:0;}
#menu,#menu ul{list-style:none;line-height:2;}
#menu a,#menu a:hover{display:block; border:none; text-decoration:none;
color:#302b39;}
#menu li{float:left;list-style:none;border-right:1px solid #dad9ce;}
#menu a,#menu a:visited{display:block; font-weight:700; color:#302b39;
padding:10px 12px;}
#menu a:hover,#menu a:active{background-image:url(images/menu3.png);
position:relative; color:black; text-decoration:none;}

menu2.png est le fond pour les boutons, et menu3.png est le fond pour
ces mêmes boutons, mais pour le survol (2 carrés identiques mais de
couleurs differentes, en fait)

voilà ce que j'ai compris du mécanisme:
le menu se constitue horizontalement, avec un nombre de boutons
correspondant aux nombre de pages "publiées", chaque bouton a une
longueur variable (fonction de la longueur du titre donné à chaque page)
et est séparé du bouton suivant par une bande verticale de 1px (qui me
semble être le "border-right:1px" de la ligne "#menu li{.........}".
Le texte qui vient s'y poser est "centré", et forcé en "uppercase".

Ce qui m'emm...., c'est cette ligne de séparation verticale de 1 pixel,

moi, je voudrais conserver cette séparation (de 2px mais là n'est pas
problème), mais je la voudrais "transparente"... pour qu'on voit l'image
d'arrière-plan entre les boutons.

j'ai bien essayé de remplacer
#menu li{float:left;list-style:none;border-right:1px solid #dad9ce;}
par
#menu li{float:left;list-style:none;border-right:2px
border-color:transparent;}

mais ça n'a pas marché, je perds carrément la séparation.

bref, si quelqu'un sait comment je peux avoir 2 pixels transparents
comme intervalle, je serai vach'meeent content.

--
Jean-marc Mannucci
************************************************

10 réponses

1 2 3 4 5
Avatar
Olivier Miakinen
Bonjour,

Je n'ai pas le temps de réfléchir à ton problème en détail, mais voici
déjà une adresse utile : >http://jigsaw.w3.org/css-validator/>.

Elle devrait te permettre déjà d'éliminer les problèmes liés à la seule
syntaxe. Par exemple :

Le 24/11/2008 01:25, jean-marc Mannucci a écrit :

#menu{background:url(images/menu2.png) repeat-x;
text-transform:uppercase; position:absolute; text-align:center:;


^
(il y a un « : » en trop)

Et aussi :

j'ai bien essayé de remplacer
#menu li{float:left;list-style:none;border-right:1px solid #dad9ce;}
par
#menu li{float:left;list-style:none;border-right:2px
border-color:transparent;}



Il manque un « ; » entre la définition de border-right et celle de
border-color. Au fait, je ne sais pas si tu fais bien de retirer le
« solid » de border-right, voire si tu ne pourrais pas simplement
remplacer « #dad9ce » par « transparent » au lieu de rajouter un
border-color.

bref, si quelqu'un sait comment je peux avoir 2 pixels transparents
comme intervalle, je serai vach'meeent content.



Pas moi, ou du moins pas ce matin. Si j'ai le temps j'y reviendrai plus
tard.
Avatar
Olivier Miakinen
Le 24/11/2008 08:35, Olivier Miakinen a écrit :

bref, si quelqu'un sait comment je peux avoir 2 pixels transparents
comme intervalle, je serai vach'meeent content.



Pas moi, ou du moins pas ce matin. Si j'ai le temps j'y reviendrai plus
tard.



Bon, juste une idée quand même : ramener la bordure à 0, et rajouter un
padding ou margin de 2 pixels à la place.
Avatar
SAM
Le 11/24/08 1:25 AM, jean-marc Mannucci a écrit :
Binsouère.

Je débute dans les CSS depuis quelques jours seulement,

Voici la partie concernée du fichier style.css

#menu{background:url(images/menu2.png) repeat-x;
text-transform:uppercase; position:absolute; text-align:center:;
left:10%; height:55px; top:252px; margin:0; padding:0;}
#menu,#menu ul{list-style:none;line-height:2;}



2 quoi ? pour line-height
(px em pt cm km ?)
Si c'est 2px ça va pas être bien haut là !

#menu a,#menu a:hover{display:block; border:none; text-decoration:none;
color:#302b39;}
#menu li{float:left;list-style:none;border-right:1px solid #dad9ce;}
#menu a,#menu a:visited{display:block; font-weight:700; color:#302b39;
padding:10px 12px;}
#menu a:hover,#menu a:active{background-image:url(images/menu3.png);
position:relative; color:black; text-decoration:none;}

menu2.png est le fond pour les boutons, et menu3.png est le fond pour
ces mêmes boutons, mais pour le survol (2 carrés identiques mais de
couleurs differentes, en fait)



Outre qu'on se demande pourquoi utiliser des images quand on peut
utiliser des couleurs, pour le roll-over en CSS on n'utilise qu'une
image. Voir :
<http://stephane.moriaux.pagesperso-orange.fr/internet/web_css/rollover/bouton_3_etats_css.htm>
ou mieux : "portes coulissantes" chez Google

voilà ce que j'ai compris du mécanisme:
le menu se constitue horizontalement, avec un nombre de boutons
correspondant aux nombre de pages "publiées", chaque bouton a une
longueur variable (fonction de la longueur du titre donné à chaque page)



donc voici :
LI est en float:left;
sa largeur va réagir comme en position: absolute;
c a d qu'elle va s'adapter à son contenu.

A (contenu du LI) est en display: block;
le lien n'est plus en-ligne mais en bloc
(il peut maintenant avoir une largeur et une hauteur)

Normalement, il suffit de régler 'a'
puis pour a:visited ou a:hover on ne stipule que les changements par
rapport à 'a'.


et est séparé du bouton suivant par une bande verticale de 1px (qui me
semble être le "border-right:1px" de la ligne "#menu li{.........}".

moi, je voudrais conserver cette séparation (de 2px mais là n'est pas
problème), mais je la voudrais "transparente"... pour qu'on voit l'image
d'arrière-plan entre les boutons.



il suffit de mettre une marge droite en remplacement de la bordure

#menu{ position:absolute; margin:0; padding:0;
left:10%; height:55px; top:252px;
text-transform:uppercase; text-align:center:;}
#menu,#menu ul{list-style:none;line-height:2em;}
#menu li{float:left; list-style:none; }
#menu a {display:block; border:none; text-decoration:none;
background:url(images/menu2.png) repeat-x;
color:#302b39; font-weight:700; padding:10px 12px;
margin-right: 2px }
#menu a:visited { color:#302b39; }
#menu a:hover,
#menu a:active {background-image:url(images/menu3.png); color:black; }

--
sm
Avatar
mannucci_spamkiller
SAM wrote:


Outre qu'on se demande pourquoi utiliser des images quand on peut utiliser
des couleurs, pour le roll-over en CSS on n'utilise qu'une image. Voir :
<http://stephane.moriaux.pagesperso-orange.fr/internet/web_css/rollover/bo
uton_3_etats_css.htm> ou mieux : "portes coulissantes" chez Google



Moi aussi je me suis fais la remarque pour l"utilisation des images pour
le roll-over (d'autant qu'au départ ce ne sont que des "aplats")

Mais comme je le disais, il s'agit d'un thème Wordpress existant que
j'essaie de "customiser" et je découvre les CSS ... jusqu'à présent je
ne faisais que du HTML et je laissais le soin à GoLive de me pondre un
(mauvais) code Javascript pour tout ce qui le nécéssitait.

ET malgré mes (très) maigres connaissances, je subodorais *aussi* qu'on
pouvait faire la même chose sans images. Peut-être ont-ils fait ce choix
pour que le "pékin poyen" puisse rajouter des détails sur le bouton,
genre ombre portée ou biseautage-estampage... mais ça n'est même pas
très futé, à cause de sa "longueur variable". BOnjour les dégats si tu
mets une photo dans l'image :-(


> voilà ce que j'ai compris du mécanisme: le menu se constitue
> horizontalement, avec un nombre de boutons correspondant aux nombre de
> pages "publiées", chaque bouton a une longueur variable (fonction de la
> longueur du titre donné à chaque page)

donc voici :
LI est en float:left;
sa largeur va réagir comme en position: absolute;
c a d qu'elle va s'adapter à son contenu.

A (contenu du LI) est en display: block;
le lien n'est plus en-ligne mais en bloc
(il peut maintenant avoir une largeur et une hauteur)

Normalement, il suffit de régler 'a'
puis pour a:visited ou a:hover on ne stipule que les changements par
rapport à 'a'.


> et est séparé du bouton suivant par une bande verticale de 1px (qui me
> semble être le "border-right:1px" de la ligne "#menu li{.........}".
>
> moi, je voudrais conserver cette séparation (de 2px mais là n'est pas
> problème), mais je la voudrais "transparente"... pour qu'on voit l'image
> d'arrière-plan entre les boutons.

il suffit de mettre une marge droite en remplacement de la bordure

#menu{ position:absolute; margin:0; padding:0;
left:10%; height:55px; top:252px;
text-transform:uppercase; text-align:center: ;}
#menu,#menu ul{list-style:none;line-height:2em;}
#menu li{float:left; list-style:none; }
#menu a {display:block; border:none; text-decoration:none;
background:url(images/menu2.png) repeat-x;
color:#302b39; font-weight:700; padding:10px 12px;
margin-right: 2px }
#menu a:visited { color:#302b39; }
#menu a:hover,
#menu a:active{background-image:url(images/menu3.png);color:black; }



YESSS !!!

alors là, je dis : grande classe !!!!
le jour où j'arriverais à corriger un extrait de code CSS "en aveugle"
comme ça, je pense que j'aurais compris comment ça marche.

pour info, le résultat est là :
http://www.wild-works.net/blog2/ (y'a pas de "contenu", hein ;-)
(et le thème Wordpress qui sert "base" est là :
http://wp-themes.com/dyne/)


Et au passage (je sais, je suis un garçon qui a une facheuse tendance à
abuser)... Voilà mon autre souci:
J'essaie de gérer la partie "menu" (les "pages", donc) comme on le
faisait sur un site traditionnel. Or, dans l'état actuel des choses, on
crée des pages qui s'affichent ou pas dans un item supplémentaire du
menu, selon que l'on ait choisi de "publier" ou de ne "pas publier".

Mais je ne parviens pas à mettre dans une "Page1" publiée (donc dans une
option de menu) un lien vers une "page2" qui elle, n'aurait pas son item
dans le menu.
Un peu comme dans un site "à l'ancienne" avec frames, où on aurait une
page qui en appelle une autre avec "target= _self".
J'ai installé un plug-in de Wordpress qui s'appelle PageMash, mais je
n'y arrive toujours pas.... alors que je reste persuadé qu'il y a une
soluce sans l'aide de plug.
Pourtant le thème choisi indique que les pages et sous-pages sont
gérées, mais je n'arrive même pas à mettre un lienb ebntre 2 pages.
(et dans le menu "creation de pages" de l'interface admin, le bouton de
lien ne permet que des liens "externes", au vu de l'URL qui est demandée
dans le formùulaire de saisie)

si quelqu'un connait la marche à suivre....



--
Jean-marc Mannucci
************************************************
Avatar
Pierre Goiffon
jean-marc Mannucci wrote:
Je débute dans les CSS depuis quelques jours seulement, et suis sur la
personnalisation d'un thème Wordpress (c'est le Dyne 1.1).



Je n'ai pas regardé votre prb directement...

Mais je vous conseille tout de même 2 choses :

- garder un lien vers la recommandation sous les yeux, en particulier la
page sur les sélecteurs !
http://www.w3.org/TR/CSS21/
Il faut savoir ce que l'on cherche quand on y va, ce n'est pas un
tutorial ! Mais enfin LE document de référence

- utiliser des outils performants comme l'extension Firebug
(http://getfirebug.com) pour Firefox.
Je n'ai pas testé assez en profondeur les équivalents sous Opera et IE
pour vous les déconseiller formellement... mais en tout cas ça semble à
des années lumière de Firebug...
Avatar
SAM
Le 11/24/08 4:53 PM, jean-marc Mannucci a écrit :
le jour où j'arriverais à corriger un extrait de code CSS "en aveugle"
comme ça, je pense que j'aurais compris comment ça marche.



Ce n'est grosso-modo que de la géométrie.

<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>

<http://www.pompage.net/articles_par_theme#theme-CSS>
<http://css.mammouthland.net/>


--
sm
Avatar
mannucci_spamkiller
Pierre Goiffon wrote:

Je n'ai pas testé assez en profondeur les équivalents sous Opera et IE



IE est désinstallé depuis des années chez moi.
Par ailleurs, il y a d'autres navigateurs que ceux vous citez
(vous savez, y'a "un monde", peut-être "parallèle" pour certains, mais
y'il existe vraiment "un monde"... sans PC ni Windows ni Linux ;-).

cela dit, ça ne contredit en rien ce que vous dites sur FireFox,
puisqu'il est porté sur Mac, et qu'il fonctionne très bien.
(plus que ça, il devient le brozère préfére des macusers, même si Safari
n'a rien _ou pas gran'chose_ à se reprocher)







--
Jean-marc Mannucci
************************************************
Avatar
mannucci_spamkiller
SAM wrote:


Ce n'est grosso-modo que de la géométrie.



oké, mais le problème, c'est que c'est la syntaxe, qui est imbuvable,
surtout pour qui est graphiste de formation comme moi.
En théorie, c'est un exercice qui devrait "cohabiter" avec la création
graphique, mais pour certains (dont je suis), c'est plus un
"téléscopage" qu'une vraie cohabitation. ;-)

<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>

<http://www.pompage.net/articles_par_theme#theme-CSS>
<http://css.mammouthland.net/>




merci beaucoup.

--
Jean-marc Mannucci
************************************************
Avatar
Pierre Goiffon
jean-marc Mannucci wrote:
Je n'ai pas testé assez en profondeur les équivalents sous Opera et IE



Par ailleurs, il y a d'autres navigateurs que ceux vous citez



Votre réponse me parait difficilement compréhensible, je parlais
évidemment des outils que j'ai pu tester ! Je crois comprendre que vous
répondiez en utilisateur content de Safari ? Je n'avais pas entendu
parler d'un outil pour les intégrateurs HTML/CSS dans ce navigateur, où
peut-on avoir plus d'infos ?
Avatar
mannucci_spamkiller
Pierre Goiffon wrote:


Votre réponse me parait difficilement compréhensible, je parlais
évidemment des outils que j'ai pu tester !



je suis désolé. ;-)
je ne fais plus de prosélitisme depuis longtemps, mais y'a juste des
moments où on se sent un peu frustré.. ;-)

Je crois comprendre que vous
répondiez en utilisateur content de Safari ? Je n'avais pas entendu
parler d'un outil pour les intégrateurs HTML/CSS dans ce navigateur, où
peut-on avoir plus d'infos ?




ça demande confirmation, mais de mémo, comme ça, je crois qu'il faut
installer les "DevTools" qui sont sur le DVD d'install de MacOSX(10.5).
Et ça installe un menu supplémentaire dans Safari, avec tous les outils
nécéssaires.


--
Jean-marc Mannucci
************************************************
1 2 3 4 5