grum a écrit:

pour le nuage, il faut deux choses :
- limiter la taille en largeur du menu qui sera déroulé
- affecter au balises LI un style qui fait qu'il n'y aura pas de retour à la ligne (genre un truc float:left; par exemple)
bon, j'ai pas testé, pas dit que çà fonctionne avec juste çà, mais çà devrait t'orienter.

ok,
je vais bosser là dessus....

pour les marges, tu dois avoir quelque chose du genre  " li a:hover { color:#xxxxxx; } " quelque part et qui correspond au lien sur les tags, qu'il faut remplacer par "li a:hover, li:hover { ..... "

j'ai ça pourtant.....
#menubar li:hover, li a:hover {
    background-color: #808080;
}

stop !!!

tes infos ne corrrespondent pas au thème sur lequel je travaille...

as tu bien suivi le lien donné plus haut ?

tiens, je te mets ici le fichier en son état actuel....

se sera plus simple....

/*---vimages_sport 2 flat, thème bleu/gris, réalisé par Vimages pour PWG 1.7.0.*/
/*---Inspiré des thèmes … menus horizontaux, hk, gbo, hr...--------------*/
/*---Merci beaucoup à leurs auteurs.-------------------------------------*/
/*--- 1) base ---*/
    @import url(menu.css);
* {
    margin: 0;
    padding: 0;
    border: 0;
}
* {
    outline: none;
}
body {
    background-color: white;
    font-size: 0.79em;
    font-family: Arial, Helvetica, Verdana, sans-serif;
}
/*--- 2) common styles ---*/
BODY {
    color: white;
}
h2 {
    color: white;
}
ul {
    list-style: none;
}
ul li {
    list-style: none;
}
H3 {
    color: white;
}
a, a:link {
    color: #faffb3;
/*couleur: a: link*/
    text-decoration: none;
    border: 0;
}
a:hover {
    color: #064b87;
/*couleur: indianred*/
    text-decoration: none;
    border: 0;
}
pre {
    overflow: auto;
    width: 100%;
    height: auto;
}
.left {
    float: left;
}
.right {
    float: right;
}
#the_page {
    background-color: #3c58ab;
    border: 1px solid white;
}
#comments H2, .titrePage h2 {
    background-color: #3c58ab;
    color: white;
    border: 0;
    padding: 2px;
}
.titrePage a {
    color: #faffb3;
/*couleur: linked blue*/
}
.titrePage a:hover {
    color: #064b87;
/*couleur: indianred*/
}
/*--- 3) the menus ---*/
#menubar {
    position: relative;
    z-index: 2;
}
#content {
    position: relative;
    z-index: 1;
}
#content div.thumbnailCategory div.description {
    overflow: hidden;
}
/*--- 3a) horizontal menubar ---*/
#menubar, BODY#theAdminPage #menubar {
    float: none;
    width: 98%;
    margin: 4px auto;
    display: block;
}
/*--- 3b) set menubar height (not for IE) ---*/
#the_page > #menubar, BODY#theAdminPage #the_page > #menubar {
    height: 2.1em;
    padding: 0;
}
#menubar DL>DT {
    padding: 0.2em 0.4em;
}
/*--- 3c) general UL formating ---*/
#menubar UL, #menubar DL, #menubar UL#menuTagCloud {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
}
#menubar DL {
    display: inline;
    padding: 0 2.1em;
}
BODY#theAdminPage #the_page > #menubar DL {
    padding: 0 0.5em;
}
#menubar UL {
    margin: 0;
    padding: 0;
    width: 15em;
}
#menubar ul li a {
    padding-right: 3em;
}
#menubar P, #menubar P.totalImages, FORM#quickconnect {
    clear: both;
    margin: 0;
    text-align: center;
    padding: 0.2em;
}
/*--- 3d) titles and links ---*/
#menubar A, #menubar DT {
    display: block;
}
/*--- 3e) positioning ---*/
#menubar LI {
    position: relative;
}
#menubar DD {
    position: absolute;
    z-index: 500;
}
#menubar DD UL UL {
    position: absolute;
    top: 0px;
    left: 100%;
    z-index: 500;
}
#menubar LI SPAN, #menubar LI IMG {
    position: absolute;
    top: 0;
}
#menubar LI SPAN {
    right: 7px;
}
#menubar LI IMG {
    right: 3em;
}
/*--- 3f) hiding and revealing up to 6 menu levels ---*/
DIV#menubar DD, DIV#menubar UL UL, DIV#menubar UL LI:hover UL UL, DIV#menubar UL UL LI:hover UL UL, DIV#menubar UL UL UL LI:hover UL UL, DIV#menubar UL UL UL UL LI:hover UL UL {
    display: none;
}
DIV#menubar DL:hover DD, DIV#menubar UL LI:hover UL, DIV#menubar UL UL LI:hover UL, DIV#menubar UL UL UL LI:hover UL, DIV#menubar UL UL UL UL LI:hover UL, DIV#menubar UL UL UL UL UL LI:hover UL {
    display: block;
}
/*--- 3g) styles ---*/
/*--- 3g-1) Menubar ---*/
#menubar {
    background-color: #3b57ab;
    color: #faffb3;
/*couleur: linked blue*/
    border: 1px solid white;
}
#menubar a {
    color: #faffb3;
/*couleur: linked blue*/
    display: block;
    text-decoration: none;
    border: 0;
    background-color: #3b57ab;
    cursor: pointer;
}
#menubar A:hover {
    color: #064b87;
/*couleur: indianred*/
    background-color: #3b57ab;
}
#menubar P, #menubar P.totalImages {
    background-color: #3b57ab;
    font-size: 0.8em;
}
#menubar LI SPAN {
}
/*--- 3g-2) DT ---*/
/* menus racines*/
#menubar dt {
    color: #faffb3;
/*couleur: linked blue*/
    background-color: #3b57ab;
}
#menubar DT:hover {
}
#menubar DT a {
    display: block;
    text-decoration: none;
    border: 0;
    background-color: #3b57ab;
    cursor: pointer;
}
/*--- 3g-3)DD ---*/
#menubar DD {
/*---    background-color: #3b57ab; ---*/
    color: white;
    border-top: 0;
    border-right: 1px solid white;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
}
#menubar DD a {
    color: #faffb3;
/*couleur: linked blue*/
    display: block;
    text-decoration: none;
    background-color: #a0a0a0;
    cursor: pointer;
}
#menubar DD a:hover {
    background-color: #808080;
    color: #064b87;
/*couleur: indianred*/
}
#menubar DD span {
    display: block;
    text-decoration: none;
    border: 0;
}
#menubar DD LI {
    padding: 0.5em;
}
#menubar DD:hover {
    background-color: #808080;
}
/*--- 3g-4)UL --LI ---*/
#menubar ul li {
    color: #faffb3;
/*couleur: linked blue*/
    display: block;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    background-color: #a0a0a0;
}
#menubar li:hover, li a:hover {
    background-color: #808080;
}
#menubar ul:hover {
    background-color: #808080;
}
#menubar ul a:hover {
    background-color: #808080;
}
/*--- 4) header ---*/
#theHeader {
    height: 70px;
    margin: 4px auto;
}
#theHeader h1 {
    font-size: 2em;
    margin: 0;
    color: white;
    text-align: center;
    position: absolute;
    left: 30px;
    top: 50px;
}
#theHeader p {
    display: none;
}
/*--- 5) page ---*/
#the_page {
    width: 100%;
    margin: 0 auto;
    position: relative;
    background-color: #808080;
    color: white;
    border: 1px solid white;
}
#content {
  background-color: #3b57ab;
    width: 98%;
    border: 1px solid white;
    padding: 4px;
}
#content div.titrePage {
    height: 60px;
    padding: 4px 3px;
}
#content div.titrePage H2 {
    height: 30px;
    border-top: 1px solid white;
    border-width: 70%;
}
/*--- 6) thumbnails catégories pages ---*/
#content div.thumbnailCategory {
    padding: 2px;
    border-top: 1px solid white;
    border-right: 1px solid white;
    border-left: 1px solid white;
    border-bottom: 0;
    background-color: #a0a0a0;
    color: black;
}
#content div.thumbnailCategory:hover {
    padding: 2px;
    border-top: 1px solid white;
    border-right: 1px solid white;
    border-left: 1px solid white;
    border-bottom: 0;
    background-color: #808080;
    color: white;
}
#content div.thumbnailCategory:hover a {
    color: #064b87;
