28172 sujets

CSS et mise en forme, CSS3

Bonjour
je suis nouveau et franchement novice en programation, je fais un peu de recherche mais je ne trouve pas la solution Smiley decu

Alors voilà, j'éssai de faire un site sous spip, j'ai installer un plug qui se nomme "menu"
Sur mon site, j'ai deux menu, 1 horizontal et 1 vertical

Quand j'ai installer le plug, la presentation en ce qui concrne le menu horizontal c'est faite toute seul.
Par contre, en ce qui concerne la collone, pas du tout Smiley decu

Ce que j'essai de faire dans un premier temps, c'est de faire partir les puces.
D'après ce que j'ai compris, il suffit de mettre
list-style-type: none
Sachant que dans mon css de base, cela ne parlait pas de class "menu" n'y "entree", j'ai essayer de mettre .menu {list-style-type: none} ou .entree {list-style-type: none}, mais

Mon problème, c'est que cela ne marche pas, je ne sais pas trop quoi faire Smiley decu

J'ai bien vu que mon probème pouvait venir d'un problème d'éritage en lisant ici: http://www.alsacreations.com/tuto/lire/545-Comprendre-l-heritage-et-la-parente-des-styles-CSS.html

Mais, franchement, j'arrive à rien
Donc si vous aviez une idée ?

Le site est là:
http://www.lien-d-amis.net/prototype6
Les menus qui ont été fait via le plug, sont
a lien plug
b test

PS, le champs pour écrir le méssage n'est pas "stable" car, je n'arrive pas à voir ce que j'écris en ce moment, l'assenceur, ne me suis plus, je suis exploer 8 et seven 64
çi-joint nu double du CSS de la colonne
Merci d'avance de votre aide
Cordialement Franck
Modifié par Fbleu (30 Aug 2009 - 19:57)
[code]/****************************************************************/
/*   Design:   Multiflex-3 Version 1.8 / Layout-5               */
/*   File:     Text formats                                     */
/*--------------------------------------------------------------*/
/*   Author:   G. Wolfgang                                      */
/*   Date:     May 22, 2007                                     */
/*   Homepage: wwww.1-2-3-4.info                                */
/*--------------------------------------------------------------*/
/*   License:  Fully open source without restrictions.          */
/*             Please keep footer credits with a link to        */
/*             Wolfgang (www.1-2-3-4.info). Thank you!          */
/****************************************************************/

/******************/
/*  MAIN SECTION  */
/******************/

