Guide de survie du positionnement

Bonjour,

J'ai lu ce guide. J'ai une question par rapport au fait de garder les éléments dans le flux.

Il est noté :

"[...]Pour écarter les éléments entre eux ou au contraire les rapprocher, on utilisera les marges (margin) et le padding."

Je souhaite donc garder mon élément dans le flux, mais pour cela j'ai besoin de le "remonter".
Est-ce correcte d'utiliser des margin négative ?
Ex : margin-top:-100px;

Bonjour.

Rien ne l'interdit.

salut,
certes, rien ne l'interdit mais c'est généralement révélateur d'un manque de maîtrise de ce que tu fais (dans la majore partie des cas). Pour quelle raison veux-tu faire cela ?
Peut être qu'un exemple concret serait le bienvenue.

Bonjour à toutes et à tous.

Un exemple de ce que tu désires faire serait le bienvenu !

En général, tu as deux types de boîtes :
--> celles qui passe à la ligne suivante
--> celle qui reste sur la même ligne.

Dans le cas des boîtes sur une même ligne, tu peux avoir des hauteurs différentes.
L'alignement par défaut se fait par le bas alors que tu aurais préféré le faire par le haut.
En disant cela, je pense au fameux "vertical-align" !
N'est-ce pas ce genre de problème dont tu parles ?

@+

Non je n'ai pas de problème en particulier.

Je maitrise les différents type de positionnement. Juste qu'il est précisé dans ce guide qu'il faut évité de sortir un élément du flux.

Et si je veux respecter cet aspect, bah je suis amené forcément à utiliser des margins négatives.

Exemple :

<header id="header">
    <img src="xxx" >
    <p>Mon paragraphe</p>
</header>

D'habitude je mets mon image en floatant et mon p en floatant pour les avoirs cote à cote dans le header. Mais du coup je les sorts du flux. Je peux très bien les laisser dans le flux mais à ce moment la mon paragraphe aura des margin du genre : margin:-100px 0 0 400px;
Modifié par torest (02 Nov 2013 - 19:39)

et bien tu as
display:inline-block pour ton paragraphe et
display:flex qui te permet d'organiser ou de réorganiser tes éléments à l'ecran tout en conservant tes element à leur place dans le flux du document , on a bien un flux conservé.

La mise en forme compose leur positionnement, et c'est la qu'il faut éviter de rendre ton contenu incohérent, toi seul peut en juger et rien ne t'interdis de le faire.
Remplacer float par des marge négatives, c'est justement le truc a ne pas faire sauf pour le fun des mouches.

Le flux visuel peut s'inverser horizontalement avec
display/direction,
float ,
ou direction(ex:passage en langue arabe) pour les boite en ligne.

En utilisant clear et des éléments de petites largeur tu peut aussi simuler un inversement vertical, bien que display:flex soit fait pour.

ex: http://codepen.io/gcyrillus/pen/aCDhm ou http://codepen.io/gc-nomade/pen/iJvjD (redimensiionne la fenetre a -500px de largeur pour voir le header tombé sous le contenu ... sans utilisé display:flex, mais float + clear).
ou un autre pot pourri : http://dabblet.com/gist/5745612

Cdt,
Modifié par gc-nomade (02 Nov 2013 - 23:30)

Oki, donc je dois plus travailler sur la notion de mise en forme via display.

Merci pour les exemples de codes. Je vais essayer d'améliorer mes compétences d'intégration ! Car je ne maitrise pas enfaite ^^. Même si j'arrive toujours à placer l'élément comme je le veux. Mais bon je préfère le faire proprement et avec cohérence comme tu dis.

Merci encore pour ton avis, j'apprécie.

torest a écrit :
Non je n'ai pas de problème en particulier.
Je maitrise les différents type de positionnement.

Heureux de savoir que tu t'es rendu compte que ce n'était pas vraiment le cas.
Ces notions de sortir du flux ou pas n'est pas non plus à appliquer au pied de la lettre. Il existe des situations où tu sera contraint de le faire et lorsqu'on maîtrise bien le positionnement, ce n'est pas du tout un problème qu'un élément sorte du flux.
Pour les flottants il faut bien les comprendre pour ne pas avoir de surprises désagréables mais elles ne sont pas non plus un problème en soi. Tu devras penser à faire en sorte que ces dernières ne débordent pas leur conteneur et passer un "clear" à l'élément qui vient après, une fois que tu en auras fini avec.
Dans ton cas précis, il faut savoir déjà que les <img> ont un "vertical-align" par défaut qui est à "baseline" et que les <p> que tu utilises ont des marges non nulles (et il en va de même pour plusieurs autres éléments). Donc pour avoir un alignement propre dans ton cas, ça sera plutôt simple

img, p {display:inline-block;vertical-align:top;margin:0;}

À noter qu'avec des flottans c'est faisable aussi et ça reste tout aussi "propre".

header {overflow:hidden;}
img, p {float:left;margin:0;}

En n'oubliant pas le "clear" après.

Merci pour ta contribution.

Je n'ai pas de problème pour sortir un élément du flux et bien le positionner. C'est juste que je ne savais pas si c'était propre ou non.

Je savais pour la "p" mais pour "img" j'avoue que j'ai zappé son comportement par défaut. Donc maintenant, j'irais voir le comportement par défaut pour bien paramétrer l'alignement et après je sors ou non du flux, si cela est cohérent avec la mise en page. Et non pas, "ne pas sortir du flux".

Merci à vous, c'est vraiment agréable d'avoir les avis des autres quand on est tout seul à coder sans son coin.

Si vous voulez continuer à donner vos avis, ou poser des questions sur le sujet, ne vous gênez pas. Pour ma part, je pense pouvoir mettre ce topic en résolu.

Bonjour torest.

torest a écrit :
C'est juste que je ne savais pas si c'était propre ou non.

Je pense que tu te poses un faux problème. Je suis comme toi, je développe dans mon coin pour mon usage personnel et de ce fait, je suis autodidacte en ce qui concerne le web.

Je dirais plutôt que c'est une question de priorité mais aussi une question de fainéantise !

Pour la priorité, j'essaye toujours de voir si l'on ne peut pas trouver d'abord une solution "dans le flux" avant d'envisager autre chose (float ou position).

Pour la fainéantise, c'est de prendre le premier code qui fonctionne et de l'appliquer bêtement.
Comme j'ai du temps à perdre, je peux me permettre de réfléchir sur la meilleur solution à adopter.
Le plus difficile, pour moi, a été de maitriser la mise en forme de la présentation de mes pages web.
J'ai fait beaucoup d'exercices et j'apprends encore !
Si je me permets de proposer des solutions alors que je n'ai pas la compétence requise, c'est aussi pour que l'on vienne me dire ce qui ne va pas dans ma solution.
J'essaye de comprendre et ensuite j'adopte la solution proposée.

Pour répondre à ta question, il ne faut pas être trop rigide avec les règles que certains imposes.
Le bon respect des règles est une chose, mais faire une usine à gaz est la pire des solutions.

Je prends un exemple que j'adoptais assez facilement.
Il s'agit du positionnement du pied (le footer) dans une page.
J'avais trouvé une solution en JavaScript qui consistait à donner une hauteur à un margin-top (celui du footer) en fonction de la taille de la balise juste au-dessus et de la taille de la fenêtre.
Jusqu'au jours où j'ai compris que l'on pouvait faire pareil avec "min-height".

En gros, il n'y a pas de bonnes ou de mauvaises méthodes, mais des solutions plus ou moins acceptées.

@+