/*couleur: indianred*/
    border: 0px;
}
#content ul.thumbnailCategories li {
    width: 33%;
/* largeur colonne cat‚gories ---*/
}
#content DIV.thumbnailCategory DIV.illustration {
    border: 0px;
    width: 152px;
    height: 152px;
/* max thumbnail width + 2px */
}
#content DIV.thumbnailCategory DIV.description {
    border: 0px;
    text-align: left;
    padding:  5px;
}
#content DIV.thumbnailCategory DIV.description  p {
    border: 0px;
    text-align: left;
    padding:  3px;
}
#content DIV.thumbnailCategory DIV.illustration img {
    border-left: 2px solid #314a90;
    border-top: 2px solid #314a90;
    border-bottom: 2px solid #5873c4;
    border-right: 2px solid #5873c4;
    color: black;
}
#content DIV.thumbnailCategory DIV.illustration img:hover {
    border-left: 2px solid #314a90;
    border-top: 2px solid #314a90;
    border-bottom: 2px solid #5873c4;
    border-right: 2px solid #5873c4;
}
#content DIV.thumbnailCategory DIV.illustration a:hover {

}
/*--- 7) thumbnails pictures pages ---*/
#content UL.thumbnails SPAN, #content UL.thumbnails SPAN.wrap2 A, #content UL.thumbnails LABEL, #content DIV.thumbnailCategory DIV.illustration {
    width: 167px;
/* diapo max thumbnail width*  + 15px */
}
#content DIV.thumbnailCategory DIV.description {
    height: 145px;
    overflow: hidden;
    padding-left: 2px;
}
/* 1ø page max thumbnail height    - 15px */
div.illustration  img {
    border: 0px solid white;
}
div.illustration  img:hover {
    border: 0px solid #064b87;
/*couleur: indianred*/
}
/* Add  Ex-FTB diapo for thumbnails */
#content UL.thumbnails SPAN.wrap2 {
    height: 167px;
/* diopo max thumbnail height *  + 15px */
    overflow: hidden;
    padding-left: 2px;
}
#content UL.thumbnails SPAN.wrap2 {
    background-color: #a0a0a0;
}
#content UL.thumbnails SPAN.wrap2:hover {
    background-color: #808080;
}
#content UL.thumbnail IMG {
    border: 1px solid #faffb3;
/*couleur: linked blue*/
}
#content UL.thumbnails SPAN.wrap2 {
}
#content UL.thumbnails SPAN.wrap2 IMG {
    border-left: 2px solid #314a90;
    border-top: 2px solid #314a90;
    border-bottom: 2px solid #5873c4;
    border-right: 2px solid #5873c4;
}
#content ul.thumbnails span.thumbLegend {
    padding: 0.5em 0;
}
#content DIV.comment BLOCKQUOTE {
    margin-left: 160px;
/*maximum thumbnail width + ~10px */
}
#content DIV.thumbnailCategory DIV.description  p {
    text-align: left;
}
.zero {
    display: none
}
.nb-hits {
    color: #a9a9a9;
}
.nb-comments {
    color: #a9a9a9;
}
/*--- 8) picture page ---*/
#thePicturePage#the_page {
    background-color: #808080;
}
#imageToolBar {
}
#imageHeaderBar {
    width: 100%;
    background: #3c58ab;
    border: 1px solid white;
}
#theImage IMG {
    border: 5px solid black;
}
#imageHeaderBar H2 {
    border: 0px;
    clear: both;
    text-align: center;
    padding: 0.5em 0 0 0;
}
#imageHeaderBar .browsePath a {
    color: #faffb3;
/*couleur: linked blue*/
    text-decoration: none;
}
#imageHeaderBar .browsePath a:hover {
    color: #064b87;