/* MAIN NAVIGATION */
.nav3-grid {width:199px; border-bottom:solid 1px [(#ENV{mfx_c200})];}
.nav3-grid dt a, .nav3-grid dt a:visited {display:block; min-height:2.0em /*Non-IE6*/; height:auto !important; height:2.0em /*IE6*/; line-height:2.0em; padding:0px 10px 0px 20px;  border-top: solid 1px [(#ENV{mfx_c200})]; text-decoration:none; color:[(#ENV{mfx_cgbn})]; font-weight:bold; font-size:120%;}
.nav3-grid dd a, .nav3-grid dd a:visited {display:block; min-height:1.7em /*Non-IE6*/; height:auto !important; height:1.7em /*IE6*/; line-height:1.7em; padding:0px 10px 0px 40px; border:none; font-weight:normal; text-decoration:none; color:[(#ENV{mfx_cgbn})]; font-size:120%;}
.nav3-grid dt a:hover, .nav3-grid dd a:hover {background-color:[(#ENV{mfx_c225})]; color:[(#ENV{mfx_cgbnn})]; text-decoration:none;}

.nav3-bullet {width:170px; margin:10px 0 0 20px;}
.nav3-bullet dt a, .nav3-bullet dt a:visited {line-height:2.0em; padding:0 0 0 10px; background:url(#CHEMIN{img/bg_bullet_full_1.gif}) no-repeat 0px 50%; text-decoration:none; color:[(#ENV{mfx_cgbn})]; font-weight:bold; font-size:120%;}
.nav3-bullet dd a, .nav3-bullet dd a:visited {line-height:1.7em; margin:0 0 0 15px; padding:0 0 0 10px; background:url(#CHEMIN{img/bg_bullet_half_1.gif}) no-repeat 0px 50%; text-decoration:none; color:[(#ENV{mfx_cgbn})]; font-weight:normal; font-size:120%;}
.nav3-bullet dt a:hover {background:url(#CHEMIN{img/bg_bullet_full_2.gif}) no-repeat 0px 50%; text-decoration:underline; color:[(#ENV{mfx_cgbnn})];}
.nav3-bullet dd a:hover {background:url(#CHEMIN{img/bg_bullet_half_2.gif}) no-repeat 0px 50%; text-decoration:underline; color:[(#ENV{mfx_cgbnn})];}

.nav3-nobullet {width:170px; margin:10px 0 0 20px;}
.nav3-nobullet dt a, .nav3-nobullet dt a:visited {line-height:2.0em; text-decoration:none; color:[(#ENV{mfx_cgbn})]; font-weight:bold; font-size:120%;}
.nav3-nobullet dd a, .nav3-nobullet dd a:visited {line-height:1.7em; margin:0 0 0 15px; text-decoration:none; color:[(#ENV{mfx_cgbn})]; font-weight:normal; font-size:120%;}
.nav3-nobullet dt a:hover, .nav3-nobullet dd a:hover {text-decoration:underline; color:[(#ENV{mfx_cgbnn})];}

.loginform {width:160px; margin:-10px 20px 0 20px;}
.loginform p {clear:both; margin:0; padding:0;}
.loginform fieldset {width:160px; border:none;}
.loginform label.top {float:left; width:125px; margin:0 0 2px 0; font-size:110%;}
.loginform label.right {float:left; width:125px; margin:5px 0 0 0; padding:0 0 0 3px; /*IE6*/; font-size:110%;}
.loginform input.field {width:158px; margin:0 0 5px 0; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:solid 1px [(#ENV{mfx_c200})]; font-family:verdana,arial,sans-serif; font-size:110%;}
.loginform input.checkbox {float:left; margin:5px 0 0 0 !important /*Non-IE6*/; margin:2px 0 0 -3px /*IE6*/; border:none;}
.loginform input.button {float:left; width:5.0em; margin:10px 0 5px 0; padding:1px; background:[(#ENV{mfx_c230})]; border:solid 1px [(#ENV{mfx_c150})]; text-align:center; font-family:verdana,arial,sans-serif; color:[(#ENV{mfx_c150})]; font-size:110%;}
.loginform input.button:hover {cursor:pointer; border:solid 1px [(#ENV{mfx_c80})]; background:[(#ENV{mfx_c220})]; color:[(#ENV{mfx_c80})];}

.main-navigation .searchform {width:160px; margin:0 20px 0 20px;}
.main-navigation .searchform fieldset {border:none;}
.main-navigation .searchform input.field {float:left; width:158px; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:1px solid [(#ENV{mfx_c200})]; font-family:verdana,arial,sans-serif; font-size:120%;}
.main-navigation .searchform input.button {float:left; width:3.0em; margin-top: 0.5em; padding:1px; background:[(#ENV{mfx_c230})]; border:solid 1px [(#ENV{mfx_c150})]; text-align:center; font-family:verdana,arial,sans-serif; color:[(#ENV{mfx_c150})]; font-size:120%;}
.main-navigation .searchform input.button:hover {cursor:pointer; border:solid 1px [(#ENV{mfx_c80})]; background:[(#ENV{mfx_c220})]; color:[(#ENV{mfx_c80})];}

.main-navigation h1.first {clear:both; margin:0px; padding:4px 20px 3px 20px; background-color:[(#ENV{mfx_c190})]; font-family:"trebuchet ms",arial,sans-serif; color:[(#ENV{mfx_c255})]; font-weight:bold; font-size:150%;}
.main-navigation h1 {clear:both; margin:30px 0 20px 0; padding:4px 20px 3px 20px; background:[(#ENV{mfx_c190})]; font-family:"trebuchet ms",arial,sans-serif; color:[(#ENV{mfx_c255})]; font-weight:bold; font-size:150%;}
.main-navigation h2 {clear:both; margin:20px 10px 10px 20px; font-family:"trebuchet ms",arial,sans-serif; color:[(#ENV{mfx_c100})]; font-weight:bold; font-size:150%;}
.main-navigation h3 {clear:both; margin:10px 10px 5px 20px; color:[(#ENV{mfx_c80})]; font-weight:bold; font-size:110%;} /* Note: h2 not existent, to make identical to formats for main-navigation for easier exchange */
.main-navigation p {clear:both; margin:0 10px 10px 20px; color:[(#ENV{mfx_c80})]; line-height:1.3em; font-size:110%;}
.main-navigation p.center {text-align:center;}
.main-navigation p.right {text-align:right;}

.main-navigation ul {list-style:none; margin:0.5em 10px 1.0em 20px;}
.main-navigation ul li {margin:5px 0 0.2em 2px; padding:0px 0px 0 11px; background:url(#CHEMIN{img/bg_bullet_full_1.gif}) no-repeat 0 0.4em; line-height:1.2em; font-size:110%;}
.main-navigation ol {margin:0.5em 10px 1.0em 40px !important /*Non-IE6*/; margin:0.5em 10px 1.0em 45px /*IE6*/;}
.main-navigation ol li {list-style-position:outside; margin:0 0 0.4em 0; font-size:110%;}


/* MAIN CONTENT */
.main-content h1.pagetitle {margin:0 0 0.4em 0; padding:0 0 2px 0; border-bottom:solid 7px [(#ENV{mfx_c225})]; font-family:"trebuchet ms",arial,sans-serif; color:[(#ENV{mfx_c100})]; font-weight:bold; font-size:220%;}
.main-content h1.block {clear:both; margin:1.0em 0 0em 0; padding:2px 0 2px 2px; background:[(#ENV{mfx_c190})]; font-family:"trebuchet ms",arial,sans-serif; color:[(#ENV{mfx_c255})]; font-weight:bold; font-size:220%;}
.main-content h1 {clear:both; margin:1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:[(#ENV{mfx_c80})]; font-weight:normal; font-size:210%;}
.main-content h2 {clear:both; margin:1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:[(#ENV{mfx_c80})]; font-weight:normal; font-size:170%;}
.main-content h3 {clear:both; margin:-1.0em 0 0.5em 0; font-family:"trebuchet ms",arial,sans-serif; color:[(#ENV{mfx_c125})]; font-weight:normal; font-size:130%;}
.main-content h1.side {clear:none;}
.main-content h2.side {clear:none;}
.main-content h3.side {clear:none;}

.main-content h4 {margin:1.5em 0 1.0em 0; color:[(#ENV{mfx_c80})]; font-family:"trebuchet ms",arial,sans-serif; font-weight:normal; font-size:170%;}
.main-content h5 {margin:1.5em 0 1.0em 0; color:[(#ENV{mfx_c80})]; font-family:"trebuchet ms",arial,sans-serif; font-size:140%;}
.main-content h6 {margin:1.2em 0 0.2em 0; color:[(#ENV{mfx_c80})]; font-weight:bold; font-size:120%;}
.main-content p {margin:0 0 1.0em 0; line-height:1.5em; font-size:120%;}
.main-content p.center {text-align:center;}
.main-content p.right {text-align:right;}
.main-content p.details {clear:both; margin:-0.25em 0 1.0em 0; line-height:1.0em; font-size:110%;}
.main-content blockquote {clear:both; margin:0 30px 0.6em 30px; font-size:90%;}

.main-content table {clear:both; margin:2.0em 0 0.2em 20px; table-layout: fixed; border-collapse:collapse; empty-cells:show; background-color:[(#ENV{mfx_cgplb})];}
.main-content table th.top {height:3.5em; padding:0 7px 0 7px; empty-cells:show; background-color:[(#ENV{mfx_c175})]; text-align:left; color:[(#ENV{mfx_c255})]; font-weight:bold; font-size:110%;}
.main-content table th {height:3.0em; padding:2px 20px 2px 7px; border-left:solid 2px [(#ENV{mfx_c255})]; border-right:solid 2px [(#ENV{mfx_c255})]; border-top:solid 2px [(#ENV{mfx_c255})]; border-bottom:solid 2px [(#ENV{mfx_c255})]; background-color:[(#ENV{mfx_c225})]; text-align:left; color:[(#ENV{mfx_c80})]; font-weight:bold; font-size:110%;}
.main-content table td {height:3.0em; padding:2px 7px 2px 7px; border-left:solid 2px [(#ENV{mfx_c255})]; border-right:solid 2px [(#ENV{mfx_c255})]; border-top:solid 2px [(#ENV{mfx_c255})]; border-bottom:solid 2px [(#ENV{mfx_c255})]; background-color:[(#ENV{mfx_c225})]; text-align:left; font-weight:normal; color:[(#ENV{mfx_c80})]; font-size:110%;}
p.caption {clear:both; margin:0.5em 0 2.0em 20px; text-align:left; color:[(#ENV{mfx_c80})]; font-size:110%;}

.layout1 .main-content table {width:800px;}
.layout2 .main-content table, .layout3 .main-content table {width:600px;}
.layout4 .main-content table, .layout5 .main-content table {width:400px;}

.main-content ul {list-style:none; margin:0.5em 0 1.0em 0;}
.main-content ul li {margin:0 0 0.2em 2px; padding:0 0 0 12px; background:url(#CHEMIN{img/bg_bullet_full_1.gif}) no-repeat 0 0.5em; line-height:1.4em; font-size:120%;}
.main-content ol {margin:0.5em 0 1.0em 20px !important /*Non-IE6*/; margin:0.5em 0 1.0em 25px /*IE6*/;}
.main-content ol li {list-style-position:outside; margin:0 0 0.2em 0; line-height:1.4em; font-size:120%;}

.contactform {width:418px; margin:2.0em 0 0 0; padding:10px 10px 0 10px; border:solid 1px [(#ENV{mfx_c200})]; background-color:[(#ENV{mfx_c240})];}
.contactform fieldset {padding:20px 0 0 0 !important /*Non-IE6*/; padding:0 /*IE6*/; margin:0 0 20px 0; border:solid 1px [(#ENV{mfx_c220})];}
.contactform fieldset legend {margin:0 0 0 5px !important /*Non-IE*/; margin:0 0 20px 5px /*IE6*/; padding:0 2px 0 2px; color:[(#ENV{mfx_c80})]; font-weight:bold; font-size:130%;}
.contactform label.left {float:left; width:100px; margin:0 0 0 10px; padding:2px; font-size:110%;}
.contactform select.combo {width:175px; padding:2px; border:solid 1px [(#ENV{mfx_c200})]; font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform input.field {width:275px; padding:2px; border:solid 1px [(#ENV{mfx_c200})]; font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform textarea {width:275px; padding:2px; border:solid 1px [(#ENV{mfx_c200})]; font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform input.button {float:right; width:9.0em; margin-right:20px; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:[(#ENV{mfx_c230})]; border:solid 1px [(#ENV{mfx_c150})]; text-align:center; font-family:verdana,arial,sans-serif; color:[(#ENV{mfx_c150})]; font-size:110%;}
.contactform input.button:hover {cursor: pointer; border:solid 1px [(#ENV{mfx_c80})]; background:[(#ENV{mfx_c220})]; color:[(#ENV{mfx_c80})];}


/* MAIN SUBCONTENT */
.main-subcontent h1 {clear:both; margin:0 0 10px 0; padding:4px 10px 3px 10px; background-color:[(#ENV{mfx_c190})]; font-family:"trebuchet ms",arial,sans-serif; color:[(#ENV{mfx_c255})]; font-weight:bold; font-size:140%;}
.main-subcontent h1.green {clear:both; margin:0 0 5px 0; padding:4px 10px 3px 10px; background-color:[(#ENV{mfx_cvp})]; font-family:"trebuchet ms",verdana,arial,sans-serif; color:[(#ENV{mfx_c255})]; font-weight:bold; font-size:140%;}
.main-subcontent h1.blue {clear:both; margin:0 0 5px 0; padding:4px 10px 3px 10px; background-color:[(#ENV{mfx_cba})]; font-family:"trebuchet ms",verdana,arial,sans-serif; color:[(#ENV{mfx_c255})]; font-weight:bold; font-size:140%;}
.main-subcontent h1.orange {clear:both; margin:0 0 5px 0; padding:4px 10px 3px 10px; background-color:[(#ENV{mfx_cot})]; font-family:"trebuchet ms",verdana,arial,sans-serif; color:[(#ENV{mfx_c255})]; font-weight:bold; font-size:140%;}
 /* Note: h2 non-existent, to make HTML-code interchangeable between 'main-navigation' and 'main-subcontent' */
.main-subcontent h3 {clear:both; margin:1.0em 10px 0.5em 10px; color:[(#ENV{mfx_c80})]; font-weight:bold; font-size:110%;}
.main-subcontent p {clear:both; margin:0 10px 1.0em 10px; color:[(#ENV{mfx_c80})]; line-height:1.3em; font-size:110%;}
.main-subcontent p.center {text-align:center;}
.main-subcontent p.right {text-align:right;}

.main-subcontent ul {list-style:none; margin:0.5em 10px 1.0em 10px;}
.main-subcontent ul li {margin:5px 0 0.2em 2px; padding:0 0 0 11px; background:url(#CHEMIN{img/bg_bullet_full_1.gif}) no-repeat 0 0.4em; line-height:1.2em; font-size:110%;}
.xmain-subcontent ol {margin:0.5em 10px 1.0em 30px !important /*Non-IE6*/; margin:0.5em 10px 1.0em 34px /*IE6*/;}
.main-subcontent ol {margin:0.5em 10px 1.0em 30px !important /*Non-IE6*/; margin:0.5em 10px 1.0em 35px /*IE6*/;}
.main-subcontent ol li {list-style-position:outside; margin:0 0 0.4em 0; font-size:110%;}

.main-subcontent .loginform {width:160px; margin:0 10px 0 10px;}
.main-subcontent .loginform p {clear:both; margin:0; padding:0;}
.main-subcontent .loginform fieldset {width:160px; border:none;}
.main-subcontent .loginform label.top {float:left; width:125px; margin:0 0 2px 0; font-size:110%;}
.main-subcontent .loginform label.right {float:left; width:125px; margin:5px 0 0 0; padding:0 0 0 3px; /*IE6*/; font-size:110%;}
.main-subcontent .loginform input.field {width:158px; margin:0 0 5px 0; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:solid 1px [(#ENV{mfx_c200})]; font-family:verdana,arial,sans-serif; font-size:110%;}
.main-subcontent .loginform input.checkbox {float:left; margin:5px 0 0 0 !important /*Non-IE6*/; margin:2px 0 0 -3px /*IE6*/; border:none;}
.main-subcontent .loginform input.button {float:left; width:5.0em; margin:10px 0 5px 0; padding:1px; background:[(#ENV{mfx_c230})]; border:solid 1px [(#ENV{mfx_c150})]; text-align:center; font-family:verdana,arial,sans-serif; color:[(#ENV{mfx_c150})]; font-size:110%;}
.main-subcontent .loginform input.button:hover {cursor:pointer; border:solid 1px [(#ENV{mfx_c80})]; background:[(#ENV{mfx_c220})]; color:[(#ENV{mfx_c80})];}

.main-subcontent .searchform {width:160px; margin:0 10px 0 10px;}
.main-subcontent .searchform fieldset {border:none;}
.main-subcontent .searchform input.field {float:left; width:158px; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:1px solid [(#ENV{mfx_c200})]; font-family:verdana,arial,sans-serif; font-size:120%;}
.main-subcontent .searchform input.button {float:left; width:3.0em; margin-top: 0.5em; padding:1px; background:[(#ENV{mfx_c230})]; border:solid 1px [(#ENV{mfx_c150})]; text-align:center; font-family:verdana,arial,sans-serif; color:[(#ENV{mfx_c150})]; font-size:120%;}
.main-subcontent .searchform input.button:hover {cursor:pointer; border:solid 1px [(#ENV{mfx_c80})]; background:[(#ENV{mfx_c220})]; color:[(#ENV{mfx_c80})];}

/********************/
/*  COMMON CLASSES  */
/********************/
.main img {clear:both; float:left; margin:3px 10px 7px 0; padding:1px; border:1px solid [(#ENV{mfx_c150})];}
.main img.center {clear:both; float:none; display:block; margin:0 auto; padding:1px; border:1px solid [(#ENV{mfx_c150})];}
.main img.right {clear:both; float:right; margin:3px 0 7px 10px; padding:1px; border:1px solid [(#ENV{mfx_c150})];}

.main a {color:[(#ENV{mfx_cgbn})]; font-weight:bold; text-decoration:none;}
.main-content h1 a {color:[(#ENV{mfx_cgbn})]; font-weight:normal; text-decoration:none;}
.main a:hover {color:[(#ENV{mfx_cgbnn})]; text-decoration:underline;}
.main a:visited {color:[(#ENV{mfx_cgbnn})];}

.main a img {border:solid 1px [(#ENV{mfx_c150})];}
.main a:hover img {border:solid 1px [(#ENV{mfx_c220})];}

Modifié par Fbleu (30 Aug 2009 - 19:54)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Lol, je pensais que c'était cote, c'est pour cela que je l'avais fait à la main Smiley smile

Sinon j'avais déjà utiliser le moteur de recherche Smiley smile
Mais comme, j'ai absolument aucune idée d'ou vient le problème, et que en lecture de code, je suis plutôt ...
Je progresse, mais, bon, cela ne fait qu'un mois que je découvre html, css et compagnie donc la faut déjà que je comprenne le problème, avant que je puisse trouver une solution, via le moteur de recherche Smiley lol
Il n'y a qu'un css, car, je ne pense pas que les autres sont utililes pour la colone Smiley smile mais bon, si vous voulez les autres, il y a:
header.css
layout_setup.css
layout_text.css
multiflex.css

def_couleurs
def_couleurs_origine

Pour le moment, vous avez: layout_text.css
Ce n'est pas un problème d'héritage ni de puce sur ton <ul> car ta liste n'en a plus ( list-style-type: none est acrif sur ta liste).

Par contre on peux voir que tes <li> possède une image en background ce qui donne comme résultat visuel une puce. A toi donc d'agir sur le background de .menu li.entree

PS: utilise des modules comme Firebug sur Firefox pour voir les styles appliqués à chaque élement, ça ne t'aurais pris que 2 secondes.
Merci Andromede Smiley smile

Mais, le pire, c'est que j'utilise firebug, mais comme cela fait vraiment peut de temps que je découvre l'xhtml et les css, c'est pas évident Smiley decu

Firebug, me manque un tuto qui l'explique correctement, ( aucune idée à quoi sert "dom" par exemple, sinon, j'ai un peu compris "apparence"

Je ne comprenais pas pourquoi j'avais une puce, bein maintenant, je sais, c'est pas une puce Smiley ravi

Reste à voir comment faire pour qu'elle parte maintenant.
Je ferais des éssais demain Smiley smile

Ps, si tu as un bon tutorial sur firebug ? Smiley smile