Taille de marge Avatar -INVISION-

4 participants

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

Résolu Taille de marge Avatar -INVISION-

Message par Admin'R Mer 29 Oct 2014 - 21:19

Bonjour,

Voilà je n'arrive pas a travailler sur la taille de marge qui contient l'avatar de l'utilisateur et tous les renseignements liés au compte. J'aimerai avoir la même marge de chaque coté, la taille de la marge de gauche m'irait à merveille.

Taille de marge Avatar -INVISION- Exemple138
Marge soulignée par des pseudos flèches rouges

Comme vous pouvez le constater la marge de droite est fort disgracieuse, trop grande, en plus d'être inutile. J'ai bien essayé de travailler ce point de détails via le CSS mais je ne dois pas tomber sur les bons codes. Sans doute une mauvaise détermination de m'a part je ne suis qu'un apprenti sorcier en CSS ( Je me sers du travail des autres pour avancer, mais cette fois je suis trop court pour atteindre mon but )

Merci de votre aide

http://www.sectr.net


Dernière édition par Admin'R le Jeu 6 Nov 2014 - 8:52, édité 1 fois
Admin'R

Admin'R
****

Messages : 359
Inscrit(e) le : 28/11/2008

http://sectr.1fr1.net/forum.htm
Admin'R a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Taille de marge Avatar -INVISION-

Message par FANCH 56 Mer 29 Oct 2014 - 22:51

Bonsoir

Voici ce que j'utilise en codes CSS.

Attention sous invision, il vaut mieux mettre les profils à droite

Code:

/*  PROFIL  */
.box-content.profile {
background-color:#EFF0F3;font-style: italic;
font-size: 12px;}

/*  ALIGNER LES DÉTAILS DANS LE PROFIL DES POSTS  */

.postprofile{text-align: left;}
/* PROFIL*/
.postprofile {
border: 3px solid #8F9897 !important;
float: right;
margin-right: -14.4em;
padding-bottom: 10px;
text-align: left;
width: 220px;
}

/*  BORDURE DU PROFIL DANS LES POSTS  */

.postprofile {border:3px solid #8F9897 !important;
float:right;
margin-right: -14.4em;
width:220px;}
FANCH 56

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Taille de marge Avatar -INVISION-

Message par Admin'R Jeu 30 Oct 2014 - 7:26

Bonjour,

Merci à vous Fanch56 je vais faire des essais avec vos et vous faire remonter. Pourquoi vaut-il mieux positionner les profils à droites ?
Admin'R

Admin'R
****

Messages : 359
Inscrit(e) le : 28/11/2008

http://sectr.1fr1.net/forum.htm
Admin'R a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Taille de marge Avatar -INVISION-

Message par FANCH 56 Jeu 30 Oct 2014 - 8:04

Car certain javas ont tendance à faire bugger à gauche.
FANCH 56

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Taille de marge Avatar -INVISION-

Message par Admin'R Mar 4 Nov 2014 - 7:44

Ok merci je commence les tests aujourd'hui Smile Very Happy
Admin'R

Admin'R
****

Messages : 359
Inscrit(e) le : 28/11/2008

http://sectr.1fr1.net/forum.htm
Admin'R a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Taille de marge Avatar -INVISION-

Message par Admin'R Mar 4 Nov 2014 - 19:25

En utilisant les codes de Fanch56 ( MERCI ) j'ai enfin avancé dans mes recherches mais je n'ai pas atteint le but. Il subsiste quelques Coacs que je n'arrive pas résoudre.

il me reste un espace ici en rouge que j'arrive pas réduire sur tout la hauteur des pages, j'aimerai réduire à 2px.

Taille de marge Avatar -INVISION- Soucis10

voici ou en sont mes codes
Code:
/*  PROFIL  */
.box-content.profile {
background-color:#EFF0F3;font-style: italic;
font-size: 12px;}
 /*  ALIGNER LES DÉTAILS DANS LE PROFIL DES POSTS  */
.postprofile{text-align: left;}
/* PROFIL*/
.postprofile {
border: 3px solid #8F9897 !important;
float: left;
margin-right: -14.4em;
padding-bottom: 10px;
text-align: left;
width: 175px;
}
 /*  BORDURE DU PROFIL DANS LES POSTS  */
.postprofile {border:2px solid #8F9897 !important;
float:left;
margin-right: -14.4em;
width:175px;}



Admin'R

Admin'R
****

Messages : 359
Inscrit(e) le : 28/11/2008

http://sectr.1fr1.net/forum.htm
Admin'R a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Taille de marge Avatar -INVISION-

Message par FANCH 56 Mar 4 Nov 2014 - 20:08

Passe ton avatar à droite pour voir.
FANCH 56

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Taille de marge Avatar -INVISION-

