Alignement cfinput + css

Version imprimable

slt,

j'ai un piti souci d'alignement sur un formulaire avec des css :

Pour ma première zone , pas de souci pour l'affichage, mais pour ma deuxième zone (datefield) le texte se cole derrière la zone alors que j'ai un css float right sur la zone.

Ou ai je faux ?

voici mon code cfm:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <cfset currdate = now()>
    <cfset datedujour="#dateformat(currdate, 'dd/mm/yyyy')#">
 
<div id="Fond">
    <cfform name="formulaire" action="enregistrement.cfm">
 
 
    <div class="c1"><cfinput class="c3" name="materiel" maxlength="5" required="yes" />Code Matériel</div>
 
    <div class="c1"><cfinput class="c3" type="datefield" mask="dd/mm/yy" name="mydate" />Preté le</div>
 
    </cfform>
</div>

et voilà mon css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@charset "utf-8";
/* CSS Document */
#Fond   
        {   
          position:absolute;
        top:50px;
        left:750px;
        background:#66F;
        width:450px;
        height:200px;
        border:20px;
        border-color:#999;
        }
 
.c1
        {
        margin-top:20px;
        margin-left:5%;
        }
 
.c3
        {
        float:right;
        margin-right:20px;
        }

23/04/2009, 10h16
jowo

Bonjour,

Est-ce un problème de CF ou de CSS?

Reprend le code HTML généré par CF et analyse le...
23/04/2009, 10h27
Fabienduceps

Merci pour ta réponse, mais ou puis je retrouver ce code généré ?

Je débute dans Coldfusion
23/04/2009, 10h34
jowo

;)

tu cliques droit sur la page de ton browser et tu sélectionnes pour FF: "Code source de la page" et pou IE: "Voir source..."
23/04/2009, 10h35
HiRoN

Citation:

Envoyé par Fabienduceps

Merci pour ta réponse, mais ou puis je retrouver ce code généré ?

Le code généré correspond au code interprété par le navigateur, cela reviens à "Afficher la source / Code source de la page"
23/04/2009, 10h42
Fabienduceps

merci Jowo et Hiron , vais aller voir

à priori c'est du javascript mais à quel script fait il appel ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head><script type="text/javascript">_cf_loadingtexthtml="<img alt=' ' src='/CFIDE/scripts/ajax/resources/cf/images/loading.gif'/>";
_cf_contextpath="";
_cf_ajaxscriptsrc="/CFIDE/scripts/ajax";
_cf_jsonprefix='//';
</script><script type="text/javascript" src="/CFIDE/scripts/ajax/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/messages/cfmessage.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/package/cfajax.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/package/cfcalendar.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/build/util/Date-min.js"></script>
 
<script type="text/javascript" src="/CFIDE/scripts/ajax/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/yui/calendar/calendar-min.js"></script>
<link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/resources/yui/yui.css" />
<link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/resources/cf/cf.css" />
<script type="text/javascript" src="/CFIDE/scripts/cfform.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/masks.js"></script>
 
 
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<link rel="stylesheet" type="text/css" title="design" href="design.css" />
 
<script type="text/javascript">
        if (window.ColdFusion) ColdFusion.required['materiel']=true;
</script>
 
<script type="text/javascript">
        ColdFusion.Ajax.importTag('CFINPUT-DATEFIELD');
</script>
 
		<script type="text/javascript">
                        var _cf_DATEFIELD_init_1240475824739=function()
                        {
                                ColdFusion.Calendar.setUpCalendar("mydate", "dd/mm/yy", 0, ["S","M","T","W","T","F","S"], ["January","February","March","April","May","June","July","August","September","October","November","December"], 'formulaire', null);
                        };ColdFusion.Event.registerOnLoad(_cf_DATEFIELD_init_1240475824739);
                </script>
 
<script type="text/javascript">
        if (window.ColdFusion) ColdFusion.required['materiel']=true;
</script>
 
<script type="text/javascript">
        if (window.ColdFusion) ColdFusion.required['personne']=true;
</script>
 
		<script type="text/javascript">
                        var _cf_DATEFIELD_init_1240475824740=function()
                        {
                                ColdFusion.Calendar.setUpCalendar("mydate", "dd/mm/yy", 0, ["S","M","T","W","T","F","S"], ["January","February","March","April","May","June","July","August","September","October","November","December"], 'formulaire', null);
                        };ColdFusion.Event.registerOnLoad(_cf_DATEFIELD_init_1240475824740);
                </script>
		<script type="text/javascript">

J'aurais pourtant pensé à un problème de CSS...

As-tu tenté de remplacer :
Code:

1 2 3 <div class="c1"> <cfinput class="c3" name="materiel" maxlength="5" required="yes" />Code Matériel </div>
Par :
Code:

