Aligner verticalement la légende des groupes, comment procéder ?

Page 2 sur 2 Précédent  1, 2

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Aligner verticalement la légende des groupes, comment procéder ?

Message par bugsbuny le Mer 25 Sep 2013 - 9:21

Rappel du premier message :

D'abord, bien le bonjour.

Est ce qu'il y a moyen de modifier l'apparence de la légende des groupes ?, à la place d'être l'un à coté de l'autre, y a t il moyen de les placer l'un en dessous de l'autre ?

Capture d'écran de la légende comme elle est maintenant et les traits rouge montre comment faire apparaître les groupes ci-dessous



Merci d'avance.

bugsbuny
# Tropactif #

Masculin
Messages : 1185
Inscrit(e) le : 01/03/2007

http://grpw.exprimetoi.com
bugsbuny a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aligner verticalement la légende des groupes, comment procéder ?

Message par bugsbuny le Ven 27 Sep 2013 - 23:43

Bonsoir Milouze14, ce que j'essaye de faire, c'est que le bloc avec le cadre reste centré lorsque je bouge l'image de gauche.
Quand je bouge l'image de gauche vers la gauche, le cadre avec le bloc suit automatiquement.
Donc, le bloc avec les groupes doit rester centré quand je modifie l'endroit de l'image de gauche.

Bonne soirée.

bugsbuny
# Tropactif #

Masculin
Messages : 1185
Inscrit(e) le : 01/03/2007

http://grpw.exprimetoi.com
bugsbuny a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aligner verticalement la légende des groupes, comment procéder ?

Message par Milouze14 le Sam 28 Sep 2013 - 5:00

Salut bugsbuny,
comme mentionné précédement , tu as changé la structure html ,
les images se positionnaient via la css sans toucher au contenu.

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aligner verticalement la légende des groupes, comment procéder ?

Message par bugsbuny le Sam 28 Sep 2013 - 8:40

@Milouze14 a écrit:Salut bugsbuny,
comme mentionné précédement , tu as changé la structure html ,
les images se positionnaient via la css sans toucher au contenu.

a++
Bonjour Milouze, effectivement avec le code avant que je ne change c'était bon.
Je l'ai réinstallé.
Les images ne sont pas identiques quand on passe par google chrome et par firefox.


Bonne journée et encore merci.


Dernière édition par bugsbuny le Sam 28 Sep 2013 - 9:18, édité 1 fois

bugsbuny
# Tropactif #

Masculin
Messages : 1185
Inscrit(e) le : 01/03/2007

http://grpw.exprimetoi.com
bugsbuny a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aligner verticalement la légende des groupes, comment procéder ?

Message par Milouze14 le Sam 28 Sep 2013 - 9:15

Re,
ce ne sont pas les images , mais un soucis avec la css que je vais tâcher de résoudre Wink .
Edit, tu peux me donner ta css stp Wink 


a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aligner verticalement la légende des groupes, comment procéder ?

Message par bugsbuny le Sam 28 Sep 2013 - 10:33

Ok, voici le css :



Code:
                /*l image a gauche dans la legende*/
                .M14_leg_left
                {
                float:left;
                margin-top:35px;/*positionnement de l image a 35px du haut*/
                margin-left:65px;/*positionnement de l image a 65px de la gauche*/
             
                }
                /*l image a droite dans la legende*/
                .M14_leg_right
                {
                float:right;
                margin-top:35px;/*positionnement de l image a 35px du haut*/
                margin-right:65px;/*positionnement de l image a 65px de la droite*/
                }
             
                /*La legende*/
                #M14_groupes
                {
             
                color:yellow;/*la couleur de police du titre*/
                font-size:18px;/*la taille de police du titre*/
                display:block; /*on demande un affichage en bloc*/
                min-width:200px;/*la largeur minimum du bloc*/
                max-width:250px;/*la largeur maximale du bloc*/
                height:auto;/*on autorise une hauteur indefinie*/
                /*on centre le bloc automatiquement avec les margin*/
                margin-left:auto;
                margin-right:auto;
                /*on donne un espace en haut 5px a droite 2px en bas 5px et a gauche 2px*/
                padding:5px 2px 5px 2px;
                text-align:center;/*on centre le texte*/
                }
                /*le caractere devant chaque groupe*/
               