Message par Admin'R Mar 4 Nov 2014 - 20:47

J'ai essayé, ca ne change strictement rien. toujours un marge à droite du profile.
Admin'R

Admin'R
****

Messages : 359
Inscrit(e) le : 28/11/2008

http://sectr.1fr1.net/forum.htm
Admin'R a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Taille de marge Avatar -INVISION-

Message par Admin'R Mar 4 Nov 2014 - 21:01

Quand j'utilise l'outil d'inspection d'élement je n'arrive pas a déterminer le cadre qu'il faut bouger. J'arrive à pointer un cadre en particulier mais pas le général : div#profile13245.postprofile

le numéro varie selon le post que je pointe.

je nage un peu drunken
Admin'R

Admin'R
****

Messages : 359
Inscrit(e) le : 28/11/2008

http://sectr.1fr1.net/forum.htm
Admin'R a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Taille de marge Avatar -INVISION-

Message par HPie Mer 5 Nov 2014 - 10:55

Bonjour,

Essayez simplement cela... et rien d'autres.
Code:
.postprofile {
   text-align: center;
   }

Cordialement

avatar

HPie
*****

Messages : 599
Inscrit(e) le : 16/08/2010

HPie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Taille de marge Avatar -INVISION-

Message par Admin'R Mer 5 Nov 2014 - 17:29

Bonjour, j'ai testé votre code mais ça n'aide pas vraiment à la réalisation que je souhaite. Merci à vous.

Quelqu'un pour m'aider a supprimer mon espace disgracieux ?

Taille de marge Avatar -INVISION- Soucis10
Admin'R

Admin'R
****

Messages : 359
Inscrit(e) le : 28/11/2008

http://sectr.1fr1.net/forum.htm
Admin'R a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Taille de marge Avatar -INVISION-

Message par FANCH 56 Mer 5 Nov 2014 - 17:47

Dans le code que je t'ai donné, change le margin right par ceci

Code:
margin-left: -14.4em;
FANCH 56

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Taille de marge Avatar -INVISION-

Message par AenigmA Mer 5 Nov 2014 - 18:09

Bonsoir, essaie ceci :

.postprofile {
width: 214px;
}
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Taille de marge Avatar -INVISION-

Message par HPie Mer 5 Nov 2014 - 19:00

Admin'R a écrit:Bonjour, j'ai testé votre code mais ça n'aide pas vraiment à la réalisation que je souhaite. Merci à vous.

Quelqu'un pour m'aider a supprimer mon espace disgracieux ?

Taille de marge Avatar -INVISION- Soucis10
Vous souhaitez quelle réalisation, centrer le lien, l'avatar et les textes qui sont dessous pour avoir de chaque coté la même marge ?
Si tel est le cas. c'est que je fais avec le code que je vous ai donné...


avatar

HPie
*****

Messages : 599
Inscrit(e) le : 16/08/2010

HPie a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Taille de marge Avatar -INVISION-

Message par FANCH 56 Mer 5 Nov 2014 - 19:04

Ne pas oublier aussi de faire CTRL+F5
FANCH 56

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Taille de marge Avatar -INVISION-

Message par Invité Mer 5 Nov 2014 - 19:34

Salut Admin'R ,

peux tu donner ta feuille de style stp Wink .

a++

Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Taille de marge Avatar -INVISION-

Message par Admin'R Mer 5 Nov 2014 - 21:01

FANCH 56 a écrit:Dans le code que je t'ai donné, change le margin right par ceci

Code:
margin-left: -14.4em;

J'inverse le problème en faisant çà, j'avais retiré ton code margin right déjà dans cette optique. Le résultat.

Taille de marge Avatar -INVISION- Testfa10

Admin'R

Admin'R
****

Messages : 359
Inscrit(e) le : 28/11/2008

http://sectr.1fr1.net/forum.htm
Admin'R a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Taille de marge Avatar -INVISION-

Message par Admin'R Mer 5 Nov 2014 - 21:24

AenigmA a écrit:Bonsoir, essaie ceci :
.postprofile {
width: 214px;
}

C'est par ce premier code que j'ai commencé je crois et c'est là que j'ai vu apparaitre cette marge qui me coupe tout mes effets ( Laughing ). Votre 214 prouve que vous vous êtes vraiment penchés sur mon soucis, merci vraiment. Ceci étant je souhaiterai que cette marge soit de 175 px, et si j'ajoute cette valeur ce code la marge réapparait.

Alors vous me direz pourquoi 175 ? Simplement pour encadrer proprement la taille maximal de la photo des avatars. Sur ce forum pas mal de photos sont utilisées pour étayer les propos ou reporter des faits, l'utilisateur est important mais les contenu des post sont à mon sens plus important. L'avatar est un marquer, pour reconnaitre rapidement, pas un spectacle. J'ai déjà du mal à laisser les signatures autres que écrites aux memebres déjà.... Une fois que j'ai determiné la taille max juste , j'ai trouvé le cadre idéal

