Aide sur le positionnement CSS

Question

C'est ma page : lien

Comme vous pouvez le voir sur la capture d'écran, les icônes (cercle rouge) ne sont pas alignées avec les icônes situées au-dessus (cliquez sur le titre pour le développer).

Le CSS :

body
{
    font-family: arial, helvetica, sans-Serif;
}

#talkbacks .noshow
{
    overflow:hidden;
    clear:both;
    padding: 2px 10px;

}

#talkbacks ul.top
{
    border: solid 1px #fff;
    margin: 0 -1px;
}

#talkbacks li
{
    width: 100%;
    /*margin-top: 5px;*/
}
/*
#talkbacks ul
{

    clear: both;
}*/

.n
{
    color: #758888;
    float: left;
    font-size: 12px;
    padding-right: 8px;
    line-height: 15px;
    width:15px; 
}

.c
{
    float: left;
    /*width: 400px;    */
    width:92%;
    margin-top: 0px;
    margin-right:5px;

}

.d
{
    font-weight: bold;
    color: #758888;
    font-size: 12px;
    line-height: 15px;
    margin: 0;
    padding: 0;
}

ul
{
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    padding-left:0px;
    margin-left:0px;
    margin-top:5px;
    margin-bottom:5px;
    clear:both;
}
a
{
    font-size: 12px;
    line-height: 15px;
    font-weight: bold;

}

a:link, a:visited
{
    color: #284D99;
    text-decoration: none;
    outline: none;
}
a:hover, a:active
{
    text-decoration: underline;
}

li ul li div.c
{
    padding-left: 26px;
}
li ul li ul li div.c
{
    padding-left: 52px;

}
li ul li ul li ul li div.c
{
    padding-left: 77px;
}
li ul li ul li ul li ul li div.c
{
    padding-left: 104px;
}

#talkbacks .noshow .userpanel
{
    display: none;  
}

#talkbacks .noshow .adminpanel
{
    display:none;
}
#talkbacks .noshow div.CommentBody, .show div.CommentBody p
{
    display: none;

}

/***************    Show Comment   **********************/
#talkbacks .show
{
    background: #F3F3F3 none repeat scroll 0 0;
    border-bottom: 1px solid #B6C7C7;
    border-top: 1px solid #B6C7C7;
    display: table;
    font-size: 12px;

    padding: 11px 10px;
    width: 439px;

}
/*#talkbacks .show p
{
    font-size: 1em;
}*/
#talkbacks .show div.CommentBody, .show div.CommentBody p
{
    display: block;
    margin: 1.5px 0 0 0;
    font-size: 12px;
}
#talkbacks .show .userpanel
{

    margin-top: 10px;

    display:block;
}

#talkbacks .show .userpanel .votes div.voteResult
{
    background-color: #FFFFFF;
    border: 1px solid #EBEBEB;
    color: #555555;
    float:left;
    font-weight: bold;
    padding: 0 4px;
    font-size: 11px;
}
#talkbacks .show .userpanel div.reply
{
    float:left;
}

#talkbacks .show .userpanel .votes div.buttons
{
    float:left;

}

/*************************** Add new comment **********************************/
#NewComment .textBox
{
    border: 1px Solid #002080;
    overflow:auto;
}
.linka 
{  
  cursor: pointer;
  cursor: hand;
}

La partie qui pose problème est celle-ci (je pense) :

li ul li div.c
{
    padding-left: 26px;
}
li ul li ul li div.c
{
    padding-left: 52px;

}

Je veux déplacer le div "c", vers la droite sans déplacer le panneau d'utilisateur avec les icônes.

Answer 1

Le problème est que vous définissez la largeur à 92 % de son conteneur, puis ajoutez 52 px de remplissage. La mise en page ressemble donc à ceci :

|26px| LEVEL 1 |
|    |   92%   |

|  52px  | LEVEL 2 |
|        |   92%   |

Comme les icônes sont alignées sur la droite, elles sont maintenant décalées car le bord droit est plus loin. Je vous recommande de ne pas définir la largeur de la division et d'utiliser plutôt les marges pour les aligner, comme ceci :

|26px| LEVEL 1 |
|    |         |

| 52px  | LVL2 |
|       |      |

Un conseil pour le débogage de ce genre de problème : mettez des bordures de couleurs différentes sur chaque élément. Cela aurait probablement rendu ce qui se passe plus évident, car vous l'auriez "vu".

Answer 2

Vous pouvez le faire de manière simple.

<div class="commentcontainer">
......
<div class="updown">....</div>
......
</div>

style :

.commentcontainer{position:relative;}
.commentcontainer .updown {position:absolute; top:20px; right:20px;}

ceci devrait fonctionner. désolé j'ai utilisé d'autres classes et autres l'idee principale est : mettre position:relative ; dans la css de la commentbox et mettre position:absolute ; top:20px ; right:20px ; dans la css du vote haut/bas ceci devrait mettre vos img`s de vote haut/bas au même endroit dans tous les commentaires.

Ou si cela ne fonctionne pas, vous devriez vérifier la largeur de la boîte de commentaires si elle a une valeur définie. Essayez de mettre : width:100% ; J'espère que cela vous aidera

Answer 3

Testé dans FF3

#talkbacks .show
{   
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  background:#F3F3F3 none repeat scroll 0 0;
  border-bottom:1px solid #B6C7C7;
  border-top:1px solid #B6C7C7;
  font-size:12px;
  overflow:hidden;
  padding:11px 10px;
  position:relative;
  width:439px;
}

div.votes
{
  float:none !important;
  position:absolute;
  right:20px;
}