/*couleur: indianred*/
}
/*#imageToolBar A:hover {
    background-color: #a0a0a0;
}
*/
.infoTable {
    background-color: #a0a0a0;
    margin: 10px auto;
}
#thumbPrev {
    margin: 10px 0 0 10px;
}
#thumbNext {
    margin: 10px 10px 0 0;
}
a#thumbPrev, a#thumbNext {
    text-decoration: none;
    border: 0px;
}
/*--- 9) tags ---*/
/*--- 9b) menuTagCloud ---*/
#menubar UL#menuTagCloud {
    width: 25em;
}
#menubar UL#menuTagCloud A {
/*---    padding-left: 2px; ---*/
}
#menubar UL#menuTagCloud LI {
    float:left;
/*---    display: block; ---*/
}
UL#menuTagCloud A IMG {
    position: static;
}
UL#menuTagCloud A {
    left: 2px;
    padding-right: 0;
    border-width: 0;
}
#menubar UL#menuTagCloud A.tagLevel1, #menubar UL#menuTagCloud A.tagLevel2, #menubar UL#menuTagCloud A.tagLevel3, #menubar UL#menuTagCloud A.tagLevel4, #menubar UL#menuTagCloud A.tagLevel5, #menubar UL#menuTagCloud A.tagLevel6, #menubar UL#menuTagCloud A.tagLevel7, #menubar UL#menuTagCloud A.tagLevel8, #menubar UL#menuTagCloud A.tagLevel9, #menubar UL#menuTagCloud A.tagLevel10 {
    padding-left: 18px;
/*---    position: static; ---*/
/*--- display: block; ---*/

}
/*--- 9c) Page des tags --- */
ul#fullTagCloud {
    position: relative;
    border: 1px solid white;
    border-width: 1px 0;
    padding: 5px;
    margin: 8px 0 20px 0;
    overflow: hidden;
    height: 100%;
    font-size: 100%;
    background: #a0a0a0;
}
ul#fullTagCloud li {
    display: block;
    float: left;
    margin: 4px;
    padding: 1px 5px;
    height: 18px;
    line-height: 18px;
    background: #a0a0a0;
}
ul#fullTagCloud li a:link, ul#fullTagCloud li a:visited {
    color: #005D99;
    text-decoration: none;
}
ul#fullTagCloud li a:hover {
    text-decoration: underline;
    border: 0;
}
ul#fullTagCloud li a:focus, ul#fullTagCloud li a:active {
    color: #808080;
}
.tagLevel5 {
    font-size: 160%;
}
.tagLevel4 {
    font-size: 140%;
}
.tagLevel3 {
    font-size: 120%;
}
.tagLevel2 {
    font-size: 100%;
}
.tagLevel1 {
    font-size: 80%;
}
/*.tagLevel1 {
    font-size: 80%;
}
.tagLevel2 {
    font-size: 90%;
}
.tagLevel3 {
    font-size: 100%;
}
.tagLevel4 {
    font-size: 110%;
}
.tagLevel5 {
    font-size: 120%;
}
.tagLevel6 {
    font-size: 130%;
}
.tagLevel7 {
    font-size: 140%;
}
.tagLevel8 {
    font-size: 150%;
}
.tagLevel9 {
    font-size: 160%;
}
.tagLevel10 {
    font-size: 170%;
}
*/
/*--- 10) comments ---*/
#comments {
    width: 860px;
    margin: 20px auto;
}
#comments DIV.comment BLOCKQUOTE {
    border: 1px solid #5f5f5f;
    border-left: 2px solid #61707E;
}
FIELDSET, INPUT, SELECT, TEXTAREA, TABLE.table2, #infos, #content DIV.comment  A.illustration IMG {
    border: 1px solid white;
}
textarea {
    width: 80%;
}
/*--- 11) calendar ---*/
UL.categoryActions, DIV.calendarViews {
    padding-top: 5px;
    padding-right: 6px;
}
/*--- 11b) calendar elements ---*/
SPAN.calItemEmpty {
    color: red;
}
SPAN.calItem, SPAN.calItemEmpty {
    border: 1px solid #61707E;
}
TD.calDayCellEmpty, TD.calDayCellFull {
    border: 1px solid #606060;
/* couleur: gris*/
}
TD.calDayCellEmpty {
    color: #657583;
}
.calBackDate {
    color: #ffffff;
}
.calForeDate {
    color: #000000;
}
/*--- 12) footer ---*/
#copyright {
    clear: both;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    font-weight: bold;
    height: 40px;
}
#copyright a:link, #copyright a:visited {
    text-decoration: underline;
    color: #faffb3;
/*couleur: linked blue*/
}
#copyright a:hover {
    text-decoration: none;
    color: #064b87;
/*couleur: indianred*/
    border: 0;
}
/*--- 13) others ---*/
.pleaseNote {
    margin: 20px auto;
    width: 700px;
    background: #eee;
    color: #fea246;
/* couleur: mandarine*/
    border: 1px solid #fea246;
/* couleur: mandarine*/
    padding: 1ex;
    font-weight: bold;
}
.header_notes {
    background-position: left center;
    padding: 5px 0px;
}
li.categoryLi {
    float: left;
    margin: 2px;
    width: 46%;
}
input.rateButton {
    color: #faffb3;
/*couleur: linked blue*/
}
input.rateButtonSelected {
    color: #faffb3;
/*couleur: linked blue*/
}
INPUT.rateButton:hover {
    color: #064b87;
/*couleur: indianred*/
}
.tabsheet li {
    color: white;
}
.tabsheet li a {
    color: #faffb3;
/*couleur: linked blue*/
}
.tabsheet li a:hover {
    color: #064b87;
/*couleur: indianred*/
}
.tabsheet li {
    background-color: #708090;
/*couleur: slategray*/
}
.selected_tab {
    background-color: #9e9c96!important;
}
ul.tabsheet {
    border-color: #807d76;
}
.tabsheet li {
    border: 1px solid black;
}
.tabsheet li:hover {
    border-color: #484848 !important;
}
/*--- 14) quickconnect (still to be fixed for IE)---*/
FORM#quickconnect FIELDSET {
    width: 220px;
}
FORM#quickconnect LABEL {
    clear: left;
    /*margin: 0;
*/
    text-align: left;
}
FORM#quickconnect LABEL INPUT {
    font-size: 1em;
    /*width: 15em;
*/
}
FORM#quickconnect P, FORM#quickconnect A {
    border: none;
    padding: 0;
}
FORM#quickconnect ul.actions {
    width: auto;
}
FORM#quickconnect ul.actions li {
    display: inline;
    float: right;
}
/*---  15) Admin page ---*/
#content, BODY#theAdminPage #content {
    margin: 0 auto;
    background-color: #3c58ab;
    color: white;
}
.row1 {
    background-color: #61707E;
}
.row2 {
    background-color: #657583;
}
.throw {
    background-color: #5E6B7D;
}

vimages a écrit:

je ne suis pas lion de la vérité pour les tags, avec
}
UL#menuTagCloud A IMG {
  float:left;
  position: static;
}
UL#menuTagCloud A {
    left: 2px;
    padding-right: 0;
    border-width: 0;

est-ce que çà çà te conviendrait :
http://grum.dnsalias.com/testphpwg17/in … gs/4-tag_4

en faisant ça, sa met les cellules des sous-menu en bleu au  lieu de gris clair...

je comprends pas trop la réponse ^^;

vimages a écrit:

Quand on survole les sous-menu, un espace permet un affichage plus clair entre les lignes de liens, mais cet espace ne change pas de couleur au survol de la souris, normal puisqu'il n'est pas un lien lui même... du coup, ça fait des marges.. que j'aimerais supprimer..

les marges sont supprimées, elles sont de la même couleur que le fond du lien. donc si je comprends bien, c'est pas vraiment çà que tu voudrais ?

pour les nuages de tags, est-ce que l'exemple que j'ai fourni correspond à ce que tu souhaites ?

les marges sont supprimées, elles sont de la même couleur que le fond du lien. donc si je comprends bien, c'est pas vraiment çà que tu voudrais ?

oui !!

sur ta page d'exemple c'est bon !!!