GuybrushUn <div> pour contenir les radio séparés par des <br/> marche aussi

J'ai lu en faisant des recherches que ce n'est pas conseillé d'utiliser le <br /> pour faire de la mise en page, uniquement pour un retour à la ligne dans du texte. Mais peut-être que c'est tortiller du cul pour chier droit ?

GuybrushY a pas un tag HTML pour regrouper sémantiquement les boutons radios ? Il me semblait...

Ça serait super intéressant !

GuybrushPour le float et les clear, il faut d'abord comprendre le display block et inline. Ensuite, ça va relativement tout seul

Oui, ce qui fait bizarre, c'est que (encore une fois venant du xaml) j'ai tendance à considérer que ça modifie le comportement du contenu, or c'est le comportement du div en question par rapport aux autres qui est modifié (si je ne me trompe pas...)

GuybrushConcernant l'overflow, c'est à part, et ça définit juste le comportement à adopter quand le contenu d'un block dépasse la taille de ce block

Mais dans mon cas, ce n'est pas ça le comportement, si ? Si je vire l'overflow, ça enlève le retrait du 2e radio.

Guybrushen gros, tu ne fais pratiquement que de la sémantique dans l'HTML, et l'habillage se fait via CSS

Ouaips, c'est bien ce que je compte faire.

PetitCalgonSnif, si tout était aussi facile que du WPF

M'en parle pas... Ça fait genre 5 ans que j'en fais tout le temps, je pense avoir atteint un bon niveau maintenant, et repasser en CSS derrière, ça fait mal

MerleJ'ai lu en faisant des recherches que ce n'est pas conseillé d'utiliser le <br /> pour faire de la mise en page, uniquement pour un retour à la ligne dans du texte. Mais peut-être que c'est tortiller du cul pour chier droit ?

Ouais mais bon

MerleÇa serait super intéressant !

Pas spécifiquement aux radios, mais y a le fieldset. Cela dit, dans ton cas, ça ne t'aidera pas

MerleMais dans mon cas, ce n'est pas ça le comportement, si ? Si je vire l'overflow, ça enlève le retrait du 2e radio.

C'est possible puisque l'overflow peut définir en partie le comportement qui se produit quand le contenu dépasse le contenant. En règle générale, je ne touche à l'overflow que quand j'ai besoin spécifiquement d'avoir un scrolling "localement" (ou que je souhaite que le contenu soit trimé au contenant).

Oui, l'overflow c'est un cas très étrange du CSS.

Il sert à préciser comment on gère les cas où le contenu dépasse le contenant.

Tu peux l'utiliser donc pour spécifier si le texte doit être masqué, si on doit faire apparaître une barre de défilement, etc…

Mais là où c'est subtil, c'est que si ton conteneur n'a pas de hauteur fixée, lui ajouter la propriété overflow: hidden; va non pas masquer le contenu qui dépasse mais agrandir le conteneur !

Tu peux utiliser l'inspecteur de DOM de ton navigateur pour regarder la différence de comportement avec et sans le overflow, et tu devrais voir que le texte passe sous le label car il se place indépendamment de son conteneur.

Bon j'ai continué à jouer avec tout ça, et maintenant, je n'arrive pas à centrer horizontalement tout ça. J'ai ajouté un div parent (dans mon idée, pour grouper l'ensemble), et je lui ai mis un margin-right et margin-left à auto, mais ça ne marche pas.

C'est vraiment bizarre comme comportement, est-ce que le contenu enfant influence le parent ? i.e. est-ce que le float: left qu'il y a sur mes conteneurs enfants font que le parent ne se centre pas ? ou bien peut-être que c'est parce qu'il n'y a pas de taille définie sur le conteneur parent ? (C'est quoi cette manie de CSS de vouloir des tailles fixes ? C'est précisément ce que je ne veux pas, sur un plus petit écran, il faut que ça aille à la ligne, pas que ça affiche un ascenseur...)

Bref, là je suis au boulot, mais tantôt je reposterai mon code.

PS: Au fait, j'ai utilisé ce site: howtocenterincss.com/ pour tenter le centrage de mon div, et je n'ai pas eu de résultat probant (site soumis en billet par mes soins)

MerleBon j'ai continué à jouer avec tout ça, et maintenant, je n'arrive pas à centrer horizontalement tout ça. J'ai ajouté un div parent (dans mon idée, pour grouper l'ensemble), et je lui ai mis un margin-right et margin-left à auto, mais ça ne marche pas.

align: center; ?

MerleC'est vraiment bizarre comme comportement, est-ce que le contenu enfant influence le parent ? i.e. est-ce que le float: left qu'il y a sur mes conteneurs enfants font que le parent ne se centre pas ?