#M14_groupes a:before
{
content:'•';
float:left;
}
 
               
   
   
         
                    /*--- Cette partie correspond à la description du forum ---*/
                    .forum-description {
                          margin: auto;
                          padding: 10px;
                          color: #000000;
                          width: 80%;
                          border: 3px solid #000000;
                          -moz-border-radius: 14px;
                          -webkit-border-radius: 14px;
                          font-size: 12px;
                    }
               
                    /*--- Cette partie correspond à l'onglet "X messages dans X sujets" ---*/
                    .forum-stats {
                          -moz-border-radius-topleft: 20px;
                          -moz-border-radius-topright: 20px;
                          -webkit-border-top-right-radius: 20px;
                          -webkit-border-top-left-radius: 20px;
                          border-top-right-radius: 20px;
                          border-top-left-radius: 20px;
                          border-bottom: 0 none !important;
                          border-left: 3px solid #000000;
                          border-right: 3px solid #000000;
                          border-top: 3px solid #000000;
                          color: #000000;
                          font-size: 11px;
                          font-style: italic;
                          height: 14px;
                          left: 280px;
                          padding: 3px;
                          position: relative;
                          text-align: center;
                          width: 200px;
                    }
    /*--- Cette partie correspond à l'affichage des sous-forums ---*/
    .forum-sousforum {
          color: #000000;
          border: 3px solid #000000;
          border-top: 0px !important;
          -moz-border-radius-bottomleft: 14px;
          -moz-border-radius-bottomright: 14px;
          -webkit-border-bottom-right-radius: 14px;
          -webkit-border-bottom-left-radius: 14px;
          border-bottom-right-radius: 14px;
          border-bottom-left-radius: 14px;
          margin: auto;
          padding: 4px;
          color: #000000;
          width: 60%;
          text-align: center;
          height: auto;
          font-size: 11px;
    }

    .moder {
                        color : green;
                        font-weight : bold;
                            background-color : black;
                            box-shadow: 0 0 50px black;
                                  border-radius:9px;
                            border: 1px solid orange;
                            width: 80%;
                              margin: auto;
                            }


    .mini_ava {
      float: left;
    }
    .mini_ava img {
      width: 40px;
      height: 40px;
      margin: 0 5px;
      border-radius: 10px;
      transition: all 2s;
      -moz-transition: all 2s;
      -webkit-transition: all 2s;
      -o-transition: all 2s;
    }
    .mini_ava img:hover
    {
      width: 80px;
      height: 80px;
    }

    #av_quickreply img{
      position: relative;
      top: 35px;
      left: 15px;
    }
   
    #av_quickreply {
      float: left;
    }

   
    .colorpicker {
    width: 356px;
    height: 176px;
    overflow: hidden;
    position: absolute;
    background: url(http://i83.servimg.com/u/f83/17/45/19/77/light11.png);
    font-family: Arial, Helvetica, sans-serif;
    display: none;
    }
   
    .colorpicker.dark{
    background: url(http://i83.servimg.com/u/f83/17/45/19/77/dark11.png);
    }
    .colorpicker_color {
    width: 150px;
    height: 150px;
    left: 14px;
    top: 13px;
    position: absolute;
    background: #f00;
    overflow: hidden;
    cursor: crosshair;
    }
    .colorpicker_color div {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp10.png);
    }
    .colorpicker_color div div {
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    overflow: hidden;
    background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp10.gif);
    margin: -5px 0 0 -5px;
    }
    .colorpicker_hue {
    position: absolute;
    top: 13px;
    left: 171px;
    width: 35px;
    height: 150px;
    cursor: n-resize;
    }
    .colorpicker_hue div {
    position: absolute;
    width: 35px;
    height: 9px;
    overflow: hidden;
    background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp11.gif) left top;
    margin: -4px 0 0 0;
    left: 0px;
    }
    .colorpicker_new_color {
    position: absolute;
    width: 60px;
    height: 30px;
    left: 213px;
    top: 13px;
    background: #f00;
    }
    .colorpicker_current_color {
    position: absolute;
    width: 60px;
    height: 30px;
    left: 283px;
    top: 13px;
    background: #f00;
    }
    .colorpicker input {
    background-color: transparent;
    border: 1px solid transparent;
    position: absolute;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: #898989;
    top: 4px;
    right: 11px;
    text-align: right;
    margin: 0;
    padding: 0;
    height: 11px;
    }
    .colorpicker_hex {
    position: absolute;
    width: 72px;
    height: 22px;
    background: url(http://i83.servimg.com/u/f83/17/45/19/77/custom11.png) top;
    left: 212px;
    top: 142px;
    }
    .colorpicker.dark .colorpicker_hex {
    background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp11.png) top;
    }
    .colorpicker_hex input {
    right: 6px;
    }
    .colorpicker_field {
    height: 22px;
    width: 62px;
    background-position: top;
    position: absolute;
    }
    .colorpicker_field span {
    position: absolute;
    width: 12px;
    height: 22px;
    overflow: hidden;
    top: 0;
    right: 0;
    cursor: n-resize;
    }
    .colorpicker_rgb_r {
    background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/custom12.png);
    top: 52px;
    left: 212px;
    }
    .colorpicker.dark .colorpicker_rgb_r{
    background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp12.png);
    }
    .colorpicker_rgb_g {
    background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/custom13.png);
    top: 82px;
    left: 212px;
    }
    .colorpicker.dark .colorpicker_rgb_g {
    background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp13.png);
    }
    .colorpicker_rgb_b {
    background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/custom14.png);
    top: 112px;
    left: 212px;
    }
    .colorpicker.dark .colorpicker_rgb_b {
    background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp14.png);
    }
    .colorpicker_hsb_h, .colorpicker_hsb_s, .colorpicker_hsb_b {
    display: none;
    }
    .colorpicker_submit {
    position: absolute;
    background: url("http://i83.servimg.com/u/f83/17/45/19/77/accept10.png") no-repeat;
    cursor: pointer;
    right: 10px;
    width: 48px;
    height: 50px;
    top: 118px;
    overflow: hidden;
    }
    .colorpicker_focus {
    background-position: center;
    }
    .colorpicker_hex.colorpicker_focus {
    background-position: bottom;
    }
    .colorpicker_submit.colorpicker_focus {
    background-position: bottom;
    }
    .colorpicker_slider {
    background-position: bottom;
    }
    .colorpicker { z-index: 3; }

   
   
   
    G. R. P. W.
   
   

