Alignement cfinput + css

**Fabienduceps** · 23/04/2009, 08h53

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
        }

**jowo** · 23/04/2009, 10h16

Bonjour,

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

Reprend le code HTML généré par CF et analyse le...

**Fabienduceps** · 23/04/2009, 10h27

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

Je débute dans Coldfusion

**jowo** · 23/04/2009, 10h34

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..."

**HiRoN** · 23/04/2009, 10h35

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"

**Fabienduceps** · 23/04/2009, 10h42

merci Jowo et Hiron , vais aller voir

**Fabienduceps** · 23/04/2009, 11h36

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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">

**HiRoN** · 23/04/2009, 11h40

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

As-tu tenté de remplacer :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Par :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**Fabienduceps** · 23/04/2009, 12h02

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.

**HiRoN** · 23/04/2009, 12h38

As-tu tenté :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**jowo** · 23/04/2009, 13h49

@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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**HiRoN** · 23/04/2009, 14h01

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...

**Fabienduceps** · 23/04/2009, 14h03

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.

**HiRoN** · 23/04/2009, 14h04

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).

**Fabienduceps** · 23/04/2009, 14h36

Jowo tu es mon maitre

merci encore

**Fabienduceps** · 23/04/2009, 14h40

Encore merci Hiron

**Fabienduceps** · 23/04/2009, 14h44

Juste une petite requete , ya mon pote benji qui en bave

avec ses problèmes d'accents... si vous pouviez faire quelque chose pour lui ?

çà serait sympa

**HiRoN** · 23/04/2009, 14h58

Envoyé par Fabienduceps

Juste une petite requete , ya mon pote benji qui en bave

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

**Fabienduceps** · 23/04/2009, 15h21

ok merci

Alignement cfinput + css

Coldfusion

Discussions similaires

Partager

Partager