Si tu n'as que des enfants flottants, je pense qu'il ne peut pas calculer sa taille correctement (puisque les flottants ne font pas partie du "poids" du conteneur).

Merle ou bien peut-être que c'est parce qu'il n'y a pas de taille définie sur le conteneur parent 6 (C'est quoi cette manie de CSS de vouloir des tailles fixes ? C'est précisément ce que je ne veux pas, sur un plus petit écran, il faut que ça aille à la ligne, pas que ça affiche un ascenseur...)

Un bon moyen pour comprendre ce qui se passe, c'est de mettre des background-color à tes éléments, ou encore d'utiliser l'inspecteur de ton navigateur (FF ou Chrome, les deux se valent) et de mettre en surbrillance les différents éléments. Ca te permet de voir ce qui se passe en temps réel (et de modifier en temps réel).

Guybrushalign: center; ?

J'ai pas essayé Mais encore une fois, dans ma compréhension, ce n'est valide que pour le texte, et donc ça ne sera pas strictement valide. Non pas que je sois maniaque à ce point là, mais dans le but de maximiser la compatibilité, je me dis que c'est pas plus mal de respecter le standard à la lettre... Mais bon, je commence à me demander si je ne vais pas passer par un framework avec une grille, plus facile à mon avis (j'ai déjà un peu utilisé bootstrap, et je n'ai jamais eu ce genre d'ennui)

GuybrushSi tu n'as que des enfants flottants, je pense qu'il ne peut pas calculer sa taille correctement (puisque les flottants ne font pas partie du "poids" du conteneur).

Pourquoi ça ? C'est bizarre, non? (enfin je dis ça mais je n'ai aucune idée de comment ça fonctionne lol)

GuybrushUn bon moyen pour comprendre ce qui se passe, c'est de mettre des background-color à tes éléments, ou encore d'utiliser l'inspecteur de ton navigateur (FF ou Chrome, les deux se valent) et de mettre en surbrillance les différents éléments. Ca te permet de voir ce qui se passe en temps réel (et de modifier en temps réel).

Yes, c'est ce que je compte faire, bonne suggestion, merci

Sinon, j'utilise Brackets (je voulais du wysiwyg pour le css), ça marche pas trop mal.

Je viens de tomber là dessus juste à l'instant : github.com/oliverzheng/h…

MerleJ'ai pas essayé Mais encore une fois, dans ma compréhension, ce n'est valide que pour le texte, et donc ça ne sera pas strictement valide.

Il y a text-align pour ça :) Je pense que la différence vient que l'un va tout aligner, alors que l'autre ne touche qu'aux inline.

MerleNon pas que je sois maniaque à ce point là, mais dans le but de maximiser la compatibilité, je me dis que c'est pas plus mal de respecter le standard à la lettre... Mais bon, je commence à me demander si je ne vais pas passer par un framework avec une grille, plus facile à mon avis (j'ai déjà un peu utilisé bootstrap, et je n'ai jamais eu ce genre d'ennui)

Un vrai régal, Bootstrap, pour ne pas trop se prendre la tête (et pour la partie prise de tête, il y a la solution Tchou ).

Ah bah mon lien c'est juste la source du site que tu as linké Merle, désolé du coup !

Pas grave krapou

Excellent

GuybrushIl y a text-align pour ça :) Je pense que la différence vient que l'un va tout aligner, alors que l'autre ne touche qu'aux inline.

C'est pas une histoire de compatibilité alors ? Parce que sinon pourquoi est-ce que ça serait un des trucs les plus difficiles à faire en css (dixit les nombreux articles que j'ai lu là dessus, et le site linké plus haut ("Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. "))

GuybrushUn vrai régal, Bootstrap, pour ne pas trop se prendre la tête (et pour la partie prise de tête, il y a la solution Tchou ).

ouais je vais définitivement passer sur boostrap, pourquoi réinventer la roue (si en plus c'est pour la faire carrée...)

Bon ben c'est vérifié, je suis une quiche (mais d'une force) en html+css...

Hier soir j'ai voulu faire un truc aussi simple qu'une fiche client (en gros, nom du client en gras, gros, souligné, + logo du client flottant à droite + des infos en dessous), et... j'y arrive pas. J'ai vraiment du mal à entrer dans la philosophie...

Comment vous faites ? Est-ce que vous mettez votre contenu avec un div autour de chaque unité "logique", et puis seulement vous faites le css? (donc en gros vous avez d'abord une page où le contenu est simplement l'un en dessous de l'autre ?). C'est ce que je vais essayer de faire ce soir, pcq ce que j'ai fait jusqu'à maintenant c'est essayer de mettre en forme au fur et à mesure, et je me perds...