Taille de marge Avatar -INVISION-

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

Résolu Taille de marge Avatar -INVISION-

Message par Admin'R le 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.


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

Messages : 284
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 le 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
+ Hyperactif +

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

http://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 le 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
****

Messages : 284
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 le Jeu 30 Oct 2014 - 8:04

Car certain javas ont tendance à faire bugger à gauche.

FANCH 56
+ Hyperactif +

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

http://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 le Mar 4 Nov 2014 - 7:44

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

Admin'R
****

Messages : 284
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 le 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.



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

Messages : 284
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 le Mar 4 Nov 2014 - 20:08

Passe ton avatar à droite pour voir.

FANCH 56
+ Hyperactif +

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

http://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 le Mar 4 Nov 2014 - 20:47

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

Admin'R
****

Messages : 284
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 le 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
****

Messages : 284
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 le Mer 5 Nov 2014 - 10:55

Bonjour,

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

Cordialement


HPie
*****

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

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

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

Message par Admin'R le 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 ?


Admin'R
****

Messages : 284
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 le 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
+ Hyperactif +

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

http://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 le Mer 5 Nov 2014 - 18:09

Bonsoir, essaie ceci :

.postprofile {
width: 214px;
}

AenigmA
+ Hyperactif +

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 le 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 ?

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é...



HPie
*****

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

http://www.quatelbach.com/
HPie a été remercié(e) par l'auteur de ce sujet.
  • 0

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

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

Ne pas oublier aussi de faire CTRL+F5

FANCH 56
+ Hyperactif +

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

http://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 Milouze14 le Mer 5 Nov 2014 - 19:34

Salut Admin'R ,

peux tu donner ta feuille de style 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: Taille de marge Avatar -INVISION-

Message par Admin'R le 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.




Admin'R
****

Messages : 284
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 le 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.


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:
/* BORD ARRONDI */
div.borderwrap {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
tfoot td{
border-radius:0px 0px 5px 5px
}
div.maintitle {
border-radius:5px 5px 0px 0px
}
/* LIMITE TAILLE IMAGE DANS QUOTE */
blockquote img {
max-width:400px
}

/* TAILLE COULEUR LIENS HYPERTEXTE */
#navstrip a{
font-size: 15px;
color: #B0BBCD !important;}

#navstrip a:hover{
font-size: 15px;
color: #AA0000 !important;}
/* MINI ICONE BARRE DE LIENS */
#navstrip li.begin {
padding-left: 15px;
background: url('http://illiweb.com/fa/prosilver/icon_post_target.gif') no-repeat left 50%;
}
#navstrip li {
float: left;
margin: 0 5px;
padding-left: 13px;
background: url('http://illiweb.com/fa/prosilver/icon_post_target.gif') no-repeat left 50%;
}
/* TAILLE MAX IMAGE */
img {
max-width: 800px;
}
./* 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 #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;}

/* chantier */
.post .post-header {
background-color: #C6CCD4}

Admin'R
****

Messages : 284
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 Milouze14 le 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++


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.
  • 0

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

Message par AenigmA le Jeu 6 Nov 2014 - 6:26

Bonjour,
Ceci doit correspondre à 175px et doit fonctionner


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

AenigmA
+ Hyperactif +

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

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

Merci çà fonctionne parfaitement, mille Mercis cheers

@+

Admin'R
****

Messages : 284
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


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