Une div qui refuse de s'aligner à gauche

**madina** · 23/08/2011, 13h02

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 :

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

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 :

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

**MonsieurSmith** · 23/08/2011, 13h06

Code :

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

<div align="right"...

Confusion droite-gauche ?

**madina** · 23/08/2011, 13h25

Bonjour

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

mais j'ai seulement

Code :

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

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

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

mais ça refuse ?

**MonsieurSmith** · 23/08/2011, 13h34

Ce changement de style ferait-il l'affaire ?

Code :

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

1
2
3
4
#a_aligner_gauche {
    width:50%;
    margin:auto;
}

**madina** · 23/08/2011, 14h42

Bonjour,

Non pas du tout ça change rien.

Cordialement

**Bovino** · 23/08/2011, 14h50

Envoyé par MonsieurSmith

Code :

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

<div align="right"...

Confusion droite-gauche ?

Envoyé par madina

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

Kamoulox ?

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

La propriété CSS text-align, tu n'aimes pas ?

**Kaamo** · 23/08/2011, 14h52

et en passant la balise <fieldset> n'est pas fermée

**madina** · 23/08/2011, 15h31

Bonjour,

même en faisant

Code :

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

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 ?

**Kaamo** · 23/08/2011, 16h17

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 :

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

margin-left: 0px;

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

Code :

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

1
2
3
4
5
<div id="a_aligner_gauche">
<table cellpadding='0' cellspacing='0'>
...
</table>
</div>

**madina** · 23/08/2011, 17h37

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.

Invité · 23/08/2011, 17h49

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

**madina** · 23/08/2011, 18h35

Bonjour jreaux62,

voilà le fichier Html

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

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

Invité · 23/08/2011, 19h07

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

**Bovino** · 23/08/2011, 19h36

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

Invité · 23/08/2011, 19h42

Envoyé par Bovino

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

Je peux arrêter de me flageller, alors ?

parce que là ... ca commence à piquer ! ...

**Kaamo** · 24/08/2011, 12h06

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 :

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

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

Invité · 24/08/2011, 12h50

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 :

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