1 2 3 4 <div class="c1"> <label>Code Matériel :</label> <cfinput class="c3" name="materiel" maxlength="5" required="yes" /> </div>
Ce qui te permet de jouer aussi en CSS sur le label... et donc à priori de placer le tout comme tu l'entends...

23/04/2009, 12h02
Fabienduceps

En fait la zone texte et la zone cfinput matériel s'affiche correctement.

D'abord j'ai un Float:right sur le cfinput et ensuite le texte vient grace au float se mettre en face .

Par contre sur la date , le type datefield ne fait pas réagir mon cfinput de la même manière.

le texte reste derrière le cfinput de la date.

Avec la balise Label je n'ai pas résolu mon problème. :cry:

As-tu tenté :

Code:

1
2
3
4
<div class="c1">
<label>Code Matériel :</label>
<cfinput class="c3" name="materiel" maxlength="5" required="yes" />
</div>

Avec (exemple à adapter) :

Code:

1
2
3
4
 
.c1 { width:500px; overflow:hidden; }
.c1 label { width:40%; } /* Voir avec un float:left; */
.c1 input { float:right; width:60%; }

Tout dépend de l'interprétation du CSS sur ton cfinput...

@Hiron
Fabienduceps travaille avec CF et les balises cform et cfinput. La balise cfinput avec le type datefield doit généré, à mon avis, un code HTML "complexe". Après lecture de la doc CF8, datefield peut générer du code pour un objet Flash ou pour du code HTML.

@Fabienduceps
Je mettrais la balise cfinput avec le type datefield dans une balise div où je definirai le style de cette manière margin:0;padding:0;inline
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <body> <cfset currdate = now()> <cfset datedujour="#dateformat(currdate, 'dd/mm/yyyy')#"> <div id="Fond"> <cfform name="formulaire" action="enregistrement.cfm"> <div class="c1"><cfinput class="c3" name="materiel" maxlength="5" required="yes" />Code Matériel</div> <div class="c1"><div classe="inlineBloc"><cfinput class="c3" type="datefield" mask="dd/mm/yy" name="mydate" />div>Preté le</div> </cfform> </div>
Code:

1 2 3 4 5 6 inlineBloc { display: inline; margin: 0; padding: 0; }

23/04/2009, 14h01
HiRoN

Citation:

Envoyé par jowo

@Hiron
Fabienduceps travaille avec CF et les balises cform et cfinput. La balise cfinput avec le type datefield doit généré, à mon avis, un code HTML "complexe". Après lecture de la doc CF8, datefield peut générer du code pour un objet Flash ou pour du code HTML.

Merci pour la précision, ne travaillant pas sous ColdFusion, je ne pouvais pas savoir ;)
Dans ce cas, ta proposition de rajouter un div et de jouer sur celui-ci me semble pertinente...
23/04/2009, 14h03
Fabienduceps

ok jowo , merci pour ta réponse je vais essayer ton code.

Hiron , sur la zone matériel çà marche avec mon code, mais c'est sur la zone de type "datefield" que j'ai le problème et ton code ne donne pas ce qu'il faut sorry.
23/04/2009, 14h04
HiRoN

Citation:

Envoyé par Fabienduceps

Hiron , sur la zone matériel çà marche avec mon code, mais c'est sur la zone de type "datefield" que j'ai le problème et ton code ne donne pas ce qu'il faut sorry.

Si comme le dis jowo, le datafield te génère un code autre que standard (X)HTML (donc balise <input ... />), cela est normal (le CSS .c1 input ne pouvant alors fonctionner).
23/04/2009, 14h36
Fabienduceps

Jowo tu es mon maitre :king:

merci encore
23/04/2009, 14h40
Fabienduceps

Encore merci Hiron :ave:
23/04/2009, 14h44
Fabienduceps

Juste une petite requete , ya mon pote benji qui en bave :marteau: avec ses problèmes d'accents... si vous pouviez faire quelque chose pour lui ?

çà serait sympa :merci:
23/04/2009, 14h58
HiRoN

Citation:

Envoyé par Fabienduceps

Juste une petite requete , ya mon pote benji qui en bave :marteau: avec ses problèmes d'accents... si vous pouviez faire quelque chose pour lui ?

Pour une meilleure gestion des caractères accentués, je te conseil plutôt de choisir un charset utf-8.

Il faut vérifier que tout soit en utf-8 :
- L'en-tête HTTP envoyé par le serveur
- L'encodage au niveau de l'éditeur
- Le Content-type au niveau du document (X)HTML
- L'encodage au niveau de la BDD
- Le paramètre AddDefaultCharset au niveau de la config de ton serveur Apache (si Apache)
- La précision de l'encodage au moment de la connexion à la BDD

Bonne chance ;)
23/04/2009, 15h21
Fabienduceps

ok merci