Une div qui refuse de s'aligner à gauche

Version imprimable

Bonjour,

J'ai un formulaire dans une div centré.
tout juste aprés le formlulaire, j'ai placé une autre div que j'essaie d'aligner à gauche mais ça refuse.

Voici le code html
Code:

1 2 3 4 5 6 7 8 9 <body> <div id="formulaire"> <form name="chercher_previsions" action ="" method="post" > <fieldset><legend><b>Code CR</b></legend> </form> </div> <div id="a_aligner_gauche"></div> </body>
Code css
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 body { width: 100%; background-color: #F8D095; } #formulaire { width:50%; margin:auto; margin-top: 8%; margin-bottom: 2%; } #a_aligner_gauche { width: 50%; }
pourquoi le <div> après celle du formulaire ne s'aligne pas tout à fait à gauche aulieu de celle du formulaire ?

Merci de vos solutions.

Cordialement.

23/08/2011, 14h06
MonsieurSmith

Code:

<div align="right"...

Confusion droite-gauche ?
23/08/2011, 14h25
madina

Bonjour

ça fait pas partie dedans, je l'avais mis bien avant.

mais j'ai seulement

Code:

<div id="a_aligner_gauche"></div>

et je contrôle son alignement au niveau de la feuille de style.

mais ça refuse ?
23/08/2011, 14h34
MonsieurSmith
Ce changement de style ferait-il l'affaire ?
Code:

1 2 3 4 #a_aligner_gauche { width:50%; margin:auto; }
23/08/2011, 15h42
madina

Bonjour,

Non pas du tout ça change rien.

Cordialement
23/08/2011, 15h50
Bovino

Citation:

Envoyé par MonsieurSmith

Code:

<div align="right"...

Confusion droite-gauche ?

Citation:

Envoyé par madina

ça fait pas partie dedans, je l'avais mis bien avant.

Kamoulox ? :koi:

Tout d'abord, l'attribut align, c'est :vomi:

La propriété CSS text-align, tu n'aimes pas ? :whistle:
23/08/2011, 15h52
Kaamo

et en passant la balise <fieldset> n'est pas fermée ;)
23/08/2011, 16h31
madina
Bonjour,

même en faisant
Code:

1 2 3 4 #a_aligner_gauche { { text-align:left; }
j'ai toujours une marge qui reste inoccupée à gauche.
Comme "#a_aligner_gauche" contient un tableau, mon tableau laisse une marge sur mon écran.

J'ai l'impression que ça s'aligne à gauche mais pas par rapport à mon <body>

le problème reste entier ?
23/08/2011, 17h17
Kaamo
Si c'est la marge gauche qui pose problème, peut être ajouter une marge à gauche dans les propriétés CSS de body{}

Code:

margin-left: 0px;

ou alors jouer alors les cellpadding/cellspacing au niveau du tableau qui est dans le div ?
Code:

1 2 3 4 5 <div id="a_aligner_gauche"> <table cellpadding='0' cellspacing='0'> ... </table> </div>
23/08/2011, 18h37
madina

Bonjour,

ça change rien.
En fait le div en question qui doit se remplit par un innerHTML.

Mais quand je clique sur le bouton qui doit l'afficher , en premier temps il s'aligne bien à gauche sans laisser de marge et puis enfin il se positionne en laissant une marge importante de l’écran à gauche(c'est comme un flash).

c'est comme il reconnait l'extrémité gauche comme étant là où commence le formulaire( qui est centré par auto). Du coup la marge laissée est importante.

Voilà le soucis.
23/08/2011, 18h49
Invité

Bonjour Madina,
on peut voir les "vrais" bouts de code ?
-> au moins les parties qui sont concernées
-> depuis <!DOCTYPE ... jusqu'à ... </html>

+ une copie d'écran du résultat actuel
+ une image du résultat que tu veux obtenir

Merci

1 pièce(s) jointe(s)

Bonjour jreaux62,

voilà le fichier Html

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
57
58
59
60
61
62
63
64
65
66
67
68
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 <head>
 <title>Modification Previsions</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.numeric.js"></script
<script src="jquery.maskedinput-1.1.4.js" type="text/javascript"></script>
 <link rel="stylesheet" media="screen" type="text/css" title="Design" href="tester_operation_css.css" />
 <script type="text/javascript">
 function affiche_previsions()
{
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
reponse_texte = xhr.responseText;
// On se sert de innerHTML pour replir le contenu de notre div.
document.getElementById('ligne_modifier_prev').innerHTML = reponse_texte;
}
}
xhr.open("POST","affiche_liste_prev_modif.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
codecr_prev=document.getElementById('code_cr_prev').value;
xhr.send("Codecr="+codecr_prev);
}			
</script>	
  </head>
 <body>
<div id="formulaire">
 <form name="chercher_previsions" action =""  method="post" onsubmit="affiche_previsions();"  >
 <fieldset><legend><b>Code CR</b></legend>
</br>
<table align="center">
<tr align="center">
<td style="text-align:left">
<label style="margin-left:14%" ><b>Code CR</b>
<select   style="margin-left:10%" name="code_cr_prev" id="code_cr_prev" onchange="go_cr()"; >
<option value="-1">Aucun</option>
<?php
include('fonctions.php');
 connect();
 $sql_cr='SELECT code_cr FROM CR';
$res_cr = mysql_query($sql_cr) or die ('Erreur SQL !'.$sql_cr.'<br />'.mysql_error());;
while($row_cr = mysql_fetch_array($res_cr ))
{
echo '<option value="'.$row_cr['code_cr'].'">'.$row_cr['code_cr'].'</option>';
}
?>
</select></td>
</tr>
<table>
<center><input type="submit" name="echo_previsions" value="Rechercher Previsions" onclick="affiche_previsions(); return false;" /></center>
</fieldset>
</form>
</div>
 <div id="ligne_modifier_prev">
 </div>
<div align="center">
<span class="mad1"><a href="index_budget.html">Menu Principal</a></span>
<span class="mad2"><a href="menu_liste_modif_tables.html">Modifications</a></span>
 <span class="mad4"> <a href="javascript:self.close();" >Quitter</a></span>
<div>
<div id="pied_de_page_pa_pret">
  </div>
 </body>
<html>

code 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
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
body
{
width:100%;
margin:auto;
margin-left: 0px;
background-color: #F8D095;
}
 
#formulaire
{
width:50%;
margin:auto;
margin-top: 8%;
 margin-bottom: 2%; 
 }
.mad1
{
margin-left:0px;
}
.mad2
{
margin-left:10px;
}
.mad3
{
margin-left:10px;
}
.mad4
{
margin-left:10px;
}
 
.mad5
{
margin-left:10px;
}
 
#ligne_modifier_prev
{
 
text-align:left;
 
}
table
 {
 border-collapse: collapse;
 margin-bottom: 20px; 
}
td, th /* Mettre une bordure sur les td ET les th */
{
border: 1px solid black;
width:275px;
}

Donc c'est la div dont l'id est "ligne_modifier_prev" que je veux aligner à gauche tout juste après l'id du "formulaire".

Je vous attaché le fichier des resultats que j'obtiens et celui que je veux avoir.

voilà, .

23/08/2011, 20h07
Invité

Mea culpa. J'aurais dû préciser "code source généré". (-> "afficher la source")
23/08/2011, 20h36
Bovino

Citation:

Envoyé par jreaux62

Mea culpa. J'aurais dû préciser "code source généré". (-> "afficher la source")

Non non, tu n'as pas à faire de mea culpa, c'est clairement indiqué dans Important : Les règles incontournables d'utilisation de ce forum...
23/08/2011, 20h42
Invité

Citation:

Envoyé par Bovino

Non non, tu n'as pas à faire de mea culpa, ...

Je peux arrêter de me flageller, alors ? :sm: :fessee: parce que là ... ca commence à piquer ! ...
24/08/2011, 13h06
Kaamo

Il faut être vigilant aux balises et ranger son code de façon à avoir un aperçu visuel direct de l'ensemble des balises (où elles s'ouvrent et se ferment).
Quelques petites corrections du code postés ci-dessus :

Ligne 5 : Il manque le chevron fermant à la fin de :

Code:

<script type="text/javascript" src="jquery.numeric.js"></script>

Ligne 34 :
Utiliser <br/> à la place de </br>

Ligne 51 :
il manque </label>
Utiliser </select></label></td> à la place de </select></td>

Ligne 53 :
Utiliser </table> à la place de <table>
24/08/2011, 13h50
Invité

Donc, il nous faudrait :
-> le code html généré (-> "afficher la source")
~~-> le code css (tester_operation_css.css)~~ ca, c'est bon
-> le code html généré par "affiche_liste_prev_modif.php" (appelé via ajax)

Et comme dit Kaamo :
-> commence par CORRIGER ton code,
-> ajoute de l'INDENTATION (-> des tabulations, pour rendre le code plus facile à lire)
Ce n'est pourtant pas sorcier !

QUESTION :
-> où est donc ce div dans ton code ?????

Code:

<div id="a_aligner_gauche"></div>

Ce ne serait pas plutôt (?)

Code:

<div id="ligne_modifier_prev"></div>