Voici avec des avatars en taille max, le cadre blanc est l'idéal.
Taille de marge Avatar -INVISION- Test2_10

Pour réponse courte à Hpi, déjà esquissé dans ma réponse. je souhaite une colonne plus discrète de 175 px de large, pour laissé plus de place au contenu des post.

Milouze14 a écrit:Salut Admin'R ,
peux tu donner ta feuille de style stp Wink .
a++


Mon css:
Admin'R

Admin'R
****

Messages : 359
Inscrit(e) le : 28/11/2008

http://sectr.1fr1.net/forum.htm
Admin'R a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Taille de marge Avatar -INVISION-

Message par Invité Jeu 6 Nov 2014 - 4:10

Salut Admin'R ,

dans ta css , tu as ceci:
Code:

./* PROFIL */
.box-content.profile
{
background-color:#EFF0F3;font-style: italic;
font-size: 12px;}



Petite erreur ici:
Le point avant le commentaire Wink
Code:
./* PROFIL */

Puis tout ce qui touche la partie concernée,
Code:

/* ALIGNER LES DÉTAILS DANS LE PROFIL DES POSTS */
.postprofile{text-align: left;}

/* PROFIL*/
.postprofile {
border: 3px solid #FFFFFF !important;
float: left;
padding-bottom: 10px;
text-align: left;
width: 175px;
}

/* BORDURE DU PROFIL DANS LES POSTS */
.postprofile {border:1px solid #FFFFFF !important;
float: left;
width:175px;}

Supprimes le tout et remplace par:
Code:

/* PROFIL*/
.postprofile
{
border-right: 3px solid #FFFFFF !important;
padding-bottom: 10px;
}
.post .post-header {border-bottom: 3px solid #FFFFFF !important;}

Pas besoin de spécifier le texte a gauche,le float left etc etc
c'est déjà dans la css de base Wink .

a++

a++

Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Taille de marge Avatar -INVISION-

Message par AenigmA Jeu 6 Nov 2014 - 6:26

Bonjour,
Ceci doit correspondre à 175px et doit fonctionner
Taille de marge Avatar -INVISION- 2014-110

.post-container {
margin-left: 15em !important;
}
.postprofile {
margin-left: -15em !important;
}
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Taille de marge Avatar -INVISION-

Message par Admin'R Jeu 6 Nov 2014 - 8:45

Milouze14 a écrit:Salut Admin'R ,

dans ta css , tu as ceci:
Code:

./* PROFIL */
.box-content.profile
{
background-color:#EFF0F3;font-style: italic;
font-size: 12px;}



Petite erreur ici:
Le point avant le commentaire Wink
Code:
./* PROFIL */

Puis tout ce qui touche la partie concernée,
Code:

/* ALIGNER LES DÉTAILS DANS LE PROFIL DES POSTS */
.postprofile{text-align: left;}

/* PROFIL*/
.postprofile {
border: 3px solid #FFFFFF !important;
float: left;
padding-bottom: 10px;
text-align: left;
width: 175px;
}

/* BORDURE DU PROFIL DANS LES POSTS */
.postprofile {border:1px solid #FFFFFF !important;
float: left;
width:175px;}

Supprimes le tout et remplace par:
Code:

/* PROFIL*/
.postprofile
{
border-right: 3px solid #FFFFFF !important;
padding-bottom: 10px;
}
.post .post-header {border-bottom: 3px solid #FFFFFF !important;}

Pas besoin de spécifier le texte a gauche,le float left etc etc
c'est déjà dans la css de base Wink .

a++

a++


Merci beaucoup,
Je n'ai pas retenu vos codes car il ne me donne pas la largeur et la présentation souhaité. Toute fois je retiens la très intéressante simplification de mon empilage de code. Une piste que je souhaite plus creuser car je retrouve des codes en doublons. Je dois avouer que je ne suis pas un spécialiste du CSS et me sert dans 80% du temps du travail des autres membres du FdF ( avec une grosse dominance du travail de Fanch56 ).

AenigmA a écrit:Bonjour,
Ceci doit correspondre à 175px et doit fonctionner
Taille de marge Avatar -INVISION- 2014-110
.post-container {
margin-left: 15em !important;
}
.postprofile {
margin-left: -15em !important;
}

Merci çà fonctionne parfaitement, mille Mercis cheers

@+
Admin'R

Admin'R
****

Messages : 359
Inscrit(e) le : 28/11/2008

http://sectr.1fr1.net/forum.htm
Admin'R a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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