Annonce

  •  » Styles
  •  » [thème Yoga/menu horizontaux] deux points à affiner..

#1 2007-10-15 18:50:46

vimages
Membre
2004-03-27
2429

[thème Yoga/menu horizontaux] deux points à affiner..

Bonjour,

je voudrais vous proposer une version propre d'un thème pour Yoga, avec les menu horizontaux.

Il me manque pour cela le savoir faire pour régler deux points dans le fichier css....

Allez sur cette petite galerie de tests : http://www.v-images.com/abonnes17E_test … categories
(HS: Les couleurs du template qui sera soumis seront différentes.. je garde celui-ci pour ma galerie principale .../HS)

- Comment faire que après avoir choisi un tags dans la page tags, l'affichage des tags liés, dans le menu, se fasse sous forme de nuage.. comme avec le thème dark par exemple..
- 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..

Si vous avez la solution... je l'intègrerais dans le thème.

Merci.

éric.

Hors ligne

#2 2007-10-15 19:06:29

grum
Former Piwigo Team
50% Nantes - 50% Paris
2007-09-10
2502

Re: [thème Yoga/menu horizontaux] deux points à affiner..

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.


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 { ..... "


Mes photos avec Piwigo évidemment !
[ www.grum.fr ] [ photos.grum.fr ]

Hors ligne

#3 2007-10-15 21:33:32

vimages
Membre
2004-03-27
2429

Re: [thème Yoga/menu horizontaux] deux points à affiner..

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

Hors ligne

#4 2007-10-15 21:54:06

grum
Former Piwigo Team
50% Nantes - 50% Paris
2007-09-10
2502

Re: [thème Yoga/menu horizontaux] deux points à affiner..

pour les couleurs, dans theme.css :

ligne 226, commente background-color:  #e4e4e4;
ligne 182, commente background-color: white;

çà ira mieux ;)
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.

sinon rajoute ligne 175 cursor: pointer; dans #menubar, çà sera plus joli pour les entetes de menu :)

je jette un coup d'oeil pour les nuages...

Dernière modification par grum (2007-10-15 21:55:56)


Mes photos avec Piwigo évidemment !
[ www.grum.fr ] [ photos.grum.fr ]

Hors ligne

#5 2007-10-15 22:13:44

vimages
Membre
2004-03-27
2429

Re: [thème Yoga/menu horizontaux] deux points à affiner..

stop !!!

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

as tu bien suivi le lien donné plus haut ?

Hors ligne

#6 2007-10-15 22:28:46

grum
Former Piwigo Team
50% Nantes - 50% Paris
2007-09-10
2502

Re: [thème Yoga/menu horizontaux] deux points à affiner..

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)


Mes photos avec Piwigo évidemment !
[ www.grum.fr ] [ photos.grum.fr ]

Hors ligne

#7 2007-10-15 22:38:43

vimages
Membre
2004-03-27
2429

Re: [thème Yoga/menu horizontaux] deux points à affiner..

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

Hors ligne

#8 2007-10-15 22:44:48

vimages
Membre
2004-03-27
2429

Re: [thème Yoga/menu horizontaux] deux points à affiner..

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;

Hors ligne

#9 2007-10-15 22:46:06

grum
Former Piwigo Team
50% Nantes - 50% Paris
2007-09-10
2502

Re: [thème Yoga/menu horizontaux] deux points à affiner..

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


Mes photos avec Piwigo évidemment !
[ www.grum.fr ] [ photos.grum.fr ]

Hors ligne

#10 2007-10-15 22:49:43

grum
Former Piwigo Team
50% Nantes - 50% Paris
2007-09-10
2502

Re: [thème Yoga/menu horizontaux] deux points à affiner..

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


Mes photos avec Piwigo évidemment !
[ www.grum.fr ] [ photos.grum.fr ]

Hors ligne

#11 2007-10-15 22:52:03

vimages
Membre
2004-03-27
2429

Re: [thème Yoga/menu horizontaux] deux points à affiner..

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

Hors ligne

#12 2007-10-15 22:59:56

vimages
Membre
2004-03-27
2429

Re: [thème Yoga/menu horizontaux] deux points à affiner..

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.

Hors ligne

#13 2007-10-15 23:00:51

grum
Former Piwigo Team
50% Nantes - 50% Paris
2007-09-10
2502

Re: [thème Yoga/menu horizontaux] deux points à affiner..

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 ?


Mes photos avec Piwigo évidemment !
[ www.grum.fr ] [ photos.grum.fr ]

Hors ligne

#14 2007-10-15 23:15:17

vimages
Membre
2004-03-27
2429

Re: [thème Yoga/menu horizontaux] deux points à affiner..

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.

Hors ligne

#15 2007-10-15 23:17:16

vimages
Membre
2004-03-27
2429

Re: [thème Yoga/menu horizontaux] deux points à affiner..

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

Hors ligne

  •  » Styles
  •  » [thème Yoga/menu horizontaux] deux points à affiner..

Pied de page des forums

Propulsé par FluxBB

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