Annonce

Écrire une réponse

Veuillez écrire votre message et l'envoyer

Cliquez dans la zone sombre de l'image pour envoyer votre message.

Retour

Résumé de la discussion (messages les plus récents en premier)

grum
2007-10-16 20:06:48

vimages a écrit:

dans FF, menu outils....

pas aussi simple que çà en fait : faut l'installer quand tu installes FF, sinon tu n'as pas l'élément dans le menu..

si tu ne l'a pas fait à l'install, tu peux aller là :
http://www.blog.webatou.be/?2006/11/05/ … de-firefox

vimages
2007-10-16 18:04:05

dans FF, menu outils....

gbo
2007-10-16 17:55:22

grum a écrit:

en passant, y aurait une tonne de trucs inutiles à virer, tu peux t'aider de l'inspecteur DOM de FF pour voir ce qui ne va pas.

grum:
Je suis intéressé par cet outil de contrôle.
Peux-tu m'/nous indiquer comment le mettre en œuvre ?

vimages
2007-10-15 23:40:44

merci.

j'ai mis ton fichier en place...  les petits plus sont à droite et non plus à gauche...  pas grave, mais j'aimerais les remettre sur la même ligne que les mots.

j'ai changé l'icone...

grum
2007-10-15 23:22:41

vimages a écrit:

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

bon, j'ai une version avec un nuage de tags.
le problème, c'est la largeur du menu : difficile à gérer dynamiquement. donc obligé de mettre une largeur fixe, le nuage de tags s'y inisère comme il peut.... après, çà dépendra de la largeur du texte, et de la taille de la police.

j'avais pas pensé que je connaissais l'url pour aller chercher le thème...
donc là j'y pense et que je te donne direct l'url du fichier qui est actuellement en place sur mon site de test :
http://grum.dnsalias.com/testphpwg17/te … /theme.css

vimages
2007-10-15 23:17:16

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 !!!

vimages
2007-10-15 23:15:17

nos messages se sont croisés...

grum a écrit:

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

c'est très proche de ce que j'ai sur le site test en ce moment... :o) j'ai les petits "+" mieux placés... :o)

d'ailleurs, je vais mettre d'autres icones.

grum
2007-10-15 23:00:51

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 ?

vimages
2007-10-15 22:59:56

donc pour les tyags, voilà ou j'en suis...

/*--- 9b) menuTagCloud ---*/
#menubar UL#menuTagCloud {
    width: 22em;
}
#menubar UL#menuTagCloud A {

/*---    padding-left: 2px; ---*/
}
#menubar UL#menuTagCloud LI {
    float:left;
/*---    display: block; ---*/
}
UL#menuTagCloud A IMG {
  float:left;
  position: static;
  padding-right: 4px;
}
UL#menuTagCloud A {
    left: 2px;
    padding-right: 0;
    border-width: 0;


c'est pas mal, icones, tags...  il demeure une marge à droite des tags trop grande. L'affichage des couleurs de fond dépend du premier problème cité, concernant les fonds des sous-menus.

vimages
2007-10-15 22:52:03

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

grum
2007-10-15 22:49:43

vimages a écrit:

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

se sera plus simple....

bon çà ressemble à l'autre, donc commente les background-color pour #menubar DD a et #menubar a

grum
2007-10-15 22:46:06

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

vimages
2007-10-15 22:44:48

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;

vimages
2007-10-15 22:38:43

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;
}

grum
2007-10-15 22:28:46

effectivement, je suis sur l'autre thème ^^; néanmoins, ils me semblent identiques dans leur conception et n'ayant pas le source de celui-ci sous la main j'ai essayé avec l'autre.

si l'inspecteur ne se trompe pas :
ligne 219, tu dois avoir #menubar DD a { , tu commentes le background-color
ligne 174 tu dois avoir #menubar a { , tu commentes le background-color

et au environs de la ligne 168, tu as le #menu bar { ou tu peux rajouter le cursor:pointer; (optionnel bien sur)

Pied de page des forums

Propulsé par FluxBB

github twitter newsletter Faire un don Piwigo.org © 2002-2024 · Contact