Problème CSS

Merle 285 Jedi

21 avril 2015 à 16:11

Salut à tous,

Je me remets tout doucement au développement web (ça fait super longtemps) pour un projet perso.
Ma connaissance/maîtrise du CSS est proche de 0, c'est pourquoi j'ai besoin de vous pour un petit coup de main pour une chose qui, j'en suis certain, n'est sans doute pas compliquée pour quelqu'un qui s'y connait...

J'ai le html suivant: www.cssdesk.com/znDKm

Ce que je voudrais faire, c'est que les 2 radiobuttons soient l'un au dessus de l'autre. Mais je n'ai vraiment aucune idée comment faire ça.

En gros, ce que je veux faire c'est ça :

Vous pouvez m'aider svp ?

Ce message a été modifié 1 fois. Dernière modification : 21 avril 2015 à 16:12 par Merle.

krapou 687 Geek

21 avril 2015 à 16:44

Tu les wrappes dans un bloc que tu fais flotter lui.

PetitCalgon 2503 Bob

21 avril 2015 à 16:44

Simple, des <table>

krapou 687 Geek

21 avril 2015 à 16:52

Ah oui, mais les inputs ne retournent pas à la ligne de base.

Je te fais une solution rapide.

Merle 285 Jedi

21 avril 2015 à 17:03

krapouTu les wrappes dans un bloc que tu fais flotter lui.

Ça a l'air cool, si seulement je comprenais ton jargon

PetitCalgonSimple, des <table>

Ris pas, ça m'a traversé l'esprit... mais non, mon but en même temps c'est de me remettre à jour sur les bonnes pratiques

krapouAh oui, mais les inputs ne retournent pas à la ligne de base.

Je te fais une solution rapide.

Merci

krapou 687 Geek

21 avril 2015 à 17:19

html:

<body>
    <div>
        <div class="group" id="group1">
            <label for"input1">Label 1</label>
            <input id="input1" type="text" />  	
        </div>	
        <div class="group" id="group2">	
            <span>Label 2</span>
            <div class="valuesGroup">
              <div class="subgroup">
                <input type="radio" value="Value1" id="value1">
                <label for="value1">Value 1</label>		
              </div>
              <div class="subgroup">
                <input type="radio" value="Value2" id="value2">
                <label for="value2">Value 2</label>		
              </div>
              
            </div>	
        </div>	
        <div class="group" id="group3">		
            <button>Go !</button>	
        </div>
    </div>
</body>

css:

.Group1 {
 display: inline;
}

.Group2 {
 display: inline;
    margin: 10px;
}

.Group3 {
    display: inline;
    margin: 10px;
}

.subgroup {
 clear: both;
 overflow: hidden;
 width: 200px;
}

.group {
  float: left;
}

.valuesGroup input {
  clear: both;
}

#group2 > span {
  float: left;
}

.valuesGroup {
  overflow: hidden;
  width: 200px:
}

Bon bien sûr il faut un peu nettoyer, et adapter certaines choses à ton besoin (au hasard la largeur de ton .valuesGroup).

Ce message a été modifié 1 fois. Dernière modification : 21 avril 2015 à 17:20 par krapou.

Merle 285 Jedi

21 avril 2015 à 17:28

Merci krapou, ça fonctionne bien

Maintenant je vais essayer de comprendre tout ça... J'avoue que j'ai bien du mal avec les float, les clear et les overflow (venant du xaml, ça me parait vachement compliqué pour faire ça !).

Est-ce qu'il y aurait de très bons tutoriels là dessus ? (disclaimer: je n'ai pas cherché pour le moment...)

Guybrush 7853 Bob

21 avril 2015 à 17:55

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

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

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

Concernant 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 (par exemple, le minichat du Lexpage dont le contenu dépasse le div qui le contient, et l'overflow est réglé pour afficher le scrolling).

A l'époque, y avait AlsaCreations qui avait quelques bons articles sur le CSS, mais ça doit dater d'avant CSS 2. Je sais pas trop ce qu'ils font maintenant. Je pense que le mieux, c'est de tester petit à petit et de te dire que, grosso-modo, tout est faisable via CSS, sans devoir bricoler le code (donc en gros, tu ne fais pratiquement que de la sémantique dans l'HTML, et l'habillage se fait via CSS).

PetitCalgon 2503 Bob

21 avril 2015 à 17:58

Arf XAML et HTML... Deux mondes qui ne se comprennent pas ...
<StackPanel Orientation="Vertical">
<RadioButton IsChecked="{Binding IsChecked,Mode=TwoWay}" Text="option 1"/>
</StackPanel>

Sinon, un <ListView Source="{Binding InputCollection"> et un ItemTemplate ...
Snif, si tout était aussi facile que du WPF

Merle 285 Jedi

21 avril 2015 à 18:18

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

Discussions

Répondre

Minichat