bugsbuny
# Tropactif #

Masculin
Messages : 1185
Inscrit(e) le : 01/03/2007

http://grpw.exprimetoi.com
bugsbuny a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aligner verticalement la légende des groupes, comment procéder ?

Message par Milouze14 le Sam 28 Sep 2013 - 10:42

Re,
ok ajoutes seulement ceci dans ta feuille de style :

Code:

/*La hauteur des liens*/
#M14_groupes a {line-height:20px;}
Pense à cliquer sur le bouton


Je n'ai plus de soucis d'affichage avec Firefox ou même Chrome Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aligner verticalement la légende des groupes, comment procéder ?

Message par bugsbuny le Sam 28 Sep 2013 - 11:02

Un énorme merci Milouze, tout est en ordre, cool, ça change d'avant.
Passe un bon week end.
merci 

bugsbuny
# Tropactif #

Masculin
Messages : 1185
Inscrit(e) le : 01/03/2007

http://grpw.exprimetoi.com
bugsbuny a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aligner verticalement la légende des groupes, comment procéder ?

Message par Milouze14 le Sam 28 Sep 2013 - 11:04

Re,
de rien mon tit lapin Very Happy .

Bon Week-end à toi également:thumleft:  .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aligner verticalement la légende des groupes, comment procéder ?

Message par bugsbuny le Sam 28 Sep 2013 - 11:51

Quoi de neuf, docteur ? Siffleur Yes 

bugsbuny
# Tropactif #

Masculin
Messages : 1185
Inscrit(e) le : 01/03/2007

http://grpw.exprimetoi.com
bugsbuny a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 2 Précédent  1, 2

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum