Je bloque sur les blocs !! je ne comprends pas comment aligner deux de mes blocs alors que j'ai utilisé flex ? pourquoi les balises div qui contiennent d'autres balises div ne se comportent pas de la même façon que les balises "articles" ? Quelles sont les régles pour savoir quand une balise se ferme tout à la fin ou à l'intérieur du bloc. Pour terminer, chaque bloc devrait avoir une position left/top/right/bottom pour savoir la positionner dans la page ? j'ai cherché dans le cours mais je n'ai pas trouvé, si vous pouvez m'aider ?
bonne soirée
voilà ma page htlm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>ostyPascale</title>
</head>
<body>
<div id="page">
<div id="pave">
</div>
<header>
<p><a href="image/1petit.jpg"><img src="image/1petit.jpg" alt="Photo de Pascale"></a></p>
<h1>Pascale<h1/> <p>Déterminée, dynamique et positive</p>
</header>
<div id="rubriques">
<article id="experience">
<strong>Mon expérience</strong>
<ul>
<li>2003 à 2005 : Mutuelle d'assurance de santé</li>
<li>2005 à aujourd'hui: Mutuelle des professions artisans</li>
</ul>
</article>
<article id="competences">
<strong>Mes compétences</strong>
<ul>
<li>ingenierie pédagogique</li>
<li>création de contenus elearning</li>
<li>administration LMS</li>
</ul>
</article>
<article id="formation">
<strong>Ma formation</strong>
<ul>
<li>Master 2</li>
<li>Diplome assurance</li>
</ul>
</article>
</div>
</div>
<footer>
<p>
<a href="xx@orange.fr"title="VOUS NE LE REGRETTEREZ PAS!">N'hésitez pas à m'envoyer un mail</a>
</p>
</footer>
</body>
</html>
</div>
Je sens que les gens vont te conseiller de faire display:flex ou display:flex-column au lieu des float
@tout le le monde : je vois que tout le monde s'est mis à la mode du flex (à la Gad Elmaleh) mais je vous signale que ce n'est pas nouveau hein et pas la seule et unique solution aux problème des placement des box... ça existe depuis CSS2 cet attribut donc arrêtez de mettre des display:flex partout à chaque fois que quelqu'un a du mal à caler ses blocks.
ça dépend... y a 6 mois personne ne parlais de display:flex alors que ça existe depuis 10 ans voir plus et maintenant c'est devenu une mode parce que ça a dépanné plein de monde.
un display:table et les colonnes en display:table-cell suffisent aussi ou même display:table-column
avec des width en % on a la même chose.
Après les float sont pas nocifs non plus hein y a 6 mois on utilisait que ça donc... et c'était fonctionnelles ou des display:inline-block. J'ai passer ce cours comme ça perso et j'ai eu mon diplôme sans soucis
Je suis pas sur que les display:flex soit dans le cours
@stefde3 il faut revoir les dates que tu donnes la spec flexbox est sortie le 26 mai 2016 https://www.w3.org/TR/css-flexbox-1/ ça fait pas 10ans comme tu le dis.
Float n'est pas à l'origine pour le positionnement, il fait couler un texte autour d'un block. Ta réflexion est erronée, dire que quelque chose est fonctionnelle ne veux par dire pour autant que c'est correct. Si je vais dans ton sens, en prenant l'exemple des tableaux que l'on faisait en 1990-2000, c'était fonctionnel, cela n'était pas correct mais c'est ce qui existait à l'époque. Donc tout évolue, et les nouvelles techniques sont la pour améliorer d'autre.
Mais revenons sur le sujet, il ne faudrait pas oublier la question de l'OP hein.
@pascaleo Que ne comprends tu pas exactement ? As tu bien compris que le module flexbox crée un contexte flex et que chaque enfant devient un flex-item ? Que dans ce module il existe deux axes un principal (main axis) et un secondaire (cross axis). Et le fait de déclarer un flexbox (sur un container) place automatiquement les flex-item l'un à coté de l'autre puisque flex-direction: à la valeur de row par défaut ; donc pas besoin de l'indiquer comme tu l'as fait (ce n'est pas une erreur mais pas nécessaire)
Comme le souligne stefde3 il n'existe pas que flexbox pour indiquer les éléments l'un à coté de l'autre, inline-block, float, display : table sont autant de technique différentes avec leurs avantages et inconvénient.
Pour ce qui est de la propriété position, elle est mal comprise par bon nombre de débutant en ce sens qu'elle n'est pas à utiliser pour le positionnement global des éléments d'une page entière. Tu as positionner ton #pave en position: fixed; ce qui le fait sortir du flux courant (tout comme les float). Le flex lui reste dans le flux courant ce qui est à privilégier.
PS : Pour tes <strong> j'aurais indiquer un titre à la place.
@tout le le monde : je vois que tout le monde s'est mis à la mode du flex (à la Gad Elmaleh) mais je vous signale que ce n'est pas nouveau hein et pas la seule et unique solution aux problème des placement des box... ça existe depuis CSS2 cet attribut donc arrêtez de mettre des display:flex partout à chaque fois que quelqu'un a du mal à caler ses blocks.
Alors déjà, non sur les deux points : le module flexbox est récent et ne date pas de CSS2 ; le développement des modules de CSS3 a démarré il y a des années, et la première itération de flexbox date de 2009 (et elle était bien destiné à être une partie intégrante du CSS3 : http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/).
Et pour ce qui est de ne pas être l'unique solution aux problèmes de placement, en effet. Mais flexbox a été conçu précisément pour le placement des blocs. C'est son rôle, ce qui n'est le cas ni de float, ni de inline-block, ni de table-cell. Leur utilisation relevait du hack, et même si ça permettait d'avoir des systèmes fiables (dans lesquels j'ai été le premier à me spécialiser), ça restait du hack ; parce qu'on n'avait pas mieux.
Il n'y a rien qu'un de ces systèmes pouvait faire que flex ne permet pas ; en revanche, il permets de faire beaucoup de choses sur lesquels les autres ne peuvent rien, ou avec beaucoup trop de contraintes.
Donc oui, on le conseille souvent, parce que c'est ce à quoi ça sert.
Chaque module a son rôle :
Grid Layout pour le layout général de la page, et le système de grid
Flexible Box Layout pour la gestion fine des éléments de contenu (blocs divers)
display: inline-block pour la gestion des éléments de phrasing content (emojis/smileys, liens particuliers, etc.)
ou display: run-in pour l'intégration des titres dans un paragraphe
float pour habiller les images à l'intérieur d'un bloc de texte
- Edité par EmmanuelBeziat 25 mai 2017 à 5:29:05
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Si tu parles des propriétés box-*, elles sont restées à l'état de projet et n'ont jamais été publiées dans la version finale de CSS2.1 (justement parce que c'est devenu un module à part entière, intégré au CSS3) ; et je ne suis pas sûr qu'ils aient un jour été ajoutés à un quelconque navigateur, mais je ne peux pas vérifier car les propriétés en question ne sont même pas référencées dans caniuse (http://caniuse.com/#search=box-align)
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
En fait, je comprends vos échanges mais est ce que vous pourriez m'aider sur mes questions et mon code ?
bonne journée
Première chose à faire : corriger ton html. Tu ne devrais pas avoir une div en dehors de la balise html, la balise strong n'existe pas... Bref, commence par corriger ta base, ensuite on pourra voir ce qui va dessus. Aide-toi du validateur : https://validator.w3.org/
Et le conseil tant que j'y suis : laisse tomber les ID, garde ça pour les ancres. Pour ton CSS, utilise des classes.
stefde3 a écrit:
Faut que je me penche dessus pour les display:flex... j'avoue que je suis pas les nouvelles tendances
C'est pas si complexe à prendre en main au final. Ça rebute un peu au début parce que ça a l'air dense, mais on s'y fait très vite. Par contre, ne rate pas le coche trop longtemps, parce que là y a grid qui arrive, et ça va être une petite révolution aussi, mais c'est déjà plus tendu à prendre en main.
Après, je ne sais pas quelles sont tes aspirations / objectifs dans le web, mais fais attention quand même : ça évolue vraiment vite aujourd'hui. Se maintenir trop longtemps à l'écart, c'est aussi prendre le risque de se retrouver face à une falaise un peu haute à franchir quand on veut s'y remettre. Après, je comprend aussi tout à fait qu'on n'ait pas que ça à faire de son temps ; c'est une veille technologique très longue.
- Edité par EmmanuelBeziat 25 mai 2017 à 18:26:57
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
ce qui m'embête c'est le nom : flex : parfait pour du responsive car flexible de son diminutif je parie, mais je vois pas en quoi ça a un rapport avec l'alignement des div en fait
stefde3 > c'est "flexible" non pas pour le responsive, mais parce que les enfants d'un flex-item peuvent s'agrandir ou se rétrécir suivant la place disponible dans leur parent (et dans les deux dimensions).
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Absolument pas. C'est bien plus puissant que display: table (notamment accompagné de flex-wrap, qui est le grand manque du table-display - mais aussi parce qu'on peut changer l'ordre des éléments, ou bien qu'on peut positionner/aligner dans les deux axes). Et comme le dit la conclusion, les tests de performance datent de 2014, et maintenant tous les navigateurs modernes gèrent parfaitement flex
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Et surtout, essaye d'utiliser margin avec table-cell.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
alignement des blocs
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !