17-06-2013, 03:14 PM
dans un formulaire qui occupe x% de la page (je ne connais pas les x%, ça dépendra du contexte), j'ai décidé de travailler avec des grilles css (basé sur one% mais j'ai modifié les %)
grosso modo je découpe mon formulaire en 12 colonnes.
Chaque ligne correspond à une variable. En standard, je peux modifier cette variable de deux manières :
- par un composant graphique
- par un input
de fait ma ligne affiche trois choses :
le composant graphique qui occupe 8 colonnes
le label de l'input, qui occupe 2 colonnes
l'input, qui occupe 2 colonnes
ainsi tout est bien aligné, indépendamment des différents morceaux (et pour plus tard, la css grid me permettra de jouer avec les mediaqueries).
A noter que le label, affiché à l'écran représente autant l'input que le composant graphique que la variable.
en pj le résultat, et le code ci dessous (j'ai ramé un peu, il est généré via javascript, de plus j'ai laissé le résultat de jquery ui pour les sliders)
le seul css intéressant est celui de la grille basé sur one% (en pj aussi)
grosso modo je découpe mon formulaire en 12 colonnes.
Chaque ligne correspond à une variable. En standard, je peux modifier cette variable de deux manières :
- par un composant graphique
- par un input
de fait ma ligne affiche trois choses :
le composant graphique qui occupe 8 colonnes
le label de l'input, qui occupe 2 colonnes
l'input, qui occupe 2 colonnes
ainsi tout est bien aligné, indépendamment des différents morceaux (et pour plus tard, la css grid me permettra de jouer avec les mediaqueries).
A noter que le label, affiché à l'écran représente autant l'input que le composant graphique que la variable.
en pj le résultat, et le code ci dessous (j'ai ramé un peu, il est généré via javascript, de plus j'ai laissé le résultat de jquery ui pour les sliders)
<form name="tabs" id="tabs">
<div class="gridContainer av_selector">
<div class="gridRow">
<select name="av_global_0_img" id="av_global_0_img">
<option selected="selected" value="#visage1">#visage1</option><option value="#visage2">#visage2</option></select>
</div>
<div class="gridRow">
<div class="av_slider gridCol8"><div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" name="av_global_0_w_slider" id="av_global_0_w_slider"><a style="left: 50%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div></div>
<label for="av_global_0_w_input" class="gridCol2">label1 inconnu</label>
<div class="gridCol2 gridLast"><input id="av_global_0_w_input" size="3" value="50" type="text"></div>
</div>
<div class="gridRow">
<div class="av_slider gridCol8"><div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" name="av_global_0_h_slider" id="av_global_0_h_slider"><a style="left: 70.6667%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div></div>
<label for="av_global_0_h_input" class="gridCol2">toto</label>
<div class="gridCol2 gridLast"><input id="av_global_0_h_input" size="3" value="53" type="text"></div>
</div>
<div class="gridRow">
<div class="av_colorBoxes gridCol8" name="av_global_0_c" id="av_global_0_c">
<div class="av_colorBox" id="av_global_0_c_0" style="background-color: pink"></div>
<div class="av_colorBox" id="av_global_0_c_1" style="background-color: #FEC"></div>
<div class="av_colorBox" id="av_global_0_c_2" style="background-color: #FCE"></div>
<div class="av_colorBox" id="av_global_0_c_3" style="background-color: #EEF"></div>
</div>
<label for="av_global_0_c_input" class="gridCol2">color</label>
<div class="gridCol2 gridLast">
<input id="av_global_0_c_input" size="3" value="2" type="text">
</div>
</div>
</div>
</form>
le seul css intéressant est celui de la grille basé sur one% (en pj aussi)