Lexpage Worldwide, que vous soyez en Belgique, au Québec ou même en Afghanistan (dans ce cas là, bonne chance pour trouver un PC avec internet)    —  PM

Discussions

Problème CSS

Merle 285 Jedi
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
Tu les wrappes dans un bloc que tu fais flotter lui.
PetitCalgon 2672 Bob
Simple, des <table> :lol2:
krapou 687 Geek
Ah oui, mais les inputs ne retournent pas à la ligne de base.

Je te fais une solution rapide.
Merle 285 Jedi
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> :lol2:
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
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
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 8429 Bob
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 2672 Bob
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
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 :-/

Répondre

Vous devez être inscrit et identifié.